Introduction

​

Get started in minutes

npm install @henrylabs/js

bun add @henrylabs/js

pnpm add @henrylabs/js

yarn add @henrylabs/js

<script src="https://cdn.jsdelivr.net/npm/@henrylabs/js"></script>

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

​

How it works

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

​

Explore the guides