Airwallex JS
Airwallex logoAirwallex logo

Card CVC Element

Copy for LLMView as Markdown
The Card CVC Element allows you to collect the card CVC in a Split Card format and must be in conjunction with other Split Card Elements (Card Number, Card Expiry Date). Additionally, CVC Element may be used in customer-initiated subsequent payments.

createElement('cvc', options?)

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

Parameters

type

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

options

optionalCvcElementOptions
Options for creating cvc Element.

authFormContainer

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

cvcLength

optionalnumber
Indicate CVC length.

disabled

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

isMasked

optionalboolean
Whether the CVC input is masked
Default: false

isStandalone

optionalboolean

Whether CVC Element works alone or not. If you want to use the CVC Element for a saved Payment Consent, you could set it true to improve the checkout experience.

placeholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper.

style

optionalInputStyle
Style for the CVC Element.

Returns

CvcElement | null

createElement('cvc', options?)

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

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

8const element = await createElement('cvc');
9

10element.mount('cvc-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)

Call this function when the shopper is ready to make a payment as per the details in the Payment Intent.

Parameters

data

requiredPaymentMethodRequestData

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

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 callback function that will be called when the event occurs.

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 callback function that will be called when the event occurs.

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 callback function that will be called when the event occurs.

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 callback function that will be called when the event occurs.

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('pressArrowKey', handler)

This event will be fired when the user presses an arrow key while the element is focused. This can be used to implement custom navigation between split card elements.

Parameters

type

required'pressArrowKey'
The event name.

handler

requiredfunction

The callback function that will be called when the event occurs.

The handler receives an object with the following properties:

detail

requiredobject

on('pressArrowKey', handler)

1element.on('pressArrowKey', (e) => {
2    const { arrowKey } = e.detail;
3    console.log('Arrow key pressed', arrowKey);
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 callback function that will be called when the event occurs.

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?)

Call this function to update Element options after creating the Element.

Parameters

options

optionalCvcElementOptions

authFormContainer

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

cvcLength

optionalnumber
Indicate CVC length.

disabled

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

isMasked

optionalboolean
Whether the CVC input is masked
Default: false

isStandalone

optionalboolean

Whether CVC Element works alone or not. If you want to use the CVC Element for a saved Payment Consent, you could set it true to improve the checkout experience.

placeholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper.

style

optionalInputStyle
Style for the CVC 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({
2  placeholder: 'replace-with-your-placeholder',
3});
Was this page helpful?