Embedded checkout crypto: cửa sổ thanh toán trên website của bạn
Embedded checkout crypto: tích hợp cửa sổ modal hoặc biểu mẫu nhúng trực tiếp. Tạo thanh toán trên máy chủ và trình duyệt, xác minh webhook, demo.
Embedded checkout crypto nghĩa là cửa sổ thanh toán mở trực tiếp trên trang của bạn thông qua widget JavaScript. Nó có thể là modal (cửa sổ nổi) hoặc biểu mẫu nhúng. Qvard cung cấp widget sẵn sàng cho sản xuất tại https://qvard.com/checkout.js. Hướng dẫn này giải thích cách hoạt động và cách tích hợp.
Embedded checkout nghĩa là gì
Embedded checkout là một cửa sổ thanh toán, thường là modal, mở trên trang mà khách hàng đang xem. Khách hàng giữ nguyên ngữ cảnh cửa hàng và thanh toán mà không rời website. Logic thanh toán vẫn giống trang hosted.
Cách hoạt động ở Qvard
Widget được tải từ https://qvard.com/checkout.js và mở cửa sổ thanh toán ở chế độ modal (cửa sổ bật lên) hoặc nhúng. Cửa sổ là trang thanh toán Qvard giống nhau: khách hàng chọn tài sản và mạng, và số tiền được xác định bởi đơn hàng của bạn. Một phiên bản widget nhận khoá công khai của bạn (qvard_pk_…) để tạo ở trình duyệt hoặc id thanh toán để tạo ở máy chủ. Hãy thử trực tiếp tại trang demo trên qvard.com.
Hai cách tạo thanh toán
Trên trình duyệt: truyền khoá công khai (qvard_pk_…) và số tiền đến widget; nó tạo thanh toán và mở cửa sổ. Trên máy chủ: backend của bạn tạo thanh toán qua POST /api/v1/payment và truyền id đến widget. Để đơn hàng có giá cố định hoặc giới hạn tồn kho, sử dụng tạo ở máy chủ để khách hàng không thể thay đổi giá ở trình duyệt. Ngoài ra, bỏ qua widget và chuyển hướng khách hàng đến trang thanh toán được lưu trữ.
<script src="https://qvard.com/checkout.js"></script>
new QvardCheckout({
mode: 'modal',
publishableKey: 'qvard_pk_…',
price: 10,
onSuccess: function (e) {
console.log('paid', e.paymentId);
}
}).open();x-api-key: qvard_sk_…
{
"id": "order_1024",
"price": 149.99,
"paymentSystemId": 12
}
// 201 Created
{
"data": {
"id": "8f3k2a1c",
"redirectUrl": "https://my.qvard.com/pay/8f3k2a1c"
},
"code": 201,
"message": "success",
"status": true
}Trên máy chủ: tạo thanh toán trước tiên
Máy chủ của bạn gửi mã đơn hàng và giá tính bằng USD kèm header x-api-key. Phản hồi trả về id thanh toán và redirectUrl. Truyền id đến widget ở trình duyệt, hoặc sử dụng redirectUrl để chuyển hướng được lưu trữ. Giữ khoá trên máy chủ, vì yêu cầu không nên được gửi từ trình duyệt.
Xác minh thanh toán từ webhook
Khi trạng thái là paid, endpoint webhook của bạn nhận id và status, được ký bằng header X-Qvard-Signature (HMAC-SHA256). Xác minh chữ ký bằng khoá bí mật của bạn (qvard_sk_…) và đảm bảo số tiền khớp với đơn hàng của bạn. Chỉ đánh dấu đơn hàng là đã thanh toán sau khi xác minh chữ ký.
Khi nào chọn cửa sổ nhúng
Sử dụng modal nhúng hoặc biểu mẫu nhúng để giữ khách hàng trên trang của bạn. Trang thanh toán được lưu trữ có chuyển hướng hoạt động cũng tốt và là lựa chọn nếu bạn không muốn nhúng cửa sổ thanh toán. Cả hai cách tiếp cận đều chia sẻ API và webhook giống nhau.
FAQ
Embedded checkout crypto có sẵn ở Qvard hôm nay không?
Có. Tải widget từ https://qvard.com/checkout.js và truyền khoá công khai của bạn (qvard_pk_…) để tạo ở trình duyệt, hoặc tạo thanh toán trên máy chủ và truyền id.
Làm cách nào để thêm widget vào trang web của tôi?
Thêm thẻ <script src="https://qvard.com/checkout.js"></script> và tạo phiên bản QvardCheckout với khoá, số tiền và chế độ của bạn (modal hoặc nhúng). Xem các ví dụ mã trong bài viết này và demo.
Chữ ký thanh toán có quan trọng không?
Có. Luôn xác minh header X-Qvard-Signature trong webhook của bạn bằng khoá bí mật, và đảm bảo số tiền trong webhook khớp với đơn hàng của bạn.
Tôi có thể sử dụng chuyển hướng thay vì cửa sổ nhúng không?
Có. Trang thanh toán được lưu trữ ở redirectUrl hoạt động cũng tốt và không cần widget. Cả hai cách tiếp cận sử dụng API và webhook giống nhau.
