Skip to main content
Creates and opens a new checkout session for a given price and customer, and renders the payment UI on the page. This is the primary method to initiate a subscription checkout.

​
Parameters

​
priceId
string
required
The price identifier for the subscription or product.
​
customer
object
required
Customer information.
​
container
string
required
A CSS selector for the DOM element where the checkout form will be mounted.
​
orgId
string
Organization ID, if not already configured globally. Useful if you did not call configure() or need to override it for this checkout.
​
clientMetadata
object
Additional metadata to associate with this checkout or customer. This data will be passed through to your backend.
​
universalCheckoutOptions
object
An object of options to pass to Primer’s Universal Checkout for UI customization or payment method preferences (e.g. to configure payment methods like PayPal, styling, etc.).
​
onSuccess
function
Callback to execute when the payment is successful. An alternative to listening for the 'success' event.
​
onError
function
Callback for handling errors. Alternative to the 'error' event.
​
onStatusChange
function
Callback invoked on every status change. Alternative to the 'status-change' event.

​
Returns

A Promise<CheckoutInstance> that resolves to a CheckoutInstance object representing the checkout session. You can use this object to monitor events or perform actions on the active checkout.

​
Example

import { createCheckout } from '@funnelfox/billing';

const checkout = await createCheckout({
  // Required
  priceId: 'price_123',
  customer: {
    externalId: 'user_456',
    email: 'user@example.com',
    countryCode: 'US', // Optional
  },
  container: '#checkout-container',

  // Optional
  orgId: 'your-org-id', // If not configured globally
  clientMetadata: { source: 'web' },
  universalCheckoutOptions: {
    // Primer SDK options
    paypal: {
      buttonColor: 'blue',
    },
  },

  // Callbacks (alternative to events)
  onSuccess: result => {
    /* ... */
  },
  onError: error => {
    /* ... */
  },
  onStatusChange: (state, oldState) => {
    /* ... */
  },
});
⌘I