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 Your organization ID, if not already configured globally. Useful if you did not call configure() or need to override it for this checkout.
The price identifier for the subscription or product.
Customer information. Your internal identifier for the user.
Customer’s email address.
ISO country code for the customer (if applicable).
A CSS selector for the DOM element where the checkout form will be mounted. Show container styling requirements
When using the default skin, the container element must have the following CSS properties for proper display of the loading indicator: #checkout-container { position : relative ; min-height : 200 px ; /* Adjust based on your layout */ }
position: relative: Required because the loading overlay uses position: absolute to cover the containermin-height: Required to ensure the loader is visible during initialization. Recommended minimum is 200px Organization ID, if not already configured globally. Useful if you did not call configure() or need to override it for this checkout.
Additional metadata to associate with this checkout or customer. This data will be passed through to your backend.
Custom CSS selectors for card input fields. If not provided, FunnelFox will auto-generate the payment form. Show Card selector properties
CSS selector for the card number input field.
CSS selector for the expiry date input field.
CSS selector for the CVV input field.
CSS selector for the cardholder name input field.
CSS selector for the submit button.
CSS selector for the element where the PayPal button will be rendered.
CSS selector for the element where the Google Pay button will be rendered.
CSS selector for the element where the Apple Pay button will be rendered.
Array of payment method identifiers to control the display order. Available values: 'PAYMENT_CARD', 'PAYPAL', 'GOOGLE_PAY', 'APPLE_PAY'. Defaults to ['PAYMENT_CARD', 'PAYPAL', 'GOOGLE_PAY', 'APPLE_PAY'].
Callback invoked when the checkout has been initialized and is ready.
Callback to execute when the payment is successful. An alternative to listening for the 'success' event.
Callback for handling errors. Alternative to the 'error' event.
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: '[email protected] ' , countryCode: 'US' , // Optional }, container: '#checkout-container' , // Optional orgId: 'your-org-id' , // If not configured globally clientMetadata: { source: 'web' }, cardSelectors: { // Custom card input selectors (optional, defaults to auto-generated) cardNumber: '#cardNumberInput' , expiryDate: '#expiryInput' , cvv: '#cvvInput' , cardholderName: '#cardHolderInput' , button: '#submitButton' , }, paypalButtonContainer: '#paypalButton' , // Optional googlePayButtonContainer: '#googlePayButton' , // Optional applePayButtonContainer: '#applePayButton' , // Optional paymentMethodOrder: [ 'PAYMENT_CARD' , 'PAYPAL' , 'GOOGLE_PAY' , 'APPLE_PAY' ], // Optional // Callbacks (alternative to events) onInitialized : () => { /* ... */ }, onSuccess : result => { /* ... */ }, onError : error => { /* ... */ }, onStatusChange : ( state , oldState ) => { /* ... */ }, });
