Create Apple Pay Button Element
createElement('applePayButton', options?)
Use this function to create an instance of an individual Element.
Parameters
The type of element you are creating.
Options for creating applePayButton Element.
Returns
ApplePayButtonElement | null
TypeScript1import { createElement } from '@airwallex/components-sdk';2const element = createElement('applePayButton', {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});
ApplePayButtonElementOptions
Applies to applePayButton element type integration, the interface used when createElement() is called with type applePayButton.
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 merchant's two-letter ISO 3166 country code. For example, 'US'.
The layout of each element stays consistent, but you can modify width, height, and more.
Optional user-defined data.
The authorization type for the card payment.
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.
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.
Billing contact information for the shopper.
Indicate the color of the button. Default value is 'black'.
Supported methods for presenting the Apple Pay button.
A translated button label may appear if a language specified in the viewer's browser matches an available language
.
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 as you can provide it in the update() function later.
The ID of the Customer used in registered user checkout. Refer to Airwallex Client APIAPI
This field is required when mode is 'recurring'.
The ID of the Payment Intent you would like to checkout.
Required when mode is set to 'payment' but optional for 'recurring'.
Refer to Airwallex Client APIAPI
A set of line items that explain recurring payments and/or additional charges.
Payment capabilities supported by the merchant.
If not configured, merchantCapabilities will be based on merchant's account settings.
supports3DS: Required. This value must be supplied.
supportsCredit: Optional. If present, only transactions that are categorized as credit cards are allowed.
supportsDebit: Optional. If present, only transactions that are categorized as debit cards are allowed.
supportsEMV: Include this value only if you support China Union Pay transactions. (if supportedNetworks does not contain chinaUnionPay, don't include it).
The billing information that you require from the shopper in order to process the transaction.
The shipping information that you require from the shopper in order to fulfill the order.
Shipping contact information for the shopper.
A set of shipping method objects that describe the available shipping methods.
An optional value that indicates how purchased items are to be shipped.
Box style for the ApplePayButton Element.
A list of ISO 3166 country codes for limiting payments to cards from specific countries.
Card networks supported by the merchant.
If not configured, supportedNetworks will be based on merchant's account settings.
For more details, see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/1916122-supportednetworks
Provide a business name for the label field. Use the same business name that you want displayed for the charge on the shopper's bank or credit card statement. For example, "COMPANY, INC.".
Indicate whether a line item is final or pending.
If the mode is recurring and if it's a variable subscription, the value should be pending.
ApplePayButtonElement
Element functions can be used in your integration flow with Airwallex element.
TypeScript1element.completeValidation({2 epochTimestamp: 1721269728247,3 expiresAt: 1721273328247,4 merchantSessionIdentifier: 'SSH16075688527B4E',5 nonce: '9c283350',6 merchantIdentifier: '3409DA66CE0',7 domainName: 'your domain name',8 displayName: 'Sawayn, Conner and Quigley',9 signature: '308006092a86',10 operationalAnalyticsIdentifier: 'Carroll, Swaniawski',11 retries: 0,12 pspId: '803FB3E0FC',13});
TypeScript1element.confirmIntent({2 client_secret: intent?.client_secret,3});
createPaymentConsent(data)
Using this function to create payment consent.
Returns
Promise<undefined | >TypeScript1element.createPaymentConsent({2 client_secret: intent?.client_secret,3});
TypeScript1// 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);
TypeScript1element.on('success', () => {2 // Handle success event3});
TypeScript1element.unmount();
update(options?, initOptions?)
Using this function to update the element option after create the element.
Returns
voidTypeScript1element.update({2 buttonType: 'donate',3}, {4 locale: 'en',5});