@juicypie/checkout-js

Small browser SDK for embedding the checkout experience with Stripe Elements and the Checkout API client.

Installation

pnpm add @juicypie/checkout-js

Usage

<div id="checkout-card"></div>
<script type="module">
    import Checkout from '@juicypie/checkout-js'

    Checkout.init({ baseUrl: '/api' })
    Checkout.mount('sess_123', {
        container: '#checkout-card',
        onResult(result) {
            if (result.status === 'succeeded') {
                console.log('Success', result.intent_id)
            } else {
                console.error(result.error)
            }
        },
    })
</script>

Call Checkout.unmount() when the component leaves the page or before mounting a new session.

API

• Checkout.init({ baseUrl, fetchImpl? })
  • Must be called once per page load. Stores the API base URL and optional custom fetch implementation.
• Checkout.mount(sessionId, { container?, onResult?, submitButtonText? })
  • Fetches the session, loads Stripe.js once, renders an inline card element, and manages submit behaviour. The default container selector is #checkout-card-container.
• Checkout.unmount()
  • Cleans up DOM nodes, detaches listeners, and resets internal state.
• Checkout.status(sessionId)
  • Convenience proxy to the Checkout API status endpoint.

Styling

The SDK renders a minimal form (card element + button). Override styles by targeting the form container you provide. You can also pass a DOM node instead of a selector to fully control layout.

Result handling

onResult receives:

{ status: 'succeeded' | 'failed' | 'processing'; intent_id?: string; error?: string }

Use this callback to transition your UI or surface errors to the customer.

Browser support

The SDK relies on native fetch, Promise, and Stripe.js. For legacy browsers, provide appropriate polyfills before initialising the checkout.