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:

npm install @nautical-commerce/checkout

yarn add @nautical-commerce/checkout

Usage

The library provides two main components: and .

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

import { Checkout as NauticalCheckout, CheckoutProvider as NauticalCheckoutProvider } from '@nautical-commerce/checkout';
<NauticalCheckoutProvider       
  currency={currency}
  client={client}
  isLoggedIn={isLoggedIn}
  getClientSecret={getClientSecret}
  >
...
<NauticalCheckout
  countries={countries}
  defaultAddress={defaultAddress}
  paymentGateways={paymentGateways}
  onPayRedirect={onPayRedirect}
/>
...
</NauticalCheckout Provider>

Props

Checkout Provider

• countries (required): CountryFragment[] - List of countries supported in your checkout
• paymentGateways (required): PaymentGatewayFragment - Supported payment gateways and gateway data
• onPayRedirect (required): (checkoutId: string) => string
• defaultAddress (optional): AddressFragment | null - The user's default address for shipping

Checkout

• countries (required): CountryFragment[] - List of countries supported in your checkout
• paymentGateways (required): PaymentGatewayFragment - Supported payment gateways and gateway data
• onPayRedirect (required): (checkoutId: string) => string - Takes the checkout Id and returns the url for final payment processing
• defaultAddress (optional): AddressFragment | null - The user's default address for shipping