Embedded checkout kripto: jendela pembayaran di situs Anda
Embedded checkout kripto: integrasikan jendela modal atau formulir bawaan langsung melalui JavaScript. Pembuatan pembayaran di server dan browser, verifikasi webhook, demo.
Embedded checkout kripto berarti jendela pembayaran terbuka langsung di halaman Anda melalui widget JavaScript. Ini bisa berupa modal (jendela mengambang) atau formulir bawaan. Qvard menyediakan widget siap produksi di https://qvard.com/checkout.js. Panduan ini menjelaskan cara kerjanya dan bagaimana mengintegrasikannya.
Apa arti embedded checkout
Embedded checkout adalah jendela pembayaran, biasanya berbentuk modal, yang terbuka di atas halaman tempat pelanggan sudah berada. Pelanggan tetap berada dalam konteks toko dan membayar tanpa meninggalkan situs. Logika pembayarannya sama seperti di halaman hosted.
Cara kerjanya di Qvard
Widget dimuat dari https://qvard.com/checkout.js dan membuka jendela pembayaran dalam mode modal (jendela pop-up) atau bawaan. Jendela adalah halaman pembayaran Qvard yang sama: pelanggan memilih aset dan jaringan, dan jumlahnya ditetapkan oleh pesanan Anda. Instans widget menerima kunci publik Anda (qvard_pk_…) untuk pembuatan di browser, atau id pembayaran untuk pembuatan di server. Coba secara langsung di halaman demo di https://qvard.com/en/embedded-checkout/playground/.
Dua cara membuat pembayaran
Di browser: berikan kunci publik (qvard_pk_…) dan jumlah ke widget; itu membuat pembayaran dan membuka jendela. Di server: backend Anda membuat pembayaran melalui POST /api/v1/payment dan memberikan id ke widget. Untuk pesanan dengan harga tetap atau batas stok, gunakan pembuatan di server sehingga pelanggan tidak dapat mengubah harga di browser. Sebagai alternatif, lewati widget dan alihkan pelanggan ke halaman pembayaran yang dihosting.
<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
}Di server: buat pembayaran terlebih dahulu
Server Anda mengirim id pesanan dan harga dalam USD dengan header x-api-key. Respons berisi id pembayaran dan redirectUrl. Berikan id ke widget di browser, atau gunakan redirectUrl untuk pengalihan yang dihosting. Simpan kunci di server, karena permintaan tidak boleh dibuat dari browser.
Verifikasi pembayaran dari webhook
Ketika status paid, endpoint webhook Anda menerima id dan status, ditandatangani dengan header X-Qvard-Signature (HMAC-SHA256). Verifikasi tanda tangan menggunakan kunci rahasia Anda (qvard_sk_…) dan pastikan jumlahnya sesuai dengan pesanan Anda. Tandai pesanan sebagai dibayar hanya setelah verifikasi tanda tangan.
Kapan memilih jendela bawaan
Gunakan modal bawaan atau formulir bawaan untuk menjaga pelanggan tetap di halaman Anda. Halaman pembayaran yang dihosting dengan pengalihan bekerja dengan baik dan merupakan pilihan jika Anda lebih suka tidak menyematkan jendela pembayaran. Kedua pendekatan berbagi API dan webhook yang sama.
FAQ
Apakah embedded checkout kripto sudah tersedia di Qvard hari ini?
Ya. Muat widget dari https://qvard.com/checkout.js dan berikan kunci publik Anda (qvard_pk_…) untuk pembuatan di browser, atau buat pembayaran di server dan berikan id-nya.
Bagaimana cara menambahkan widget ke situs saya?
Sertakan tag <script src="https://qvard.com/checkout.js"></script> dan buat instance QvardCheckout dengan kunci, jumlah, dan mode Anda (modal atau bawaan). Lihat contoh kode di artikel ini dan demo.
Apakah tanda tangan pembayaran penting?
Ya. Selalu verifikasi header X-Qvard-Signature di webhook Anda menggunakan kunci rahasia, dan pastikan jumlahnya di webhook cocok dengan pesanan Anda.
Bisakah saya menggunakan pengalihan daripada jendela bawaan?
Ya. Halaman pembayaran yang dihosting di redirectUrl bekerja dengan baik dan tidak memerlukan widget. Kedua pendekatan menggunakan API dan webhook yang sama.
