Create Card Element
createElement('card', options?)
Use this function to create an instance of an individual Element.
Parameters
The type of element you are creating.
Options for creating card Element.
Returns
CardElement | nullcreateElement('card', options?)
1import { createElement } from '@airwallex/components-sdk';2const element = await createElement('card');
CardElementOptions
Applies to card element type integration, the interface used when createElement() is called with type card.
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 Element input is disabled or not. Default value is false.
Style for the card element.
CardElement
Functions and external fields can be used in your integration flow with Airwallex Payment Elements.
confirm(data)
Using this function to confirm payment intent Confirms the Payment Intent. Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.
Parameters
Payment method request payload
Returns
Promise
<>confirm(data)
1element.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.
Parameters
Payment consent request payload
Returns
Promise<>createPaymentConsent(data)
1element.createPaymentConsent({2 client_secret: 'replace-with-your-client-secret',3});
mount(domElement)
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(eventCode, handler)
1element.on('submit', () => {2 // Handle submit event3});
unmount()
1element.unmount();
update(options?, initOptions?)
Using this function to update the element option after create the element
Returns
voidupdate(options?, initOptions?)
1element.update({autoCapture: true});
verifyConsent(data)
Using this function to verify consent
Parameters
Verify consent request payload
Returns
Promise<boolean | >verifyConsent(data)
1element.verifyConsent({2 client_secret: 'replace-with-your-client-secret',3 currency: 'replace-with-your-currency',4});