Tích hợp vào Website

bankHub cung cấp script-js hỗ trợ mở link liên kết tài khoản.

Giới thiệu

Đây là thư viện dùng để hỗ trợ mở Pop up và redirect liên kết tài khoản trên trang web của bạn.

Chỉ thị CSP

Nếu bạn đang sử dụng Chính sách bảo mật nội dung (CSP), hãy sử dụng các lệnh sau để cho phép lưu lượng truy cập Liên kết:

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

Cài đặt

Khai báo lệnh khởi tạo bankHub ở mỗi trang trên trang web của bạn. Nó phải luôn được tải trực tiếp từ https://cdn.bankhub.dev, thay vì được đưa vào một gói cài đặt hoặc tự lưu trữ. Không giống như các SDK khác của bankHub, SDK web JavaScript không được lập phiên bản; cdn.bankhub.vn sẽ tự động cung cấp SDK mới nhất hiện có.

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

Khởi tạo

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

ReactJS

Cài đặt

Để có thể sử dụng script trong ReactJS, bạn cần cài đặt thư viện react-script-hook Cài đặt với npm

npm install react-script-hook

hoặc với yarn

yarn add react-script-hook

Khởi tạo

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

Đối với dự án sử dụng TypeScript ta cần khai báo BankHub như sau:

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 };
};

Mô tả các thành phần của bankHubLinkConfigs :

Thuộc tính	Kiểu	Mô tả
redirectUri	string	Đây là đường dẫn trang dùng để gọi liên kết tài khoản
iframe	boolean	True thì sẽ mở bằng ifrane (Popup), False thì sẽ chuyển sang trang web của bankHub
grantToken	string	Mã liên kết
feature	transaction or account or kyc or qrpay	Loại sản phẩm
fiServiceType	ENTERPRISE or PERSONAL or ALL	Phân loại tài khoản
onSuccess	callbackFn: (publicToken, state) => void	Thực hiện sau khi liên kết tài khoản thành công bằng iframe (iframe = true), publicToken và state có kiểu là string
onExit	callbackFn: () => void	Thực hiện sau khi liên kết tài khoản thành công bằng iframe (iframe = true)

Sử dụng

Đối với iframe = True

Lúc này một popup sẽ hiện ra và yêu cầu người dùng chọn ngân hàng và đăng nhập để liên kết.

• onSuccess sẽ được gọi khi người dùng liên kết thành công.
• onExit sẽ được gọi khi người dùng thoát khỏi popup.

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

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

open();

Đối với iframe = False

Lúc này trang web sẽ chuyển hướng sang trang web của bankHub để liên kết tài khoản. Lúc này người dùng phải tự xử lý sự kiện khi liên kết thành công hoặc thoát khỏi trang web của bankHub.

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

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

open();

[Lưu ý]

Đối với iframe = False thì không thể sử dụng onSuccess và onExit.

Sau khi người dùng liên kết tài khoản thành công, bankHub sẽ gọi lại redirectUri với tham số publicToken. Lúc này người dùng cần xử lý lấy publicToken từ queryString và thực hiện hàm onSuccess như sau:

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

if (publicToken) {
    // Thực hiện hàm handleOnSuccess do người dùng tự định nghĩa
    handleOnSuccess(publicToken);
}