CheckoutWebComponents

Last updated: April 16, 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. This value can be one of: `top` `bottom` `hidden`
`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.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` `multibanco` `p24` `paypal` `qpay` `sepa` `sofort` `stcpay` `tamara` `tng` `truemoney`
`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`.

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
multibanco
p24
paypal
qpay
sepa
sofort
stcpay
tamara
tng
truemoney

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.


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

CheckoutWebComponents

Initialization

Methods

create(name, options)