CheckoutProvider

A provider component that manages the checkout state and provides access to checkout-related data and methods through React context. It handles customer information, delivery address, Stripe payment state, cart management, and order submission functionality.

• The CheckoutProvider must be wrapped with ClickarooProvider at the root level.
• The baseUrl and cart props are required.

Props

*cart

Array of cart items containing product information to be processed in the checkout flow.

cart: Array<{
  sku: string;
  offerPricePoint: string;
  [key: string]: unknown;
}>

• Each item in the cart array requires sku and offerPricePoint fields.
• You can optionally include additional product information (such as title, price, image, etc.), which will be saved to the order's metadata.

*baseUrl

API base URL for making requests to the checkout service.

baseUrl: string

*children

React children to be wrapped by the provider.

children: ReactNode

onCheckoutInit

Optional callback function triggered when checkout is initialized.

onCheckoutInit?: () => void

metadata

Optional metadata to be included with the order.

metadata?: Record<string, string>

Metadata can be set initially via this prop, and can also be dynamically updated using the setMetadata function from the checkout context.

locale

Optional locale string for internationalization.This value is related to the payment region.

locale?: string = 'en'

paymentMethodTypes

declare specific payment methods to enable

paymentMethodTypes?: string[] = ['card']

Usage Examples

import { CheckoutProvider, CheckoutPage, ClickarooProvider } from '@clickaroo/checkout-ui';
 
function App() {
  const cart = [
    {
      sku: "TEST001",
      offerPricePoint: "OPP-TEST001",
    }
  ];
 
  return (
    <ClickarooProvider>
      <CheckoutProvider
        baseUrl="https://api.clickaroo.io"
        cart={cart}
        onCheckoutInit={() => {
          console.log('Checkout initialized');
        }}
      >
        <CheckoutPage />
      </CheckoutProvider>
    </ClickarooProvider>
  );
}

Features

Form Management

• Manages customer information state
• Manages delivery address state
• Validates form data using Zod schemas

Payment Integration

• Payment instance initialization
• Payment form validation state
• Payment error handling
• 3DS (3D Secure) authentication handling

Order Processing

CheckoutProvider provides:

• Price point information retrieval
• Metadata management for orders
• Order completion state tracking