Google Pay Button Element
createElement('googlePayButton', options?)
Parameters
type
required'googlePayButton'options
optionalGooglePayButtonOptionsgooglePayButton Element.amount
requiredAmountIndicate the amount and currency of the Payment Intent.
If the mode is set to 'recurring' and intent_id omitted, amount should be {value: '0', currency: 'Replace with payment currency'}.
currency
requiredstringvalue
requirednumbercountryCode
requiredstringallowCreditCards
optionalbooleantrueallowedAuthMethods
optionalCardAuthMethod[]['PAN_ONLY', 'CRYPTOGRAM_3DS']allowedCardNetworks
optional('MASTERCARD' | 'MAESTRO' | 'VISA' | 'AMEX' | 'DISCOVER' | 'JCB')[]allowPrepaidCards
optionalbooleantrueappearance
optionalGooglePayButtonAppearancerules
optionalGooglePayButtonCssSelector.GooglePayButton
optionalCSSProperties.GooglePayButton:hover
optionalCSSPropertiesassuranceDetailsRequired
optionalbooleantrue if you need information about the validation performed on the returned payment data.falseauthFormContainer
optionalstringThe authorization type for the card payment. Options include: "pre_auth", "final_auth".
Set it to "pre_auth" if you want to place a hold on your customer's card for more than 7 days, i.e., extend the authorization time window. Currently it's only available when the card brand is Visa or Mastercard.
autoCapture will be automatically set to false if you enable pre_auth.
'final_auth'autoCapture
optionalbooleanWhether the amount should be captured automatically upon successful payment authorization.
Set it to false if you want to place a hold on the payment method and capture the funds sometime later.
truebillingAddressParameters
optionalBillingAddressParametersbillingAddressRequired
optionalbooleanfalse'default'default
black
white
Determines how the button's size should change relative to the button's parent element.
'static'static
fill
book
buy
checkout
donate
order
pay
plain
subscribe
long
short
callbackIntents
optionalCallbackIntent[]List of callbacks that the developer intents to handle.
Upon selection by the shopper, these intents can be used to update the
request with new data based on that selection (For exmaple, if a shipping
option is selected, the developer could update the transactionInfo
with new totalPrice and diplayItems).
checkoutOption
optionalCheckoutOptionclient_secret
optionalstringThe client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.
Leave it empty if intent_id and customer_id are not provided.
customer_id
optionalstringThe ID of the Customer used in registered user checkout. Refer to Airwallex Client API
This field is required when mode is 'recurring'.
displayItems
optionalDisplayItem[]emailRequired
optionalbooleanfalseerror
optionalPaymentDataErrorError displayed to the shopper for erroneous payment data. For example, you can update error when user selects the wrong shipping option. Note: This field is currently available for web only.
existingPaymentMethodRequired
optionalbooleanfalsegatewayMerchantId
optionalstringintent_id
optionalstringThe ID of the Payment Intent you would like to checkout. Refer to Airwallex Client API
merchantInfo
optionalobjectmerchantName
optionalstringmode
optional'payment' | 'recurring'offerInfo
optionalOfferInfoOffers available for redemption that can be used with the current order.
offers
requiredOfferDetail[]description
requiredstringDescription for the offer visible to the user to inform them about the offer. The description is displayed in buyflow and should be less than 60 characters long.
redemptionCode
requiredstringRedemption code available for this transaction. This is used to identify the offer when the user decides to apply the offer.
payment_consent
optionalPaymentConsentOptionsnext_triggered_by
required'merchant' | 'customer'merchant_trigger_reason
optional'scheduled' | 'unscheduled' | 'installments''unscheduled'terms_of_use
optionalTermsOfUsepayment_amount_type
required'FIXED' | 'VARIABLE'payment_currency
requiredstringstart_date
requiredstringbilling_cycle_charge_day
optionalnumberThe granularity per billing cycle. Required when payment_schedule.period_unit is WEEK, MONTH, or YEAR.
end_date
optionalstringfirst_payment_amount
optionalnumberThe first payment. It could include the costs associated with the first debited amount. Optional if payment_amount_type is VARIABLE.
fixed_payment_amount
optionalnumberThe fixed payment amount that can be charged for a single payment. Required if payment_amount_type is FIXED.
max_payment_amount
optionalnumberThe maximum payment amount that can be charged for a single payment. Optional if payment_amount_type is VARIABLE.
payment_schedule
optionalobjectperiod
requirednumberThe number of period units between billing cycles. For example, the payment cycle is one month if period=1 and period_unit=MONTH. Required when merchant_trigger_reason = scheduled.
period_unit
required'DAY' | 'WEEK' | 'MONTH' | 'YEAR'Specifies billing frequency. One of DAY, WEEK, MONTH, and YEAR. Required when merchant_trigger_reason = scheduled.
total_billing_cycles
optionalnumberThe total number of billing cycles of the payment schedule. If null, the mandate will continue indefinitely.
paymentDataCallbacks
optionalPaymentDataCallbacksDefines callback methods for handling changed payment data and payment authorized events.
shippingAddressParameters
optionalShippingAddressParametersallowedCountryCodes
optionalstring[]Allowed country codes for the shipping address.
This list should be an array of ISO 3166-1 alpha-2 country codes
(e.g., ["US", "CA", "JP"]).
If omitted, a shipping address from any supported country may be returned.
phoneNumberRequired
optionalbooleanWhether a phone number is additionally required from the buyer for the shipping address (the phone number will only be returned if an address is required, otherwise this field has no effect).
If omitted, defaults to false.
shippingAddressRequired
optionalbooleanfalseshippingOptionParameters
optionalShippingOptionParametersParameters for shipping option that can be used in this request. Note: This field is currently for web only.
shippingOptions
requiredSelectionOption[]All the shipping options available for the current request. Will be rendered in the UI with given order.
This field is required.
id
requiredstringA unique identifier for the option.
This field is required.
label
requiredstringThe label to be displayed as the option.
This field is required.
description
optionalstringA descriptive text that will be displayed below option label.
This field is optional.
defaultSelectedOptionId
optionalstringIdentifier to the default selected shipping option. If this field is not provided the first option will be the default option.
This field is optional.
shippingOptionRequired
optionalbooleanWhether a shipping option is required from the shopper.
Note: This field is currently for web only.
falsestyle
optionalCSSProperties & PopUpStyletotalPriceLabel
optionalstringTotal price label of this transaction. The string will be shown as the total price label on the cart modal dialog page. This field is optional, but required if developer wants to show cart information. Otherwise the cart modal dialog will not be rendered.
totalPriceStatus
optionalenumThe status of the total price. If it is a variable subscription, the status should be NOT_CURRENTLY_KNOWN.
'FINAL'NOT_CURRENTLY_KNOWN
ESTIMATED
FINAL
transactionId
optionalstringCorrelation ID to refer to this transaction.
This field is optional. It is generated by the merchant and used to reference this transaction later, such as for debugging issues when communicating with Google.
Returns
GooglePayButtonElement | null
1import { init, createElement } from '@airwallex/components-sdk';23await init({4 env: 'prod',5 enabledElements: ['payments'],6});78const element = await createElement('googlePayButton', {9 intent_id: 'replace-with-your-intent-id',10 client_secret: 'replace-with-your-client-secret',11 amount: {12 value: 'replace-with-your-intent-amount',13 currency: 'replace-with-your-intent-currency',14 },15 countryCode: 'replace-with-your-country-code',16});1718element.mount('googlepay-container');
confirmIntent(data)
Parameters
data
requiredConfirmIntentDataclient_secret
requiredstringclient_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.payment_consent
optionalPaymentConsentOptionsnext_triggered_by
required'merchant' | 'customer'merchant_trigger_reason
optional'scheduled' | 'unscheduled' | 'installments''unscheduled'terms_of_use
optionalTermsOfUsepayment_amount_type
required'FIXED' | 'VARIABLE'payment_currency
requiredstringstart_date
requiredstringbilling_cycle_charge_day
optionalnumberThe granularity per billing cycle. Required when payment_schedule.period_unit is WEEK, MONTH, or YEAR.
end_date
optionalstringfirst_payment_amount
optionalnumberThe first payment. It could include the costs associated with the first debited amount. Optional if payment_amount_type is VARIABLE.
fixed_payment_amount
optionalnumberThe fixed payment amount that can be charged for a single payment. Required if payment_amount_type is FIXED.
max_payment_amount
optionalnumberThe maximum payment amount that can be charged for a single payment. Optional if payment_amount_type is VARIABLE.
payment_schedule
optionalobjectperiod
requirednumberThe number of period units between billing cycles. For example, the payment cycle is one month if period=1 and period_unit=MONTH. Required when merchant_trigger_reason = scheduled.
period_unit
required'DAY' | 'WEEK' | 'MONTH' | 'YEAR'Specifies billing frequency. One of DAY, WEEK, MONTH, and YEAR. Required when merchant_trigger_reason = scheduled.
total_billing_cycles
optionalnumberThe total number of billing cycles of the payment schedule. If null, the mandate will continue indefinitely.
Returns
Promise<Intent>
Intent
requiredobjectid
requiredstringamount
optionalnumberclient_secret
optionalstringclient_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.created_at
optionalstringcurrency
optionalstringcustomer_id
optionalstringcustomer_payment_consents
optionalobjectid
requiredstringnext_triggered_by
required'merchant' | 'customer'payment_method
requiredobjecttype
required'card' | 'ach_direct_debit' | 'becs_direct_debit'ach_direct_debit
optionalobjectaba_routing_number
requiredstringaccount_number
requiredstringowner_email
requiredstringowner_name
requiredstringbecs_direct_debit
optionalobjectaccount_number
requiredstringbsb_number
requiredstringowner_email
requiredstringowner_name
requiredstringcard
optionalobjectbin
requiredstringbrand
requiredstringfingerprint
requiredstringlast4
requiredstringnumber_type
required'AIRWALLEX_NETWORK_TOKEN' | 'EXTERNAL_NETWORK_TOKEN' | 'PAN'id
optionalstringstatus
required'PENDING_VERIFICATION' | 'VERIFIED' | 'DISABLED'customer_payment_methods
optionalobjectid
requiredstringcard
optionalobjectbin
requiredstringbrand
requiredstringfingerprint
requiredstringlast4
requiredstringnumber_type
required'AIRWALLEX_NETWORK_TOKEN' | 'EXTERNAL_NETWORK_TOKEN' | 'PAN'merchant_order_id
optionalstringpayment_consent_id
optionalstringrequest_id
optionalstringstatus
optionalstringupdated_at
optionalstring1element.confirmIntent({2 client_secret: 'replace-with-your-client-secret',3});
createPaymentConsent(data)
Parameters
data
requiredParameterObjectclient_secret
requiredstringclient_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.Returns
Promise<Consent | undefined>
Consent
requiredobjectclient_secret
requiredstringclient_secret returned when creating a Payment Consent.created_at
requiredstringcustomer_id
requiredstringid
requiredstringnext_triggered_by
required'merchant' | 'customer'merchant or customer should trigger subsequent payments.status
required'PENDING_VERIFICATION' | 'VERIFIED' | 'DISABLED'updated_at
requiredstringinitial_payment_intent_id
optionalstringmerchant_trigger_reason
optional'scheduled' | 'unscheduled''scheduled' or 'unscheduled'. Only applicable when next_triggered_by is 'merchant'.'unscheduled'1element.createPaymentConsent({2 client_secret: 'replace-with-your-client-secret',3});
destroy()
1element.destroy();
mount(domElement)
Parameters
domElement
requiredstring | HTMLElementReturns
HTMLElement | null
1// There are two ways to mount the element:2// 1. Call with the container DOM id3element.mount('container-dom-id');45// 2. Find the created DOM in the existing HTML and call with the container DOM element6const containerElement = document.getElementById('container-dom-id');7element.mount(containerElement);
on('ready', handler)
Parameters
type
required'ready'handler
required() => void1element.on('ready', () => {2 console.log('Google Pay button is ready');3 });
on('success', handler)
Parameters
type
required'success'handler
requiredfunctionThe callback function that will be called when the event occurs.
The handler receives an object with the following properties:
detail
requiredobjectconsent
optionalConsentclient_secret
requiredstringclient_secret returned when creating a Payment Consent.created_at
requiredstringcustomer_id
requiredstringid
requiredstringnext_triggered_by
required'merchant' | 'customer'merchant or customer should trigger subsequent payments.status
required'PENDING_VERIFICATION' | 'VERIFIED' | 'DISABLED'updated_at
requiredstringinitial_payment_intent_id
optionalstringmerchant_trigger_reason
optional'scheduled' | 'unscheduled''scheduled' or 'unscheduled'. Only applicable when next_triggered_by is 'merchant'.'unscheduled'intent
optionalIntentid
requiredstringamount
optionalnumberclient_secret
optionalstringclient_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.created_at
optionalstringcurrency
optionalstringcustomer_id
optionalstringcustomer_payment_consents
optionalobjectid
requiredstringnext_triggered_by
required'merchant' | 'customer'payment_method
requiredobjecttype
required'card' | 'ach_direct_debit' | 'becs_direct_debit'ach_direct_debit
optionalobjectaba_routing_number
requiredstringaccount_number
requiredstringowner_email
requiredstringowner_name
requiredstringbecs_direct_debit
optionalobjectaccount_number
requiredstringbsb_number
requiredstringowner_email
requiredstringowner_name
requiredstringcard
optionalobjectbin
requiredstringbrand
requiredstringfingerprint
requiredstringlast4
requiredstringnumber_type
required'AIRWALLEX_NETWORK_TOKEN' | 'EXTERNAL_NETWORK_TOKEN' | 'PAN'id
optionalstringstatus
required'PENDING_VERIFICATION' | 'VERIFIED' | 'DISABLED'customer_payment_methods
optionalobjectid
requiredstringcard
optionalobjectbin
requiredstringbrand
requiredstringfingerprint
requiredstringlast4
requiredstringnumber_type
required'AIRWALLEX_NETWORK_TOKEN' | 'EXTERNAL_NETWORK_TOKEN' | 'PAN'merchant_order_id
optionalstringpayment_consent_id
optionalstringrequest_id
optionalstringstatus
optionalstringupdated_at
optionalstring1element.on('success', (e) => {2 const { intent, consent } = e.detail;3 console.log('Payment is successful', { intent, consent });4 });
on('error', handler)
Parameters
type
required'error'handler
requiredfunctionThe callback function that will be called when the event occurs.
The handler receives an object with the following properties:
detail
requiredobjecterror
requiredobjectcode
requiredstringdetails
optionalRecord<string, unknown>message
optionalstring1element.on('error', (e) => {2 const { error } = e.detail;3 console.error('There is an error', error);4 });
on('cancel', handler)
Parameters
type
required'cancel'handler
required() => void1element.on('cancel', () => {2 console.log('Payment cancelled');3 });
on('shippingMethodChange', handler)
Parameters
type
required'shippingMethodChange'handler
requiredfunctionThe callback function that will be called when the event occurs.
The handler receives an object with the following properties:
detail
requiredobjectintermediatePaymentData
requiredgoogle.payments.api.IntermediatePaymentDatacallbackTrigger
requiredenumOFFER
SHIPPING_ADDRESS
SHIPPING_OPTION
INITIALIZE
IntermediatePaymentData]] if applicable. Note that this callback trigger may be triggered multiple times along a single call to loadPaymentData, so you must make sure you can handle multiple calls to it. For example, when the user changes accounts, we will call initialize again with data from the new account.paymentMethodData
requiredIntermediatePaymentMethodDatatype
requiredenumgooglepay
applepay
card
airwallex_pay
alipaycn
alipayhk
gcash
dana
kakaopay
tng
rabbit_line_pay
poli
fpx
online_banking
bank_transfer
permatanet
alfamart
indomaret
doku_ewallet
enets
payeasy
seven_eleven
konbini
tesco_lotus
grabpay
skrill
eps
giropay
ideal
multibanco
p24
sofort
trustly
bancontact
dragonpay
blik
mybank
paybybankapp
verkkopankki
maxima
narvesen
paypost
perlas_terminals
paysafecash
paysafecard
paysera
satispay
family_mart
hi_life
sam_kiosk
axs_kiosk
bigc
esun
permata_atm
boost
shopee_pay
paypal
payu
ovo
bitpay
truemoney
atome
duit_now
pay_now
prompt_pay
go_pay
linkaja
jenius_pay
klarna
wero
korean_local_card
naver_pay
payco
samsung_pay
au_pay
bkash
d_barai
line_pay
merpay
payeasy_atm
paypay
rakuten_pay
safetypay
toss_pay
upi
zip
spei
afterpay
cash_app_pay
twint
laybuy
venmo
payme
tabby
octopus
spaylater
wechatpay
fps
pix
jkopay
ach_direct_debit
bacs_direct_debit
becs_direct_debit
sepa_direct_debit
eft_direct_debit
info
optionalIntermediateCardInfoPayment method information.
The definition of this field depends
on which payment method type was set in
[[PaymentMethodData.type|PaymentMethodData.type]].
- For [[PaymentMethodType|
PaymentMethodType.CARD]], this field will be an object conforming to [[IntermediateCardInfo|IntermediateCardInfo]].
cardNetwork
required'visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover'The card network.
This card network value should not be displayed to
the buyer, but can be used when the details of a buyer's card are
needed. An example would be for customer support to help the buyer
identify the card used for this transaction. For a user-visible
description, use
[[PaymentMethodData.description|PaymentMethodData.description]]
instead.
offerData
optionalOfferDataredemptionCodes
requiredstring[]shippingAddress
optionalIntermediateAddressadministrativeArea
requiredstringcountryCode
requiredstringlocality
requiredstringpostalCode
requiredstringThe postal code (also known in some places as ZIP code).
Note: some regions do not have postal codes. In those cases this field will be set to an empty string.
Also note: The returned postal code may vary based on the user's geographic region. For Canada and United Kingdom, this contains only the first three characters. For US, the this contain the first five digits.
shippingOptionData
optionalSelectionOptionDataid
requiredstringUnique identifier of a [[SelectionOption|SelectionOption]].
Must match with [[SelectionOption.id|SelectionOption.id]]
field.
1element.on('shippingMethodChange', (e) => {2 const { intermediatePaymentData } = e.detail;3 console.log('Shipping method changed', intermediatePaymentData);4 });
on('shippingAddressChange', handler)
Parameters
type
required'shippingAddressChange'handler
requiredfunctionThe callback function that will be called when the event occurs.
The handler receives an object with the following properties:
detail
requiredobjectintermediatePaymentData
requiredgoogle.payments.api.IntermediatePaymentDatacallbackTrigger
requiredenumOFFER
SHIPPING_ADDRESS
SHIPPING_OPTION
INITIALIZE
IntermediatePaymentData]] if applicable. Note that this callback trigger may be triggered multiple times along a single call to loadPaymentData, so you must make sure you can handle multiple calls to it. For example, when the user changes accounts, we will call initialize again with data from the new account.paymentMethodData
requiredIntermediatePaymentMethodDatatype
requiredenumgooglepay
applepay
card
airwallex_pay
alipaycn
alipayhk
gcash
dana
kakaopay
tng
rabbit_line_pay
poli
fpx
online_banking
bank_transfer
permatanet
alfamart
indomaret
doku_ewallet
enets
payeasy
seven_eleven
konbini
tesco_lotus
grabpay
skrill
eps
giropay
ideal
multibanco
p24
sofort
trustly
bancontact
dragonpay
blik
mybank
paybybankapp
verkkopankki
maxima
narvesen
paypost
perlas_terminals
paysafecash
paysafecard
paysera
satispay
family_mart
hi_life
sam_kiosk
axs_kiosk
bigc
esun
permata_atm
boost
shopee_pay
paypal
payu
ovo
bitpay
truemoney
atome
duit_now
pay_now
prompt_pay
go_pay
linkaja
jenius_pay
klarna
wero
korean_local_card
naver_pay
payco
samsung_pay
au_pay
bkash
d_barai
line_pay
merpay
payeasy_atm
paypay
rakuten_pay
safetypay
toss_pay
upi
zip
spei
afterpay
cash_app_pay
twint
laybuy
venmo
payme
tabby
octopus
spaylater
wechatpay
fps
pix
jkopay
ach_direct_debit
bacs_direct_debit
becs_direct_debit
sepa_direct_debit
eft_direct_debit
info
optionalIntermediateCardInfoPayment method information.
The definition of this field depends
on which payment method type was set in
[[PaymentMethodData.type|PaymentMethodData.type]].
- For [[PaymentMethodType|
PaymentMethodType.CARD]], this field will be an object conforming to [[IntermediateCardInfo|IntermediateCardInfo]].
cardNetwork
required'visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover'The card network.
This card network value should not be displayed to
the buyer, but can be used when the details of a buyer's card are
needed. An example would be for customer support to help the buyer
identify the card used for this transaction. For a user-visible
description, use
[[PaymentMethodData.description|PaymentMethodData.description]]
instead.
offerData
optionalOfferDataredemptionCodes
requiredstring[]shippingAddress
optionalIntermediateAddressadministrativeArea
requiredstringcountryCode
requiredstringlocality
requiredstringpostalCode
requiredstringThe postal code (also known in some places as ZIP code).
Note: some regions do not have postal codes. In those cases this field will be set to an empty string.
Also note: The returned postal code may vary based on the user's geographic region. For Canada and United Kingdom, this contains only the first three characters. For US, the this contain the first five digits.
shippingOptionData
optionalSelectionOptionDataid
requiredstringUnique identifier of a [[SelectionOption|SelectionOption]].
Must match with [[SelectionOption.id|SelectionOption.id]]
field.
1element.on('shippingAddressChange', (e) => {2 const { intermediatePaymentData } = e.detail;3 console.log('Shipping address changed', intermediatePaymentData);4 });
on('click', handler)
Parameters
type
required'click'handler
required() => void1element.on('click', () => {2 console.log('Google Pay button clicked');3 });
The callback function that will be called when the event occurs.
The handler receives an object with the following properties:
Major API version.
This value will match what was set in
[[PaymentDataRequest.apiVersion|PaymentDataRequest.apiVersion]].
Minor API version.
This value will match what was set in
[[PaymentDataRequest.apiVersionMinor|PaymentDataRequest.apiVersionMinor]].
The generated payment method token.
The contents of this token and how it should be used will depend on
the selected
[[PaymentMethodTokenizationSpecification.type|PaymentMethodTokenizationSpecification.type]].
The type of tokenization to be applied to the selected payment method.
This value will match the
[[PaymentMethodTokenizationSpecification.type|PaymentMethodTokenizationSpecification.type]]
specified in the request.
PAYMENT_GATEWAY
DIRECT
googlepay
applepay
card
airwallex_pay
alipaycn
alipayhk
gcash
dana
kakaopay
tng
rabbit_line_pay
poli
fpx
online_banking
bank_transfer
permatanet
alfamart
indomaret
doku_ewallet
enets
payeasy
seven_eleven
konbini
tesco_lotus
grabpay
skrill
eps
giropay
ideal
multibanco
p24
sofort
trustly
bancontact
dragonpay
blik
mybank
paybybankapp
verkkopankki
maxima
narvesen
paypost
perlas_terminals
paysafecash
paysafecard
paysera
satispay
family_mart
hi_life
sam_kiosk
axs_kiosk
bigc
esun
permata_atm
boost
shopee_pay
paypal
payu
ovo
bitpay
truemoney
atome
duit_now
pay_now
prompt_pay
go_pay
linkaja
jenius_pay
klarna
wero
korean_local_card
naver_pay
payco
samsung_pay
au_pay
bkash
d_barai
line_pay
merpay
payeasy_atm
paypay
rakuten_pay
safetypay
toss_pay
upi
zip
spei
afterpay
cash_app_pay
twint
laybuy
venmo
payme
tabby
octopus
spaylater
wechatpay
fps
pix
jkopay
ach_direct_debit
bacs_direct_debit
becs_direct_debit
sepa_direct_debit
eft_direct_debit
User-facing message to describe the payment method funding this transaction.
You are required to show this message to the buyer as confirmation of their funding source. Please refer to the documentation for more information.
IMPORTANT: Do not attempt to parse the contents of this string as
the format, contents, and length may change at any time. If you need
additional details, see
[[PaymentMethodData.info|PaymentMethodData.info]].
Payment method information.
The definition of this field depends
on which payment method type was set in
[[PaymentMethodData.type|PaymentMethodData.type]].
- For [[PaymentMethodType|
CARD]], this field will be an object conforming to [[CardInfo|CardInfo]].
The details about the card.
This value will be generally the last 4 digits of the card.
These details should not be displayed to the buyer,
but can be used when the details of a buyer's card are needed. An
example would be for customer support to help the buyer identify the
card used for this transaction. For a user-visible description, use
[[PaymentMethodData.description|PaymentMethodData.description]]
instead.
The card network.
This card network value should not be displayed to
the buyer, but can be used when the details of a buyer's card are
needed. An example would be for customer support to help the buyer
identify the card used for this transaction. For a user-visible
description, use
[[PaymentMethodData.description|PaymentMethodData.description]]
instead.
If true, indicates that identification and verifications (ID&V) was performed on the returned payment credential.
If false, the same risk-based authentication can be performed as you would for card transactions. This risk-based authentication can include, but not limited to, step-up with 3D Secure protocol if applicable.
The billing address associated with the card.
Note this billing address will only be populated when billing address
is set as required through
[[CardParameters.billingAddressRequired|CardParameters.billingAddressRequired]].
The postal code (also known in some places as ZIP code).
Note: some regions do not have postal codes. In those cases this field will be set to an empty string.
The first line of the address.
Will be set to empty string if the address does not have a first line.
The second line of the address.
Will be set to empty string if the address does not have a second line.
The third line of the address.
Will be set to empty string if the address does not have a third line.
The phone number.
This field will only be present if the caller requested that a phone number be returned.
The sorting code.
Note: some regions do not have sorting codes. In those cases this field will be set to an empty string.
The buyer's email.
This value will only be set if
[[PaymentDataRequest.emailRequired|PaymentDataRequest.emailRequired]]
was set to true.
Contains the data for the offer applied by the user. This will be populated if an offer is applied to the transaction.
The shipping address.
This object will only be returned if
[[PaymentDataRequest.shippingAddressRequired|PaymentDataRequest.shippingAddressRequired]]
was set to true.
The two-letter ISO country code of the shopper's country. https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
Unique identifier of a [[SelectionOption|SelectionOption]].
Must match with [[SelectionOption.id|SelectionOption.id]]
field.
1element.on('authorized', (e) => {2 const { paymentData } = e.detail;3 console.log('Payment authorized', paymentData);4 });
unmount()
1element.unmount();
update(options?, initOptions?)
Parameters
options
optionalGooglePayButtonElementOptionsallowCreditCards
optionalbooleantrueallowedAuthMethods
optionalCardAuthMethod[]['PAN_ONLY', 'CRYPTOGRAM_3DS']allowedCardNetworks
optional('MASTERCARD' | 'MAESTRO' | 'VISA' | 'AMEX' | 'DISCOVER' | 'JCB')[]allowPrepaidCards
optionalbooleantrueamount
optionalAmountIndicate the amount and currency of the Payment Intent.
If the mode is set to 'recurring' and intent_id omitted, amount should be {value: '0', currency: 'Replace with payment currency'}.
currency
requiredstringvalue
requirednumberappearance
optionalGooglePayButtonAppearancerules
optionalGooglePayButtonCssSelector.GooglePayButton
optionalCSSProperties.GooglePayButton:hover
optionalCSSPropertiesassuranceDetailsRequired
optionalbooleantrue if you need information about the validation performed on the returned payment data.falseauthFormContainer
optionalstringThe authorization type for the card payment. Options include: "pre_auth", "final_auth".
Set it to "pre_auth" if you want to place a hold on your customer's card for more than 7 days, i.e., extend the authorization time window. Currently it's only available when the card brand is Visa or Mastercard.
autoCapture will be automatically set to false if you enable pre_auth.
'final_auth'autoCapture
optionalbooleanWhether the amount should be captured automatically upon successful payment authorization.
Set it to false if you want to place a hold on the payment method and capture the funds sometime later.
truebillingAddressParameters
optionalBillingAddressParametersbillingAddressRequired
optionalbooleanfalse'default'default
black
white
Determines how the button's size should change relative to the button's parent element.
'static'static
fill
book
buy
checkout
donate
order
pay
plain
subscribe
long
short
callbackIntents
optionalCallbackIntent[]List of callbacks that the developer intents to handle.
Upon selection by the shopper, these intents can be used to update the
request with new data based on that selection (For exmaple, if a shipping
option is selected, the developer could update the transactionInfo
with new totalPrice and diplayItems).
checkoutOption
optionalCheckoutOptionclient_secret
optionalstringThe client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.
Leave it empty if intent_id and customer_id are not provided.
countryCode
optionalstringcustomer_id
optionalstringThe ID of the Customer used in registered user checkout. Refer to Airwallex Client API
This field is required when mode is 'recurring'.
displayItems
optionalDisplayItem[]emailRequired
optionalbooleanfalseerror
optionalPaymentDataErrorError displayed to the shopper for erroneous payment data. For example, you can update error when user selects the wrong shipping option. Note: This field is currently available for web only.
existingPaymentMethodRequired
optionalbooleanfalsegatewayMerchantId
optionalstringintent_id
optionalstringThe ID of the Payment Intent you would like to checkout. Refer to Airwallex Client API
merchantInfo
optionalobjectmerchantName
optionalstringmode
optional'payment' | 'recurring'offerInfo
optionalOfferInfoOffers available for redemption that can be used with the current order.
offers
requiredOfferDetail[]description
requiredstringDescription for the offer visible to the user to inform them about the offer. The description is displayed in buyflow and should be less than 60 characters long.
redemptionCode
requiredstringRedemption code available for this transaction. This is used to identify the offer when the user decides to apply the offer.
payment_consent
optionalPaymentConsentOptionsnext_triggered_by
required'merchant' | 'customer'merchant_trigger_reason
optional'scheduled' | 'unscheduled' | 'installments''unscheduled'terms_of_use
optionalTermsOfUsepayment_amount_type
required'FIXED' | 'VARIABLE'payment_currency
requiredstringstart_date
requiredstringbilling_cycle_charge_day
optionalnumberThe granularity per billing cycle. Required when payment_schedule.period_unit is WEEK, MONTH, or YEAR.
end_date
optionalstringfirst_payment_amount
optionalnumberThe first payment. It could include the costs associated with the first debited amount. Optional if payment_amount_type is VARIABLE.
fixed_payment_amount
optionalnumberThe fixed payment amount that can be charged for a single payment. Required if payment_amount_type is FIXED.
max_payment_amount
optionalnumberThe maximum payment amount that can be charged for a single payment. Optional if payment_amount_type is VARIABLE.
payment_schedule
optionalobjectperiod
requirednumberThe number of period units between billing cycles. For example, the payment cycle is one month if period=1 and period_unit=MONTH. Required when merchant_trigger_reason = scheduled.
period_unit
required'DAY' | 'WEEK' | 'MONTH' | 'YEAR'Specifies billing frequency. One of DAY, WEEK, MONTH, and YEAR. Required when merchant_trigger_reason = scheduled.
total_billing_cycles
optionalnumberThe total number of billing cycles of the payment schedule. If null, the mandate will continue indefinitely.
paymentDataCallbacks
optionalPaymentDataCallbacksDefines callback methods for handling changed payment data and payment authorized events.
shippingAddressParameters
optionalShippingAddressParametersallowedCountryCodes
optionalstring[]Allowed country codes for the shipping address.
This list should be an array of ISO 3166-1 alpha-2 country codes
(e.g., ["US", "CA", "JP"]).
If omitted, a shipping address from any supported country may be returned.
phoneNumberRequired
optionalbooleanWhether a phone number is additionally required from the buyer for the shipping address (the phone number will only be returned if an address is required, otherwise this field has no effect).
If omitted, defaults to false.
shippingAddressRequired
optionalbooleanfalseshippingOptionParameters
optionalShippingOptionParametersParameters for shipping option that can be used in this request. Note: This field is currently for web only.
shippingOptions
requiredSelectionOption[]All the shipping options available for the current request. Will be rendered in the UI with given order.
This field is required.
id
requiredstringA unique identifier for the option.
This field is required.
label
requiredstringThe label to be displayed as the option.
This field is required.
description
optionalstringA descriptive text that will be displayed below option label.
This field is optional.
defaultSelectedOptionId
optionalstringIdentifier to the default selected shipping option. If this field is not provided the first option will be the default option.
This field is optional.
shippingOptionRequired
optionalbooleanWhether a shipping option is required from the shopper.
Note: This field is currently for web only.
falsestyle
optionalCSSProperties & PopUpStyletotalPriceLabel
optionalstringTotal price label of this transaction. The string will be shown as the total price label on the cart modal dialog page. This field is optional, but required if developer wants to show cart information. Otherwise the cart modal dialog will not be rendered.
totalPriceStatus
optionalenumThe status of the total price. If it is a variable subscription, the status should be NOT_CURRENTLY_KNOWN.
'FINAL'NOT_CURRENTLY_KNOWN
ESTIMATED
FINAL
transactionId
optionalstringCorrelation ID to refer to this transaction.
This field is optional. It is generated by the merchant and used to reference this transaction later, such as for debugging issues when communicating with Google.
initOptions
optionalInitOptionsenv
optional'demo' | 'prod''prod'fonts
optionalFontOptions[]family
optionalstringThe font-family property, for example, AxLLCircular.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
src
optionalstringThe font-source property, for example, https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
weight
optionalstring | numberThe font-weight property. Supported font weights include: regular (400) and bold (700). https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
locale
optionalenumar
da
de
en
es
fi
fr
he
id
it
ja
ko
ms
nl
pl
pt
ro
ru
si
sv
tr
vi
ur
zh
zh-HK
origin
optionalstringDeprecated1element.update({2 autoCapture: true,3}, {4 locale: 'en',5});