Create Card Number Element
createElement('cardNumber', options?)
Use this function to create an instance of an individual Element.
Parameters
The type of element you are creating.
Options for creating cardNumber Element.
Returns
CardNumberElement | null
TypeScript1import { createElement } from '@airwallex/components-sdk';2const element = await createElement('cardNumber');
CardNumberElementOptions
Applies to split card element type integration, the interface used when createElement() called with type cardNumber
One or more card networks that you support.
The container id 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 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.
Whether the cardNumber Element input is disabled or not. Default value is false.
The Payment Intent you would like to checkout. Refer to Airwallex Client APIAPI
A short hint to suggest the expected value of an input field to the shopper.
Style for the cardNumber Element.
CardNumberElement
Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
confirm(data)
Call this function when the shopper is ready to make a payment as per the details in the Payment Intent. Confirms the Payment Intent.
Returns
Promise
<>TypeScript1element.confirm({2 client_secret: 'replace-with-your-client-secret',3});
createPaymentConsent(data)
Call this function to create a Payment Consent, which represents the agreement between the merchant and shopper of making subsequent payments using the provided payment method.
Returns
Promise<>TypeScript1element.createPaymentConsent({2 client_secret: 'replace-with-your-client-secret',3});
createPaymentMethod(data)
Using this function to create a payment method for future payments. The created payment method can be saved in your system.
Parameters
Payment method request payload
Returns
Promise<>TypeScript1element.createPaymentMethod({2 client_secret: 'replace-with-your-client-secret',3 customer_id: 'replace-with-your-customer-id',4 payment_method: {5 card: {6 name: 'John Doe',7 },8 },9});
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);
on(eventCode, handler)
Listen to Element events.
Parameters
The event code to listen for.
The callback function that will be called when the event occurs.
Returns
voidTypeScript1element.on('change', (e) => {2 const { completed, empty, error } = e.detail;3 // Handle change event4});
TypeScript1element.unmount();
update(options?, initOptions?)
Call this function to update Element options after creating the Element.
Returns
voidTypeScript1element.update({2 autoCapture: false,3});
TypeScript1element.verifyConsent({2 client_secret: 'replace-with-your-client-secret',3 currency: 'replace-with-your-currency',4});