Create Google Pay Button Element
createElement('googlePayButton', options?)
Use this function to create an instance of an individual Element.
Parameters
The type of element you are creating.
Options for creating googlePayButton Element.
Returns
GooglePayButtonElement | null1import { createElement } from '@airwallex/components-sdk';2const element = createElement('googlePayButton', {3 intent_id: 'replace-with-your-intent-id',4 client_secret: 'replace-with-your-client-secret',5 amount: {6 value: 'replace-with-your-intent-amount',7 currency: 'replace-with-your-intent-currency',8 },9 countryCode: 'replace-with-your-country-code',10});
GooglePayButtonElementOptions
Applies to googlePayButton element type integration, the interface used when createElement() is called with type googlePayButton.
Indicate 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'}.
The two-letter ISO-3166 country code.
Whether a credit card may be used for this transaction. Default value is true.
Whether a prepaid card may be used for this transaction. Default value is true.
Allowed authentication methods. Default value is ['PAN_ONLY', 'CRYPTOGRAM_3DS'].
One or more card networks that you support.
The layout of each element stays consistent, but you can modify width, height, and more.
Set to true if you need information about the validation performed on the returned payment data. Default value is false.
The container id of the authentication form used in 3D Secure authentication.
The 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. Default value is 'final_auth'.
Whether 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. Default value is true.
Optional billing address parameters for the returned billing address.
Whether a billing address is required from the shopper. Default value is false.
Specifies the button color of the Google Pay button. Default value is 'default'.
Determines how the button's size should change relative to the button's parent element. Default value is 'static'.
Specifies the text to be displayed within the Google Pay button.
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).
The options for checkout.
The 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.
The ID of the Customer used in registered user checkout. Refer to Airwallex Client APIAPI This field is required when mode is 'recurring'.
Description of a cart item.
Whether the shopper must provide their email. Default value is false.
Error 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.
The ID of the Payment Intent you would like to checkout. Refer to Airwallex Client APIAPI
Detailed information about the merchant.
Merchant name encoded as UTF-8.
Defines callback methods for handling changed payment data and payment authorized events.
Optional shipping address parameters for the returned shipping address.
Whether a shipping address is required from the shopper. Default value is false.
Parameters for shipping option that can be used in this request. Note: This field is currently for web only.
Whether a shipping option is required from the shopper.
Note: This field is currently for web only.
Box style and 3ds popUp style for the GooglePayButton Element.
Total 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.
The status of the total price. If it is a variable subscription, the status should be NOT_CURRENTLY_KNOWN.
Options:
'NOT_CURRENTLY_KNOWN': The total price is not known currently.
'ESTIMATED': The total price provided is an estimated price. The final price may change depending on the shipping address or billing address, if requested.
'FINAL': The total price is the final total price of the transaction, and will not change based on selections made by the shopper.
Correlation 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.
GooglePayButtonElement
Element functions can be used in your integration flow with Airwallex element.
1element.confirmIntent({2 client_secret: 'replace-with-your-client-secret',3});
createPaymentConsent(data)
Using this function to create payment consent.
Returns
Promise<undefined | >1element.createPaymentConsent({2 client_secret: 'replace-with-your-client-secret',3});
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);
1element.on('success', () => {2 // Handle success event3});
1element.unmount();
update(options?, initOptions?)
Using this function to update the element option after create the element.
Returns
void1element.update({2 autoCapture: true,3}, {4 locale: 'en',5});