Nhảy tới nội dung

payOS Checkout Script JS

payOS cung cấp script-js hỗ trợ mở link thanh toán

Giới thiệu​

Đây là thư viện dùng để hỗ trợ mở Pop up thanh toán trên trang web của bạn.

Cài đặt

Khai báo lệnh khởi tạo payOS ở 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.payos.vn, 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 payOS, SDK web JavaScript không được lập phiên bản; cdn.payos.vn sẽ tự động cung cấp SDK mới nhất hiện có.

  <script src="https://cdn.payos.vn/payos-checkout/v1/stable/payos-initialize.js"></script>

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.payos.vn/
  script-src https://cdn.payos.vn/payos-checkout/v1/stable/payos-initialize.js
  frame-src https://pay.payos.vn/ https://next.pay.payos.vn/
  connect-src https://payos.vn/

Khởi tạo

let payOSConfig: PayOSConfig = {
  RETURN_URL: "", // required
  ELEMENT_ID: "", // required
  CHECKOUT_URL: "", // required
  onSuccess: (event: any) => {
    //TODO: Hành động sau khi người dùng thanh toán đơn hàng thành công
  },
  onCancel: (event: any) => {
    //TODO: Hành động sau khi người dùng Hủy đơn hàng
  },
  onExit: (event: any) => {
    //TODO: Hành động sau khi người dùng tắt Pop up
  },
};

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

  • * RETURN_URL (String): Đây là đường dẫn tới trang web của bạn khi đơn hàng được thanh toán thành công
  • * ELEMENT_ID (String): Đây là #id của thẻ div ngoài toàn cục của ứng dụng ReactJs. Mục đích là để chúng tôi có thể lấy được thẻ div bằng id được cấp và chèn iframe hiển thị Pop Up thanh toán đơn hàng.
  • * CHECKOUT_URL (String): Đây là đường dẫn tới trang thanh toán mà chúng tôi sẽ mở nó bằng iframe
  • onSuccess (Callback): Sẽ được gọi sau khi đơn hàng được thanh toán thành công.
  • onCancel (Callback): Sẽ được gọi sau khi người dùng "Hủy thanh toán".
  • onExit (Callback): Sẽ được gọi sau khi người dùng bấm thoát khỏi Pop Up thanh toán (Bấm biểu tượng "X" trên iframe).

Mô tả các thuộc tính có trong event:

  • loading: Có giá trị false nếu luồng thực thi đã kết thúc.
  • code: Mã code phản hồi. Các giá trị của thuộc tính:
    • 00: SUCCESS
    • 01: FAILED
    • 02: INVALID_PARAM
  • id: paymentLinkId. Ví dụ: cb62d25884c7463cbabd2997b4c03af9
  • cancel: Có giá trị true khi huỷ đơn hàng và false khi thanh toán đơn hàng
  • orderCode: Mã đơn hàng
  • status: Có giá trị CANCELLED hoặc PAID, mô tả cho trạng thái đơn hàng đã bị huỷ hay đã được thanh toán
{
  loading: boolean;
  code: string;
  id: string;
  cancel: string;
  orderCode: number;
  status: string;
}

Cách sử dụng

PayOSCheckout.usePayOS chấp nhận một đối số là Object có kiểu dữ liệu PayOSConfig như đã mô tả ở phần trên, và trả về một Object gồm 2 hàm có tên là open và exit.

const { open, exit } = PayOSCheckout.usePayOS(payOSConfig);

open();

Thông tin về các hàm:

  • open() (void): Sau khi hàm này được thực thi, một Pop up sẽ xuất hiện trên trang web của bạn
  • exit() (void): Sau khi hàm này được thực thi, Pop up sẽ được tắt ngay lập tức