# @mycujoo/mcls-components-checkout

> 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** (published 2023-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mycujoo/mcls-components-checkout
pnpm add @mycujoo/mcls-components-checkout
yarn add @mycujoo/mcls-components-checkout
bun add @mycujoo/mcls-components-checkout
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-rc.13 |
| Published | 2023-10-17 |
| First published | 2023-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | adamahom, yneleven, berker93, vikkivi, pvmnt, farzad-mycujoo, mycujoo.tv, radev83, aandrei, pplaatje, oleksiih, antonella.manilla, thecodeassassin, rgalus, mycujoomats, alaandrei |

## Links

- npm: https://www.npmjs.com/package/@mycujoo/mcls-components-checkout
- npm.io page: https://npm.io/package/@mycujoo/mcls-components-checkout

## Recent versions

- 1.0.0-rc.13 (latest) — 2023-10-17
- 1.0.0-rc.12 — 2023-10-10
- 1.0.0-rc.11 — 2023-10-10
- 1.0.0-rc.10 — 2023-10-10
- 1.0.0-rc.9 — 2023-10-10
- 1.0.0-rc.8 — 2023-10-09
- 1.0.0-rc.7 — 2023-10-06
- 1.0.0-rc.6 — 2023-09-27
- 1.0.0-rc.5 — 2023-09-26
- 1.0.0-rc.4 — 2023-09-20
- 1.0.0-rc.3 — 2023-09-20
- 1.0.0-rc.2 — 2023-09-08
- 1.0.0-rc.0 — 2023-09-05
- 1.0.0-alpha.1 — 2023-08-23
- 1.0.0-alpha.0 — 2023-08-23

## README

# 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.

---
_Source: https://npm.io/package/@mycujoo/mcls-components-checkout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._