Airwallex JS
Airwallex logoAirwallex logo

Korean Card Identifier Element

Copy for LLMView as Markdown
The Korean Card Identifier Element allows you to collect the cardholder's date of birth or business number depending on the card type in a Korean Card Split Element format and must be in conjunction with other Korean Card Split Elements (Korean Card Number, Korean Card Expiry Date and Korean Card Password First Two Digits.)

createElement('krCardIdentifier', options?)

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

Parameters

type

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

options

optionalKRCardIdentifierElementOptions
Options for creating krCardIdentifier Element.

cardType

required'personal' | 'company'
The type of the identifier.

businessNumberPlaceholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper when card type is 'company'.

dateOfBirthPlaceholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper when card type is 'personal'.

disabled

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

style

optionalInputStyle
Style for the krCardIdentifier Element.

Returns

KRCardIdentifierElement | null

createElement('krCardIdentifier', options?)

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

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

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

10element.mount('kr-card-identifier-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();

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

optionalKrCardIdentifierElementOptions

businessNumberPlaceholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper when card type is 'company'.

cardType

optional'personal' | 'company'
The type of the identifier.

dateOfBirthPlaceholder

optionalstring
A short hint to suggest the expected value of an input field to the shopper when card type is 'personal'.

disabled

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

style

optionalInputStyle
Style for the krCardIdentifier 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?