Widget thanh toán crypto: cách thêm vào website của bạn
Hướng dẫn widget thanh toán crypto: tích hợp embedded checkout của Qvard vào website. Tạo thanh toán trên máy chủ và trình duyệt, xác minh chữ ký webhook, demo.
Widget thanh toán crypto là widget JavaScript mở cửa sổ thanh toán trên website của bạn. Widget của Qvard hiện đang hoạt động 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.
Widget thanh toán crypto là gì
Widget là thành phần thanh toán gọn gàng mà website nhúng vào để bắt đầu thanh toán. Ở Qvard, widget mở cùng trang thanh toán mà khách hàng của bạn thấy ở dạng modal hoặc biểu mẫu nhúng. Khách hàng chọn tài sản và mạng; số tiền được xác định bởi đơn hàng của bạn.
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ới tỷ giá cố định trong thời gian hóa đơ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.
<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();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ữ.
Lệnh gọi từ backend
Máy chủ của bạn gửi mã đơn hàng trong id và giá tính bằng USD trong price, 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. Không bao giờ gửi khoá bí mật (qvard_sk_…) đến 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ý. Lưu ý: sự kiện onSuccess của widget không phải là bằng chứng thanh toán.
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
Widget thanh toán crypto của Qvard có sẵn 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.
Widget có giữ khách hàng trên website của tôi không?
Có, ở chế độ modal hoặc nhúng. Chuyển hướng đến trang được lưu trữ đưa khách hàng đến website khác, nhưng họ quay lại qua liên kết sau khi thanh toán hoàn tất.
Làm sao để kiểm thử luồng?
Tạo thanh toán demo và kiểm tra bộ xử lý webhook nhận được chữ ký và số tiền khớp, trước khi chạy thật.
