open-index/open-npm huggingface dataset:
npm package: @mycujoo/mcls-components-checkout
Description: The is a configurable react component that is to be used for rendering a checkout card for MCLS orders.
Latest version: 1.0.0-rc.13

# MCLS Checkout component

The is a configurable react component that is to be used for rendering a checkout card for MCLS orders.

## `CheckoutWithContext`

The `CheckoutWithContext` component is a wrapper around the `Checkout` component that handles the state creation and management for a single order.

Example of usage:

```tsx
import { CheckoutWithContext } from '@mycujoo/mcls-components-checkout'

const Checkout = () => {

    return <CheckoutWithContext 
      publicKey={"YOUR_PUBLIC_KEY"} 
      identityToken={"YOUR_USER_IDENTITY_TOKEN"} 
      orderId={"YOUR_ORDER_ID"}
      config={{
        width: '100%',
        height: '100%',
        showPromoCode: true,
        title: {
          color: `#0FF`,
        },
        header: {
          hide: true,
        },
      }}
    />
}


```

**Note:** The `orderId` is received from the `createOrder` function of the `useEventPackagesList` hook, or by using `useOrderCreate` hook inside the `EventPackagesContextProvider` component.