Integrate into Website

Cas provides script-js to support opening account link links.

Introduction

This is a library used to support opening Pop ups and redirecting account links on your website.

CSP Directive

If you are using Content Security Policy (CSP), use the following commands to allow Link traffic:

default-src https://cdn.bankhub.vn/
script-src https://cdn.bankhub.dev/link/v1/link-initialize.js
frame-src https://dev.link.bankhub.dev
connect-src https://bankhub.dev/

Javascript

Installation

Declare the Cas initialization command on each page of your website. It should always be downloaded directly from https://cdn.bankhub.dev, rather than being included in an installation package or self-hosted. Unlike other Cas SDKs, the JavaScript Web SDK is not versioned; cdn.bankhub.vn will automatically provide the latest SDK available.

<script src="https://cdn.bankhub.dev/link/v1/link-initialize.js"></script>

Initialization

const CasLinkConfigs = {
    redirectUri: redirect_uri, // required
    iframe: true, // required
    grantToken: grantToken, // required
    feature: productType,
    fiServiceType: accountType,
    onSuccess: (publicToken, state) => {},
    onExit: () => {},
};

ReactJS

Installation

To be able to use scripts in ReactJS, you need to install the [react-script-hook] library(https://www.npmjs.com/package/react-script-hook) Install with npm

npm install react-script-hook

or with yarn

yarn add react-script-hook

Initialization

import useScript from "react-script-hook";

const CasLinkConfigs = {
    redirectUri: redirect_uri,
    iframe: true,
    grantToken: grantToken,
    feature: productType,
    fiServiceType: accountType,
    onSuccess: (publicToken, state) => {},
    onExit: () => {},
};
//Load script
const [loading, error] = useScript({
  src: process.env.BANKHUB_SCRIPT_URL, // BANKHUB_SCRIPT_URL = https://cdn.bankhub.dev/link/v1/link-initialize.js
  checkForExisting: true,
});

TypeScript

For projects using TypeScript, we need to declare BankHub as follows:

interface BankHubLink {
  grantToken: string;
  redirectUri: string;
  iframe: boolean;
  state?: string;
  feature?: "transaction" | "account" | "kyc" | "qrpay";
  fiServiceType?: "ENTERPRISE" | "PERSONAL" | "ALL";
  onSuccess: (publicToken: string, state: string) => void;
  onExit: () => void;
}

declare const BankHub: {
  useBankHubLink: ({
    redirectUri,
    iframe,
    state,
    feature,
    fiServiceType,
    onSuccess,
    onExit,
  }: BankHubLink) => { open: () => void; close: () => void };
};

Description of the components of CasLinkConfigs:

| Attributes | Type | Description | |--------------|----------|--------------------- -------------------------------------------------- ---| | redirectUri | string | This is the page link used to call the account link | | iframe | boolean | True will open with iframe (Popup), False will redirect to Cas website | | grantToken | string | Grant Token | | feature | transaction or account or kyc or qrpay | Product type | | fiServiceType| ENTERPRISE or PERSONAL or ALL | Account classification | | onSuccess | callbackFn: (publicToken, state) => void | Executed after successfully linking accounts using iframe (iframe = true), publicToken and state of type string | | onExit | callbackFn: () => void | Executed after successfully linking accounts using iframe (iframe = true) |

Usage

For iframe = True

At this time, a popup will appear and ask the user to select a bank and log in to link.

• onSuccess will be called when the user binds successfully.
• onExit will be called when the user exits the popup.

const CasLinkConfigs = {
    redirectUri: redirect_uri,
    iframe: true,
    grantToken: grantToken,
    feature: productType,
    fiServiceType: accountType,
    onSuccess: (publicToken, state) => {},
    onExit: () => {},
};

const { open } = BankHub.useBankHubLink(linkBankConfigs);

open();

For iframe = False

The website will now redirect to Cas's website to link the account. At this point, the user must manually handle the event when the link is successful or exits the Cas website.

const CasLinkConfigs = {
    redirectUri: redirect_uri,
    iframe: false,
    grantToken: grantToken,
    feature: productType,
    fiServiceType: accountType,
};

const { open } = BankHub.useBankHubLink(linkBankConfigs);

open();

tip

For iframe = False, onSuccess and onExit cannot be used.

After the user successfully links the account, Cas will call redirectUri again with the publicToken parameter. At this point, the user needs to process the publicToken from queryString and perform the onSuccess function as follows:

const urlParams = new URLSearchParams(window.location.search);
const publicToken = urlParams.get('publicToken');

if (publicToken) {
    // Implements the user-defined handleOnSuccess function
    handleOnSuccess(publicToken);
}