Airwallex LogoAirwallex Logo
Airwallex LogoAirwallex Logo

Create Korean Card Identifier Element

createElement('krCardIdentifier', options?)

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

Parameters

typerequired'krCardIdentifier'

The type of element you are creating.

optionsoptionalKrCardIdentifierElementOptions

Options for creating krCardIdentifier Element.

Returns

KrCardIdentifierElement | null

createElement('krCardIdentifier', options?)

npm

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');

KrCardIdentifierElementOptions

Applies to split card element type integration, the interface used when createElement() with type krCardIdentifier.

cardTyperequired'personal' | 'company'

The type of the identifier.

businessNumberPlaceholderoptionalstring

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

dateOfBirthPlaceholderoptionalstring

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

disabledoptionalboolean

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

styleoptional
InputStyle

Style for the krCardIdentifier Element.

KrCardIdentifierElement

Functions and external fields can be used in your integration flow with Airwallex Payment Elements.

blur()

Using this function to blur the HTML Input element.

Returns

void

blur()

1element.blur();

clear()

Using this function to clear the HTML Input element.

Returns

void

clear()

1element.clear();

destroy()

Destroys the Element instance.

Returns

void

destroy()

1element.destroy();

focus()

Using this function to focus the HTML Input element

Returns

void

focus()

1element.focus();

mount(domElement)

Mounts Element to your HTML DOM.

Parameters

domElementrequiredstring | HTMLElement

Returns

null | HTMLElement

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

Listen to Element events.

Type Parameters

EventCodeextends
SplitElementEventCode

A generic type for event codes. Ideally, you don't need to specify this explicitly as it can be inferred automatically.

Parameters

eventCoderequiredEventCode

The event code to listen for.

handlerrequired
SplitElementEventHandler
<EventCode>

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

Returns

void

on(eventCode, handler)

1element.on('change', (e) => {
2   const { completed, empty, error } = e.detail;
3  // Handle change event
4});

unmount()

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

Returns

void

unmount()

1element.unmount();

update(options?, initOptions?)

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

Parameters

optionsoptionalPartial<
KrCardIdentifierElementOptions
>

initOptionsoptionalPartial<
InitOptions
>

Returns

void

update(options?, initOptions?)

1element.update({
2  placeholder: 'replace-with-your-placeholder',
3});

Was this page helpful?