TenpayGlobal EmbedFinance SDK

TenpayGlobal EmbedFinance SDK is a toolkit specially designed for frontend projects. With clear and concise core code, it mainly provides the following functions:
Type Declaration: We provide comprehensive type declarations for the SDK initialization parameters, entry methods, and embedded element methods.
Dynamic Loading and Instantiation: According to the initialization guide, the SDK will dynamically load the latest JS scripts and call the corresponding entry instance and methods.
Element Mounting: We offer methods for mounting embedded elements, providing greater flexibility for higher-level business parties.

Installation

Use npm to install the TenpayGlobal EmbedFinance SDK module:

npm install @tenpayglobal/embed-finance

Usage

init

The init method of the SDK is used for SDK initialization, specifying the required elements to load, the environment, and the language, and handling the information requiring authentication.
For detailed configuration, please contact your account manager.

import { init, createElement } from '@tenpayglobal/embed-finance';

await init({
    elements: [{ type: 'kyc', scene: 'wallet-cn' }],
    env: 'prod',
    langKey: 'zh_CN',
    auth: {
        spid: '<spid>',
        token: '<token>',
        sign: '<sign>'
    }
});

In the example code, the authentication information was replaced with angle brackets, please replace it with the actual authentication information. For the specific way to get it, you can contact the account manager.

createElement

After successfully initializing with the init method, you can call the createElement method to create an instance of the embedded component. Following this, use the mount method to mount the element onto the target element. After successful mounting, the platform can then access the TenpayGlobal page.

import { createElement } from '@tenpayglobal/embed-finance';

const element = createElement('kyc', {
  kyc_action_type: 'create'
})

element.mount('#iframe-container');

Handling Event

After successfully loading and mounting the component object, users can perform corresponding operations on the TenpayGlobal page. At different lifecycle stages, the module will throw corresponding events. Once the platform registers event callbacks, it will execute the corresponding callback methods at the appropriate times.

element.on('tgbs:finished', (data) => {
  console.log('receive finished data', data.kyc_action_type);
});

Destroy Instance

After completing the corresponding process operations, you can call the unmount and destroy methods to unload the loaded instance.

const kycElement = createElement('kyc');
kycElement.unmount();
kycElement.mount(document.getElementById('b-container'));

element.destroy();

TypeScript support

This package includes TypeScript declarations. We support projects using TypeScript versions >= 4.4.

Keywords

TenpayGlobal