Airwallex JS
Airwallex logoAirwallex logo

Card Element

Copy for LLMView as Markdown
The Card Element is a single-line multi-input field that allows you to securely collect card details and submit these details to Airwallex to make a payment.

createElement('card', options?)

Use this function to create an instance of an individual Element.

Parameters

type

required'card'
The type of element you are creating.

options

optionalCardElementOptions
Options for creating card Element.

allowedCardNetworks

optional('visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover')[]
One or more card networks that you support.

authFormContainer

optionalstring
The container id of the authentication form used in 3D Secure authentication.

authorizationType

optional'pre_auth' | 'final_auth'

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: 'final_auth'

autoCapture

optionalboolean

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: true

disabled

optionalboolean
Whether the Element input is disabled or not.
Default: false

style

optionalInputStyle
Style for the card element.

Returns

CardElement | null

createElement('card', options?)

1import { init, createElement } from '@airwallex/components-sdk';
2

3await init({
4  env: 'prod',
5  enabledElements: ['payments'],
6});
7

8const element = await createElement('card', {
9  autoCapture: true, // Optional: Enable automatic capture
10});
11

12element.mount('card-container');

blur()

Using this function to blur the HTML Input element

blur()

1element.blur();

clear()

Using this function to clear the HTML Input element

clear()

1element.clear();

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

data

requiredPaymentMethodRequestData
Payment method request payload

client_secret

requiredstring
The client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.

customer_id

optionalstring

The ID of the Customer used in registered user checkout. Refer to Airwallex Client API This field is required when mode is 'recurring'.

error

optionalobject
Error information populated by the SDK when a prior createPaymentMethod() call fails. This field is read-only and should not be set by the merchant.

intent_id

optionalstring

The ID of the Payment Intent you would like to checkout. Required when mode is 'payment'. Refer to Airwallex Client API

payment_consent

optionalPaymentConsentOptions
The payment consent details.

payment_method

optionalPaymentMethodObjType
The payment method details returned by calling createPaymentMethod().

payment_method_id

optionalstring
The ID of a payment method if already exists. You can create a new payment method by calling createPaymentMethod().

payment_method_options

optionalPaymentMethodOptionsType
Additional configuration to confirm the Payment Intent. Only applies to card payments.

triggered_by

optional'customer'

This field is used to indicate whether the current payment is initiated by the cardholder. This field must be used only in combination with payment_method_id field and is applicable only for Cvc element. FYI : next_triggered_by is used to indicate the driver for subsequent payments in the series.

  • 'customer': The payment is initiated by the customer using the stored payment method details.

id

optionalstringDeprecated

The payment intent you would like to checkout Refer to Airwallex Client API

use intent_id instead

methodId

optionalstringDeprecated
The ID of a payment method if already exists. You can create a new payment method by calling createPaymentMethod().
use payment_method_id instead

Returns

Promise<Intent>

Intent

requiredobject

id

requiredstring
The ID of the Payment Intent.

amount

optionalnumber
Payment amount. This is the order amount you would like to charge your customer.

client_secret

optionalstring
The client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.

created_at

optionalstring
The time this Payment Intent was created, in ISO 8601 format.

currency

optionalstring
The three-letter ISO currency code representing the currency of the Payment Intent.

customer_id

optionalstring
The ID of the Customer who intends to pay for the Payment Intent.

customer_payment_consents

optionalobject

customer_payment_methods

optionalobject

merchant_order_id

optionalstring
The merchant's order ID for this payment.

payment_consent_id

optionalstring
The ID of the Payment Consent associated with this Payment Intent.

request_id

optionalstring
Unique request ID specified by the merchant.

status

optionalstring
The status of the Payment Intent (e.g. 'REQUIRES_PAYMENT_METHOD', 'SUCCEEDED').

updated_at

optionalstring
The time this Payment Intent was last updated, in ISO 8601 format.

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

data

requiredPaymentConsentRequestData
Payment consent request payload

client_secret

requiredstring
The client_secret of the Payment Intent when Payment Intent is provided. Otherwise, this should be the client_secret of the Customer object.

billing

optionalBilling
The billing info for the Payment Consent.

cardname

optionalstring
The cardholder name for this payment method.

connected_account_id

optionalstring

The ID of the connected account linked to the platform. The platform should indicate the connected entity in the transaction only when platform is the owner of the transaction.

currency

optionalstring
The currency of the Payment Consent. Required for card Element type.

customer_id

optionalstring
The ID of the Customer who intends to pay for the Payment Intent.

intent_id

optionalstring
The intent_id that would be confirmed with the new Payment Consent.

merchant_trigger_reason

optional'scheduled' | 'unscheduled'
Whether subsequent payments are 'scheduled' or 'unscheduled'. Only applicable when next_triggered_by is 'merchant'.
Default: 'unscheduled'

metadata

optionalRecord<string, unknown>
A set of key-value pairs that can be attached to this Payment Consent.

next_triggered_by

optional'merchant' | 'customer'
Whether the merchant or customer should trigger subsequent payments.
Default: 'customer'

payment_method_id

optionalstring
The ID of the payment method. Required when you want to create a Payment Consent with a saved payment method.

three_ds_action

optional'SKIP_3DS' | 'FORCE_3DS'

Set it to SKIP_3DS if you want to skip 3DS regardless of the risk score and Strong Customer Authentication (SCA) regulation. Only applicable when it's a card recurring flow. Set it to FORCE_3DS if you want to force 3DS regardless of the risk score and Strong Customer Authentication (SCA) regulation. Only applicable when it's a card recurring flow.

Returns

Promise<PaymentConsentResponse>

PaymentConsentResponse

requiredobject

customer_id

requiredstring
The ID of the Customer who intends to pay for the Payment Intent.

payment_consent_id

requiredstring
The ID of the new Payment Consent.

currency

optionalstring
The currency of the Payment Consent.

intent_id

optionalstring
Returns intent_id if merchant provides intent_id in createPaymentConsent(). Otherwise, Airwallex creates an initial Payment Intent and returns the intent_id.

payment_method

optionalobject
The payment method of the Payment Consent.

createPaymentConsent(data)

1element.createPaymentConsent({
2  client_secret: 'replace-with-your-client-secret',
3});

destroy()

Destroys the Element instance.

destroy()

1element.destroy();

focus()

Using this function to focus the HTML Input element

focus()

1element.focus();

mount(domElement)

Mounts Element to your HTML DOM.

Parameters

domElement

requiredstring | HTMLElement

Returns

HTMLElement | null

mount(domElement)

1// There are two ways to mount the element:
2// 1. Call with the container DOM id
3element.mount('container-dom-id');
4

5// 2. Find the created DOM in the existing HTML and call with the container DOM element
6const containerElement = document.getElementById('container-dom-id');
7element.mount(containerElement);

on('ready', handler)

This event will be fired when the element is mounted and ready to accept input.

Parameters

type

required'ready'
The event name.

handler

required() => void
The event handler

on('ready', handler)

1element.on('ready', () => {
2    console.log('Element is ready');
3  });

on('change', handler)

This event will be fired when the element's value changes, such as when the user types or deletes input.

Parameters

type

required'change'
The event name.

handler

requiredfunction

The event handler

The handler receives an object with the following properties:

detail

requiredobject

on('change', handler)

1element.on('change', (e) => {
2    const { completed, empty, error } = e.detail;
3    console.log('Form changed', { completed, empty, error });
4  });

on('focus', handler)

This event will be fired when the element gains focus.

Parameters

type

required'focus'
The event name.

handler

requiredfunction

The event handler

The handler receives an object with the following properties:

detail

requiredobject

on('focus', handler)

1element.on('focus', (e) => {
2    const { completed, empty, error } = e.detail;
3    console.log('Form focused', { completed, empty, error });
4  });

on('blur', handler)

This event will be fired when the element loses focus.

Parameters

type

required'blur'
The event name.

handler

requiredfunction

The event handler

The handler receives an object with the following properties:

detail

requiredobject

on('blur', handler)

1element.on('blur', (e) => {
2    const { completed, empty, error } = e.detail;
3    console.log('Form blurred', { completed, empty, error });
4  });

on('submit', handler)

This event will be fired when the user submits the form, for example by pressing Enter.

Parameters

type

required'submit'
The event name.

handler

required() => void
The event handler

on('submit', handler)

1element.on('submit', () => {
2    console.log('Form submitted');
3  });

unmount()

Unmounts the Element. Note that the Element instance will remain.

unmount()

1element.unmount();

update(options?, initOptions?)

Using this function to update the element option after create the element

Parameters

options

optionalCardElementOptions

allowedCardNetworks

optional('visa' | 'mastercard' | 'maestro' | 'unionpay' | 'amex' | 'jcb' | 'diners' | 'discover')[]
One or more card networks that you support.

authFormContainer

optionalstring
The container id of the authentication form used in 3D Secure authentication.

authorizationType

optional'pre_auth' | 'final_auth'

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: 'final_auth'

autoCapture

optionalboolean

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: true

disabled

optionalboolean
Whether the Element input is disabled or not.
Default: false

style

optionalInputStyle
Style for the card element.

initOptions

optionalInitOptions

env

optional'demo' | 'prod'
The Airwallex integration environment your site would like to connect with.
Default: 'prod'

fonts

optionalFontOptions[]
Global option to customize font styles of Elements.

locale

optionalenum
The locale for your website. Defaults to the browser's locale; however, if the browser's locale is not supported, it will default to 'en'.

origin

optionalstringDeprecated
This field is no longer used.

update(options?, initOptions?)

1element.update({autoCapture: true});

verifyConsent(data)

Using this function to verify consent

Parameters

data

requiredVerifyConsentRequest
Verify consent request payload

client_secret

requiredstring
This should be the client_secret of the consent

currency

requiredstring
The currency of the payment consent, if you are creating card consent, currency is required

Returns

Promise<boolean | PaymentConsentResponse>

PaymentConsentResponse

requiredobject

customer_id

requiredstring
The ID of the Customer who intends to pay for the Payment Intent.

payment_consent_id

requiredstring
The ID of the new Payment Consent.

currency

optionalstring
The currency of the Payment Consent.

intent_id

optionalstring
Returns intent_id if merchant provides intent_id in createPaymentConsent(). Otherwise, Airwallex creates an initial Payment Intent and returns the intent_id.

payment_method

optionalobject
The payment method of the Payment Consent.

verifyConsent(data)

1element.verifyConsent({
2  client_secret: 'replace-with-your-client-secret',
3  currency: 'replace-with-your-currency',
4});
Was this page helpful?