@nautical-commerce/checkout

Nautical Checkout React Library

This library provides React components and hooks to quickly build a seamless checkout and cart experience for your React application with the Nautical Commerce platform.

Installation

You can install the library using either npm or yarn:

note: Should package be @nautical-js/checkout or @nautical-js/react?

npm install @nautical-js/(checkout/react)

yarn add @nautical-js/(checkout/react)

Usage

The library provides two main components: and .

The component allows users to view their current cart and update its contents. It can be used as follows:

import { NauticalCart } from '@nautical-js/(checkout/react)';

<NauticalCart
  client={apiClient}
  token={ABCD1234} // if user returning with previous checkout session i.e. Session saved in LS or on customer DB.
  locale={'en-US'}
  environment={'test'}
  onChange={}
  onSubmit={} //triggers when the user proceeds to checkout i.e. User clicks "Checkout Meow" and is navigated to '/checkout'
  allowAnalytics={{enabled: true}}
  translations={{
    OrderTotal: 'Order Total',
    ContinueToCheckout: 'Checkout Meow',
  }}
  // These could be configured in the Nautical dashboard
  classNames={{
    CartContainer: {
        color: 'red',
        border: '1px solid white',
    }
  }}
  theme={{
    borderColor: 'white',
    borderWidth: 2,
    colorPrimary: 'blue',
    colorSecondary: 'yellow',
  }}
/>

Props

• client (required): An instance of the API client used to communicate with the backend.
• token (optional): A token identifying a previously created (and never completed) checkout session. If specified, the cart associated with this token will be loaded. If a user is logged in, without a token in LS, could they still have a session that is found with the user's token?
• locale (optional): The locale to use for address form and translation purposes. Doesn't set Nautical checkout locale. Default: en-US.
• environment (optional): The environment to use for the checkout. Defaults to test.
• onChange (optional): A function that is called whenever the checkout form changes.
• onSubmit (optional): A function that is called when the user submits the checkout form.
• allowAnalytics (optional): Indicates if you're sending analytics data to Nautical. Default: true/false
• translations: An object to override default copy

The component provides a seamless checkout experience. It can be used as follows:

import { NauticalCheckout } from '@nautical-js/(checkout/react)';

<NauticalCheckout
  client={apiClient}
  token={ABCD1234} // if user returning with previous checkout session i.e. Session saved in LS or on customer DB.
  locale={'en-US'}
  environment={'test'}
  onChange={}
  onSubmit={} //triggers when the user submits checkout
  allowAnalytics={{enabled: true}}
  translations={{
    BuyButton: 'Buy Meow',
    PayWithCard: 'Pay With Card',
  }}
  // These could be configured in the Nautical dashboard
  classNames={{
    CheckoutContainer: {
        color: 'red',
        border: '1px solid white',
    }
  }}
  theme={{
    borderColor: 'white',
    borderWidth: 2,
    colorPrimary: 'blue',
    colorSecondary: 'yellow',
  }}
/>

Props

• client (required): An instance of the API client used to communicate with the backend.
• token (optional): A token identifying a previously created (and never completed) checkout session. If specified, the cart associated with this token will be loaded. If a user is logged in, without a token in LS, could they still have a session that is found with the user's token?
• locale (optional): The locale to use for address form and translation purposes. Doesn't set Nautical checkout locale. Default: en-US.
• environment (optional): The environment to use for the checkout. Defaults to test.
• onChange (optional): A function that is called whenever the checkout form changes.
• onSubmit (optional): A function that is called when the user submits the checkout form.
• allowAnalytics (optional): Indicates if you're sending analytics data to Nautical. Default: true/false
• translations: An object to override default copy

Contributing

Contributions to this library are always welcome! If you find a bug or have a feature request, please open an issue. If you want to contribute code, please fork the repository and submit a pull request.

License

This library is released under the MIT License.