Create Drop-in Element
createElement('dropIn', options?)
Use this function to create an instance of an individual Element.
Parameters
The type of element you are creating.
Options for creating dropIn Element.
Returns
DropInElement | null
TypeScript1import { createElement } from '@airwallex/components-sdk';2const element = createElement('dropIn', {3 intent_id: 'replace-with-your-intent-id',4 client_secret: 'replace-with-your-client-secret',5 currency: 'replace-with-your-intent-currency',6});
DropInElementOptions
Apply to dropIn element type integration, interface used when createElement called with type dropIn
The client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.
The three-letter ISO currency code representing the currency of the Payment Intent or Payment Consent.
One or more card networks that you support.
The layout of each element stays consistent, but you can modify confirm button, inputs, and more.
Checkout configuration options for Apple Pay.
The container of the authentication form used in 3D Secure authentication.
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 pre_auth is 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.
Billing information provided by the merchant. This option overrides the billing information from the shopper as provided in the input billing fields. Do not set withBilling and requiredBillingContactFields when you use this option.
The two-letter ISO country code of the shopper's country. This is required for bank_transfer, online_banking, skrill or seven_eleven payment methods.
The ID of the Customer used in registered user checkout. Refer to Airwallex Client APIAPI This field is required when mode is 'recurring'.
Whether you require the shopper to provide CVC when they checkout with a network tokenized card.
Checkout configuration options for Google Pay.
The ID of the Payment Intent you would like to checkout. Required when mode is 'payment'.
The payment methods your website would like to integrate with.
The checkout mode for the shopper, 'payment' or 'recurring'. Default value is 'payment'.
When using Payments for Platforms, specify the ID of the connected account associated with the payment if you want to use its information to process the payment. For example, the statement descriptor displayed on the shopper's credit card or bank statement and the payment methods activated by the connected account.
Options for recurring flow.
The billing information that you require from the user in order to process the transaction.
The shopper's email address.
The shopper's full name.
The shopper's phone number.
Customize DropIn Element style.
The options for Wechat Pay.
The payment methods your website would like to integrate with
Indicate to improve 3DS experience, indicate if the payment form will collect billing info from shopper
DropInElement
Element functions can be used in your integration flow with Airwallex element.
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 methods: ['card'],3}, {4 locale: 'en',5});