Airwallex JS
Airwallex logoAirwallex logo

Korean Card Number Element

Copy for LLMView as Markdown
The Korean Card Number Element allows you to collect the card number in a Korean Card Split Element format and must be in conjunction with other Korean Card Split Elements (Korean Card Expiry Date, Korean Card Identifier and Korean Card Password First Two Digits.)

createElement('krCardNumber', options?)

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

Parameters

type

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

options

optionalKRCardNumberElementOptions
Options for creating krCardNumber Element.

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 krCardNumber Element input is disabled or not.
Default: false

intent

optionalIntent

The Payment Intent you would like to checkout. Refer to Airwallex Client API

placeholder

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

style

optionalInputStyle
Style for the krCardNumber Element.

Returns

KRCardNumberElement | null

createElement('krCardNumber', options?)

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

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

8const element = await createElement('krCardNumber', {
9  showIcon: true, // Optional: Show card brand icon
10});
11

12element.mount('kr-card-number-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.

Confirms 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});

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

optionalKrCardNumberElementOptions

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 krCardNumber Element input is disabled or not.
Default: false

intent

optionalIntent

The Payment Intent you would like to checkout. Refer to Airwallex Client API

placeholder

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

style

optionalInputStyle
Style for the krCardNumber 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  autoCapture: false,
3});
Was this page helpful?