@hanzo/checkout.js

Stripe-like checkout widget for any website. Works with vanilla JS, React, Vue, Svelte, and more.

Installation

npm install @hanzo/checkout.js

Quick Start

Script Tag (No Build Step)

<script src="https://unpkg.com/@hanzo/checkout.js"></script>
<script>
  HanzoCheckout.open({
    apiKey: 'pk_live_xxx',
    amount: 1999, // $19.99
  })
</script>

Vanilla JavaScript

import { createCheckout } from '@hanzo/checkout.js/vanilla'

const checkout = createCheckout({ apiKey: 'pk_live_xxx' })

// Create a checkout session
const session = await checkout.createSession({
  lineItems: [
    { name: 'Product', unitPrice: 1999, quantity: 1 }
  ]
})

// Redirect to checkout
checkout.redirectToCheckout(session.id)

React

import { CheckoutProvider, CheckoutForm } from '@hanzo/checkout.js/react'

function App() {
  return (
    <CheckoutProvider options={{ apiKey: 'pk_live_xxx' }}>
      <CheckoutForm />
    </CheckoutProvider>
  )
}

CDN Links

• unpkg: https://unpkg.com/@hanzo/checkout.js
• jsDelivr: https://cdn.jsdelivr.net/npm/@hanzo/checkout.js

API Reference

createCheckout(options)

Creates a new checkout client instance.

const checkout = createCheckout({
  apiKey: 'pk_live_xxx',
  appearance: {
    theme: 'light',
    primaryColor: '#000',
  }
})

checkout.createSession(params)

Creates a checkout session.

const session = await checkout.createSession({
  lineItems: [
    { name: 'T-Shirt', unitPrice: 2999, quantity: 2 }
  ],
  currency: 'USD',
  successUrl: 'https://example.com/success',
  cancelUrl: 'https://example.com/cancel',
})

checkout.redirectToCheckout(sessionId)

Redirects to the hosted checkout page.

checkout.openPopup(sessionId)

Opens checkout in a popup window.

License

BSD-3-Clause