CheckoutWebComponents

Last updated: July 31, 2025

Initializes a CheckoutWebComponent instance.

Parameter	Type	Description
`appearance`	`object`	Customizes the visual appearance of the `CheckoutWebComponent` elements.
`componentOptions`	`object`	Customizes the options for the individual Flow components.
`componentOptions.applepay.acceptedCardSchemes`	`array`	The list of accepted card schemes in Apple Pay payments. This value can be one of: `american_express` `cartes_bancaires` `china_union_pay` `discover` `jcb` `mada` `mastercard` `visa` The values in this list are mapped into values supported by the Apple Pay JS SDK. This list overrides `componentOptions.flow.acceptedCardSchemes`.
`componentOptions.applepay.acceptedCardTypes`	`array`	The list of accepted card types in Apple Pay payments. This value can be one of: `credit` `debit` The values in this list are mapped into values supported by the Apple Pay JS SDK. This list overrides `componentOptions.flow.acceptedCardTypes`.
`componentOptions.applepay.buttonColor`	`string`	Customizes the Apple Pay wallet button appearance. This value must be supported by the Apple Pay JS SDK.
`componentOptions.applepay.buttonType`	`string`	Customizes the Apple Pay wallet button type. This value must be supported by the Apple Pay JS SDK.
`componentOptions.card.acceptedCardSchemes`	`array`	The list of accepted card schemes in card payments. This value can be one of: `american_express` `cartes_bancaires` `china_union_pay` `diners_club_international` `discover` `jcb` `mada` `mastercard` `visa` This list overrides `componentOptions.flow.acceptedCardSchemes`.
`componentOptions.card.acceptedCardTypes`	`array`	The list of accepted card types that in card payments. This value can be one of: `charge` `credit` `debit` `deferred_debit` `prepaid` This list overrides `componentOptions.flow.acceptedCardTypes`.
`componentOptions.card.data.cardholderName`	`string`	The name to pre-populate the cardholder name input field for card payments with.
`componentOptions.card.displayCardholderName`	`string`	The position of the cardholder name input field for card payments. `top` – The field is positioned above all other fields. `bottom` – The field is positioned below all other fields. `hidden` – The field is not displayed.
`componentOptions.data.email`	`string`	The email address used to pre-populate the email input field in `FlowComponent`.
`componentOptions.data.phoneCountryCode`	`string`	The phone country code used to pre-populate the phone input fields in `FlowComponent`.
`componentOptions.data.phoneNumber`	`string`	The phone number used to pre-populate the email input field in `FlowComponent`.
`componentOptions.flow.acceptedCardSchemes`	`array`	The list of accepted card schemes by Flow. This value can be one of: `american_express` `cartes_bancaires` `china_union_pay` `diners_club_international` `discover` `jcb` `mada` `mastercard` `visa` This list applies to the `card`, `rememberMe`, `applepay` and `googlepay` payment methods, and can be overridden by the payment method-specific lists. For example, the list `componentOptions.card.acceptedCardSchemes` overrides this list.
`componentOptions.flow.acceptedCardTypes`	`array`	The list of accepted card types by Flow. This value can be one of: `charge` `credit` `debit` `deferred_debit` `prepaid` This list applies to the `card`, `applepay` and `googlepay` payment methods, and can be overridden by the payment method-specific lists. For example, the list `componentOptions.card.acceptedCardSchemes` overrides this list.
`componentOptions.flow.expandFirstPaymentMethod`	`bool`	Sets whether to automatically expand the first payment method, if there are multiple payment methods.
`componentOptions.flow.showPayButton`	`bool`	Specifies whether to display the payment button in the UI. If you want to handle payment button rendering and interactions outside of Flow, set this to `false`. This option configures Flow globally. To override this for a specific payment method, set this in the component's `options` when you call the `create()` method.
`componentOptions.googlepay.acceptedCardSchemes`	`array`	The list of accepted card schemes in Google Pay payments. This value can be one of: `american_express` `discover` `jcb` `mastercard` `Visa` The values in this list are mapped into values supported by the Google Pay API. This list overrides `componentOptions.flow.acceptedCardSchemes`.
`componentOptions.googlepay.acceptedCardTypes`	`array`	The list of accepted card types by Google Pay. This value can be one of: `credit` `debit` `prepaid` The values in this list are mapped into values supported by the Google Pay API. This list overrides `componentOptions.flow.acceptedCardTypes`.
`componentOptions.googlepay.buttonColor`	`string`	Customizes the Google Pay wallet button appearance. This value must be accepted by the Google Pay API.
`componentOptions.googlepay.buttonType`	`string`	Customizes the Google Pay wallet button type. This value must be accepted by the Google Pay API.
`componentOptions.remember_me.acceptedCardSchemes`	`array`	The list of accepted card schemes in payments with Remember Me enabled. This value can be one of: `american_express` `cartes_bancaires` `china_union_pay` `diners_club_international` `discover` `jcb` `mada` `mastercard` `visa` This list overrides `componentOptions.flow.acceptedCardSchemes`.
`environment`	`string`	Sets the environment that the library should point and send requests to.
`locale`	`string`	Sets the customer's locale.
`paymentSession`	`object`	The response from the `PaymentSession`.
`publicKey`	`string`	Your public API key.
`translations`	`object`	Customizes text translations for natively supported languages, or adds custom text for locales and languages that are not natively supported.


1const checkout = await CheckoutWebComponents({
2  appearance,
3  componentOptions: {
4    flow: {
5      expandFirstPaymentMethod: false,
6    },
7    card: {
8      displayCardholderName: 'bottom',
9      data: {
10        cardholderName: 'Jia Tsang',
11      },
12    },
13  }
14  environment: 'sandbox',
15  locale: 'en',
16  paymentSession,
17  publicKey: 'pk_01234',
18  translations,
19});

Initializes a FlowComponent instance.

Parameter Type Description

Parameter	Type	Description
`name`	`string`	The name of the `FlowComponent` instance. This can be one of: `alipay_cn` `alipay_hk` `alma` `applepay` `bancontact` `benefit` `card` `dana` `eps` `gcash` `googlepay` `ideal` `kakaopay` `klarna` `knet` `mbway` `mobilepay` `multibanco` `p24` `paypal` `plaid` `qpay` `sepa` `stcpay` `tabby` `tamara` `tng` `truemoney` `vipps`
`options`	`object`	The event callbacks for the `FlowComponent`.
`options.showPayButton`	`bool`	Specifies whether to display the payment button in the UI. If you want to handle payment button rendering and interactions outside of Flow, set this to `false`. This overrides the global `componentOptions.flow.showPayButton` option you specify in the `CheckoutWebComponent` initialization.

name

string

The name of the FlowComponent instance. This can be one of:

alipay_cn
alipay_hk
alma
applepay
bancontact
benefit
card
dana
eps
gcash
googlepay
ideal
kakaopay
klarna
knet
mbway
mobilepay
multibanco
p24
paypal
plaid
qpay
sepa
stcpay
tabby
tamara
tng
truemoney
vipps

options

object

The event callbacks for the FlowComponent.

options.showPayButton

bool

Specifies whether to display the payment button in the UI.

If you want to handle payment button rendering and interactions outside of Flow, set this to false.

This overrides the global componentOptions.flow.showPayButton option you specify in the CheckoutWebComponent initialization.


1const flowComponent = checkout.create('flow', {
2  showPayButton: false,
3});

Updates a FlowComponent instance.

Changes you apply using this method only affect the client-side Flow integration. To update the server-side payment session with the changes you've made, use the handleSubmit callback.

Parameter Type Description

Parameter	Type	Description
`updateDetails`	`object`	An object containing the values to update.
`updateDetails.amount`	`number`	The new payment amount, in the minor currency unit. The value must be greater than zero.

updateDetails

object

An object containing the values to update.

updateDetails.amount

number

The new payment amount, in the minor currency unit.

The value must be greater than zero.


1const checkout = await CheckoutWebComponents({
2  handleSubmit: async (component, submitData) => {
3    // This callback is required to use the update method
4  }
5});
6
7await checkout.update({
8  amount: 2500
9});

CheckoutWebComponents

Initialization

Methods

create(name, options)

update(updateDetails)