SCA Verify Element

The SCA Verify Element verifies user identity for sensitive operations such as initiating transactions or accessing critical account information. It prompts users to enter authentication factors (e.g., passcode, 2FA code) to confirm their identity and authorize operations. This component must be used in conjunction with other SCA Elements (SCA Setup, SCA Management).

createElement('scaVerify', options?)

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

Parameters

type

required'scaVerify'

The type of element you are creating.

options

optionalScaVerifyElementOptions

Options for creating scaVerify Element.

userEmail

requiredstring

User’s email, used for two-factor authentication recovery in case the user forgets the passcode.

disableFullPage

optionalboolean

By default, the reset passcode page is displayed in a full-page layout. Set this field to true to disable the full-page layout and use an embedded layout instead.

locale

optional'en'

The locale for the Element, applied to Element UI strings and error messages. If this field is not provided, the locale configured in init() will be used.

prefilledMobileInfo

optionalPrefilledMobileInfo

User’s mobile information, prefilled during the setup flow.

scaSessionCode

optionalstring

The code returned in the x-sca-session-code response header in the Client API when SCA is required for a transaction request.

Returns

ScaVerifyElement | null

createElement('scaVerify', options?)

1import { createElement, init } from '@airwallex/components-sdk';
2
3await init({
4  env: 'prod',
5  authCode: 'replace-with-auth-code',
6  codeVerifier: 'replace-with-code-verifier',
7  clientId: 'replace-with-client-id',
8  enabledElements: ['risk'],
9});
10
11const scaElement = await createElement('scaVerify', {
12  userEmail: 'replace-with-user-email',
13  scaSessionCode: 'replace-with-sca-session-code',
14});

destroy()

Destroys the Element instance.

destroy()

1element.destroy();

mount(domElement)

Mounts Element to your HTML DOM.

Parameters

domElement

requiredstring | HTMLElement

The container DOM element to mount the element.

mount(domElement)

1// There are two ways to mount element:
2// 1. call with container dom id
3element.mount('container-dom-id');
4
5// 2.find the created DOM in existing HTML and call with container DOM element
6const containerElement = document.getElementById("container-dom-id");
7element.mount(containerElement);

on('verificationSucceed', handler)

This event triggers when the SCA flow is authenticated successfully.

Parameters

type

required'verificationSucceed'

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:

token

requiredstring

on('verificationSucceed', handler)

1element.on('verificationSucceed', ({token}: {token:string}) => {
2 // Handle success event
3});

on('verificationFailed', handler)

This event triggers when the SCA flow authentication fails.

Parameters

type

required'verificationFailed'

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:

reason

requiredstring

The reason why the verification failed.

on('verificationFailed', handler)

1element.on('verificationFailed', (data) => {
2  console.log('Verification failed:', data.reason);
3});

on('scaSetupSucceed', handler)

This event will be fired when SCA has been successfully configured by users.

Parameters

type

required'scaSetupSucceed'

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:

mobileInfo

optionalobject

The mobile information used for SCA setup, if applicable.

on('scaSetupSucceed', handler)

1element.on('scaSetupSucceed', (data) => {
2  console.log('SCA setup succeeded', data.mobileInfo);
3});

on('resetPasscodeSucceed', handler)

This event triggers when the user successfully resets their passcode.

Parameters

type

required'resetPasscodeSucceed'

The event name.

handler

required() => void

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

on('resetPasscodeSucceed', handler)

1element.on('resetPasscodeSucceed', () => {
2// Handle event
3});

on('cancel', handler)

This event fires when the element is exited by cancellation.

Parameters

type

required'cancel'

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:

reason

optionalstring

The reason for the cancellation, if available.

on('cancel', handler)

1element.on('cancel', () => {
2// Handle cancel event
3});

on('ready', handler)

This event will be fired when the SCA page is ready.

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// Handle ready event
3});

on('error', handler)

This event fires when an error occurs within the element.

Parameters

type

required'error'

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:

message

requiredstring

The error message describing what went wrong.

on('error', handler)

1element.on('error', (data) => {
2  console.error('SCA error:', data.message);
3});

unmount()

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

unmount()

1element.unmount();

Was this page helpful?