payOS Embedded Form

Frontend:

Backend:

Thiết lập Server

Cài đặt thư viện payOS cho NodeJS

npm install @payos/node
# hoặc
yarn add @payos/node

Khởi tạo đối tượng `PayOS`

Bạn cần khởi tạo đối tượng PayOS bằng Client ID, API Key và Checksum Key của kênh thanh toán mà bạn đã tạo trên trang payOS.

Tạo link thanh toán

Link thanh toán kiểm soát những gì khách hàng của bạn nhìn thấy trên trang thanh toán, chẳng hạn như Tên sản phẩm, số lượng đặt, số tiền cũng như số tài khoản thụ hưởng, tên ngân hàng.

Cung cấp returnUrl và cancelUrl

Chỉ định URL công khai cho trang thanh toán thành công và hủy thanh toán. Bạn cũng có thể xử lý cả trạng thái thành công và hủy với cùng một URL.

Chuyển hướng tới trang thanh toán

Sau khi tạo link thanh toán thành công, chuyển hướng khách hàng tới trang thanh toán trả về trong phản hồi.

Xây dựng giao diện

Cài đặt thư viện payos-checkout bằng link cdn

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

Thêm nút tạo link thanh toán và thêm div nhúng giao diện thanh toán

Thêm 1 nút bấm tạo link thanh toán trên trang xem thông tin đơn hàng để gọi API tạo link thanh toán và 1 div có trường id riêng biệt được sử dụng để nhúng giao diện thanh toán trên trang web

Khởi tạo config cho hook usePayOS

Có 3 trường bắt buộc phải khởi tạo:

RETURN_URL: url dẫn đến trang web khi thanh toán thành công.
ELEMENT_ID: id của 1 component mà bạn muốn nhúng giao diện thanh toán của payOS vào
CHECKOUT_URL: đường link dẫn đến giao diện thanh toán sẽ được nhúng vào trang web của bạn

Vì thực hiện giao diện thanh toán nhúng nên ta sẽ sử dụng thêm các property như sau:

embedded: true để sử dụng giao diện nhúng
onSuccess(event): gọi hàm bạn truyền vào nếu như người dùng thực hiện thanh toán thành công

Thông tin chi tiết hơn tại: payos-checkout

Thực hiện gọi hook usePayOS với config đã khởi tạo trước đó

usePayOS hook trả về 2 hàm open() và exit().

Chạy thử

Chạy server của bạn và truy cập vào http://localhost:3030 để bắt đầu tạo link thanh toán.

npm start

Preview

Tên sản phẩm: Mì tôm Hảo Hảo ly

Giá tiền: 2000 VNĐ

Số lượng: 1

server.js
index.html
index.js

/server.js
const express = require("express");
const dotenv = require("dotenv");
const cors = require("cors");
const PayOS = require("@payos/node");

const app = express();
dotenv.config();
const payOS = new PayOS(
  process.env.PAYOS_CLIENT_ID,
  process.env.PAYOS_API_KEY,
  process.env.PAYOS_CHECKSUM_KEY
);

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post("/create-embedded-payment-link", async (req, res) => {
  const YOUR_DOMAIN = `http://localhost:3000/`;
  const body = {
    orderCode: Number(String(Date.now()).slice(-6)),
    amount: 10000,
    description: "Thanh toan don hang",
    items: [
      {
        name: "Mì tôm Hảo Hảo ly",
        quantity: 1,
        price: 10000,
      },
    ],
    returnUrl: `${YOUR_DOMAIN}`,
    cancelUrl: `${YOUR_DOMAIN}`,
  };

  try {
    const paymentLinkResponse = await payOS.createPaymentLink(body);

    res.send(paymentLinkResponse);
  } catch (error) {
    console.error(error);
    res.send("Something went error");
  }
});

app.listen(3030, function () {
  console.log(`Server is listening on port 3030`);
});

/public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tạo Link thanh toán</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body style="display: flex">
    <div style="padding-top: 10px; display: flex; flex-direction: column">
      <div
        style="border: 2px solid blue; border-radius: 10px; overflow: hidden"
      >
        <div id="content-container" style="padding: 10px">
          <p><strong>Tên sản phẩm:</strong> Mì tôm Hảo Hảo ly</p>
          <p><strong>Giá tiền:</strong> 2000 VNĐ</p>
          <p><strong>Số lượng:</strong> 1</p>
        </div>
        <div id="button-container">
          <button
            type="submit"
            id="create-payment-link-btn"
            style="
              width: 100%;
              background-color: blue;
              color: white;
              border: none;
              padding: 10px;
              font-size: 15px;
            "
          >
            Tạo Link thanh toán
          </button>
        </div>
      </div>
      <div id="embeded-payment-container" style="height: 350px"></div>
    </div>
  </body>
</html>
<script src="https://cdn.payos.vn/payos-checkout/v1/stable/payos-initialize.js"></script>
<script src="index.js"></script>

/public/index.js
/* eslint-disable no-undef */
const buttonContainer = document.getElementById("button-container");
const contentContainer = document.getElementById("content-container");
let isOpen = false;
let config = {
  RETURN_URL: window.location.href,
  ELEMENT_ID: "embeded-payment-container",
  CHECKOUT_URL: "",
  embedded: true,
  onSuccess: (event) => {
    contentContainer.innerHTML = `
        <div style="padding-top: 20px; padding-bottom:20px">
            Thanh toan thanh cong
        </div>
    `;
    buttonContainer.innerHTML = `
        <button
            type="submit"
            id="create-payment-link-btn"
            style="
            width: 100%;
            background-color: blue;
            color: white;
            border: none;
            padding: 10px;
            font-size: 15px;
            "
        >
            Quay lại trang thanh toán
        </button>
    `;
  },
};
buttonContainer.addEventListener("click", async (event) => {
  if (isOpen) {
    const { exit } = PayOSCheckout.usePayOS(config);
    exit();
    contentContainer.innerHTML = `
        <p><strong>Tên sản phẩm:</strong> Mì tôm Hảo Hảo ly</p>
        <p><strong>Giá tiền:</strong> 2000 VNĐ</p>
        <p><strong>Số lượng:</strong> 1</p>
    `;
  } else {
    const checkoutUrl = await getPaymentLink();
    config = {
      ...config,
      CHECKOUT_URL: checkoutUrl,
    };
    const { open } = PayOSCheckout.usePayOS(config);
    open();
  }
  isOpen = !isOpen;
  changeButton();
});

const getPaymentLink = async () => {
  const response = await fetch(
    "http://localhost:3030/create-embedded-payment-link",
    {
      method: "POST",
    }
  );
  if (!response.ok) {
    console.log("server doesn't response!");
  }
  const result = await response.json();
  return result.checkoutUrl;
};

const changeButton = () => {
  if (isOpen) {
    buttonContainer.innerHTML = `
        <button
            type="submit"
            id="create-payment-link-btn"
            style="
            width: 100%;
            background-color: gray;
            color: white;
            border: none;
            padding: 10px;
            font-size: 15px;
            "
        >
            Đóng link thanh toán
        </button>
      `;
  } else {
    buttonContainer.innerHTML = `
        <button
            type="submit"
            id="create-payment-link-btn"
            style="
                width: 100%;
                background-color: blue;
                color: white;
                border: none;
                padding: 10px;
                font-size: 15px;
            "
            >
            Tạo Link thanh toán
        </button> 
    `;
  }
};

Thiết lập Server​

Cài đặt thư viện payOS cho NodeJS​

Khởi tạo đối tượng PayOS​

Tạo link thanh toán​

Cung cấp returnUrl và cancelUrl​

Chuyển hướng tới trang thanh toán​

Xây dựng giao diện​

Cài đặt thư viện payos-checkout bằng link cdn​

Thêm nút tạo link thanh toán và thêm div nhúng giao diện thanh toán​

Khởi tạo config cho hook usePayOS​

Thực hiện gọi hook usePayOS với config đã khởi tạo trước đó​

Chạy thử​