Checkout Elements

Checkout Elements give you full control over the checkout experience for payments and subscriptions, while Airwallex handles payment collection, validation, and processing. Mount a checkout form element that combines shopper information collection and payment elements within a unified checkout flow.

createCheckout(options)

Creates an instance of the Checkout Element for the desired element type. The returned Checkout instance manages the shared iframe bridge.

You must call the Airwallex Billing Checkout API to obtain the client secret before initializing this element.

Parameters

options

requiredCheckoutOptions

Options for creating the Checkout instance.

client_secret

requiredstring

The client_secret of the Billing Checkout that the elements should render.

Obtain this value by calling the Airwallex Billing Checkout API from your server.

Returns

Promise<Checkout>

createCheckout(options)

1import { init } from '@airwallex/components-sdk';
2
3const { billing } = await init({
4  env: 'demo',
5  enabledElements: ['billing'],
6});
7
8const checkout = await billing.createCheckout({
9  client_secret: 'replace-with-your-checkout-client-secret',
10});

createElement(type)

Create an element within this Checkout instance.

Currently only 'paymentForm' is supported.

Parameters

type

requiredpaymentForm

The element type to create ('paymentForm').

Returns

Promise<PaymentFormElement>

createElement(type)

1const paymentForm = await checkout.createElement('paymentForm');
2paymentForm.mount('payment-form');

destroy()

Permanently tears down the element and its sub-widgets.

destroy()

1paymentForm.destroy();

mount(domElement)

Mounts the form into the DOM element with the given id (container is cleared first).

Parameters

domElement

requiredstring

mount(domElement)

1paymentForm.mount('payment-form');

on('ready', handler)

Emitted when the payment form and visible sub-widgets are ready.

Parameters

type

required'ready'

The event name.

handler

requiredfunction

on('ready', handler)

1paymentForm.on('ready', () => {
2  // The payment form is ready for customer interaction.
3});

on('success', handler)

Emitted when the checkout has been completed successfully. Please note that some local payment methods may trigger browser navigation before a success event can be delivered. As a result, the current page may no longer be available when the payment completes.

Parameters

type

required'success'

The event name.

handler

requiredfunction

on('success', handler)

1paymentForm.on('success', () => {
2  // Navigate the merchant page to its post-checkout state.
3});

on('error', handler)

Emitted on api, customer form validation or payment failures.

Parameters

type

required'error'

The event name.

handler

requiredfunction

The handler receives an object with the following properties:

code

requiredenum

message

optionalstring

type

optional'paymentForm'

on('error', handler)

1paymentForm.on('error', ({ code, message }) => {
2  // Surface or log the error.
3  console.error('Payment form error:', code, message);
4});

unmount()

Removes the form from the DOM; the instance can be mounted again.

unmount()

1paymentForm.unmount();

Was this page helpful?