SCA Setup Element

The SCA Setup Element guides users through the initial SCA setup, allowing them to configure two-factor authentication (e.g., passcode and SMS) for secure account access. It's recommended to launch setup immediately after connected account onboarding to reduce potential risks.

createElement('scaSetup', options?)

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

Parameters

type

required'scaSetup'

The type of element you are creating.

options

optionalScaSetupElementOptions

Options for creating scaSetup 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.

Returns

ScaSetupElement | null

createElement('scaSetup', 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('scaSetup', {
12  userEmail: 'replace-with-user-email',
13  prefilledMobileInfo: {
14    countryCode: 'replace-with-user-country-code', // e.g. "61" for country Australia
15    nationalNumber: 'replace-with-user-national-number', // e.g. "04XXXXXXXX" for country Australia
16  },
17});

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?