Integrate into Website

bankHub 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 bankHub 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 bankHub 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 bankHubLinkConfigs = {
    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 bankHubLinkConfigs = {
    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 bankHubLinkConfigs:

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 bankHub 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 bankHubLinkConfigs = {
    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 bankHub's website to link the account. At this point, the user must manually handle the event when the link is successful or exits the bankHub website.

const bankHubLinkConfigs = {
    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, bankHub 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);
}