Tích hợp vào Website

Cas 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 Cas ở 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 Cas, 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 CasLinkConfigs = {
    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 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

Đối với dự án sử dụng TypeScript ta cần khai báo Cas 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 CasLinkConfigs :

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 Cas
grantToken	string	Mã liên kết
feature	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

Mở dưới dạng popup.

• 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 CasLinkConfigs = {
    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

Mở Cas Link bằng cách chuyển trang.

Bạn sẽ phải xử lý kết quả nhận được trên redirectUri khi liên kết thành công hoặc khách hàng thoát khỏi giao diện Cas Link.

const CasLinkConfigs = {
    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, Cas 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);
}