> ## Documentation Index
> Fetch the complete documentation index at: https://docs.henrylabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Embed checkout and card collection directly into your frontend with a single script

The **Henry JS SDK** gives your frontend a complete checkout experience out of the box. Drop a fully managed checkout widget into any page in seconds, or embed a secure card input for custom payment flows - all from a lightweight, framework-agnostic library.

<CardGroup cols={2}>
  <Card title="Checkout Widget" icon="cart-shopping" href="/v1/sdk/client/widgets/checkout">
    Embed a complete buy-now checkout button and modal that handles cart, payment, and order confirmation
  </Card>

  <Card title="Card Element" icon="credit-card" href="/v1/sdk/client/elements/card-element">
    Securely collect card details in an isolated iframe and tokenize them for server-side processing
  </Card>

  <Card title="CVC Element" icon="shield-halved" href="/v1/sdk/client/elements/cvc-element">
    Re-collect the security code for a stored card without re-entering the full card
  </Card>
</CardGroup>

***

## Get started in minutes

<Steps>
  <Step title="Install the SDK">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @henrylabs/js
      ```

      ```bash bun theme={null}
      bun add @henrylabs/js
      ```

      ```bash pnpm theme={null}
      pnpm add @henrylabs/js
      ```

      ```bash yarn theme={null}
      yarn add @henrylabs/js
      ```
    </CodeGroup>

    Or load it directly from the CDN - no build step required:

    ```html theme={null}
    <script src="https://cdn.jsdelivr.net/npm/@henrylabs/js"></script>
    ```

    <Info>When loaded via CDN, the SDK is available as `window.Henry`.</Info>
  </Step>

  <Step title="Get your Widget ID">Go to the [Henry Dashboard](https://app.henrylabs.ai/dashboard/settings/app/developer) and copy your Widget ID. You'll pass this to `createCheckoutElement`.</Step>

  <Step title="Add a container and mount the widget">
    ```html theme={null}
    <div id="checkout-container"></div>

    <script type="module">
      import Henry from "@henrylabs/js";

      Henry.createCheckoutElement("#checkout-container", {
        widgetId: "widget_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        items: [
          {
            link: "https://www.nike.com/t/some-product/ABC-123",
            quantity: 1,
          },
        ],
      });
    </script>
    ```
  </Step>
</Steps>

***

## How it works

The Henry JS SDK renders UI elements inside your page using lightweight iframes. This keeps sensitive data (card numbers, payment info) fully isolated from your application while letting you control placement, styling, and events.

* **Card Element** - renders a secure card input iframe. Call `submit()` to tokenize the card and receive a `cardToken` you can pass to your server.
* **CVC Element** - renders a single secure CVC input for a card you already tokenized. A security code can't be stored, so it expires while the rest of the card stays valid; this applies a fresh one to the existing `cardToken` without re-collecting the card number or expiry.
* **Checkout Widget** - renders a button (full, compact, comfortable, or bubble) that opens Henry's hosted checkout modal on click. You supply the product links; Henry handles cart creation, payment, and order tracking.

<Info>The Checkout Widget requires a **Widget ID** from the [Henry Dashboard](https://app.henrylabs.ai/dashboard/settings/app/developer).</Info>

***

## Explore the guides

<CardGroup cols={3}>
  <Card title="Quickstart" icon="rocket" href="/v1/sdk/client/getting-started/quickstart">
    End-to-end walkthrough - install, mount, and handle checkout events
  </Card>

  <Card title="Checkout Widget" icon="cart-shopping" href="/v1/sdk/client/widgets/checkout">
    All options, display modes, and events for the checkout widget
  </Card>

  <Card title="Card Element" icon="credit-card" href="/v1/sdk/client/elements/card-element">
    Embed secure card collection and tokenize for server-side payment
  </Card>

  <Card title="CVC Element" icon="shield-halved" href="/v1/sdk/client/elements/cvc-element">
    Refresh the security code on a stored card before charging it again
  </Card>
</CardGroup>