Widget pembayaran crypto: cara menambahkannya ke situs Anda
Panduan widget pembayaran crypto: integrasikan embedded checkout Qvard ke situs Anda. Pembuatan pembayaran di server dan browser, verifikasi tanda tangan webhook, demo.
Widget pembayaran crypto adalah widget JavaScript yang membuka jendela pembayaran di situs Anda. Widget Qvard sekarang aktif di https://qvard.com/checkout.js. Panduan ini menjelaskan cara kerjanya dan bagaimana mengintegrasikannya.
Apa itu widget pembayaran crypto
Widget adalah elemen pembayaran ringkas yang disematkan situs untuk memulai pembayaran. Di Qvard, widget membuka halaman pembayaran yang sama yang dilihat pelanggan Anda dalam bentuk modal atau formulir tertanam. Pelanggan memilih aset dan jaringan; jumlahnya ditentukan oleh pesanan Anda.
Cara kerjanya di Qvard
Widget dimuat dari https://qvard.com/checkout.js dan membuka jendela pembayaran dalam mode modal (jendela pop-up) atau tertanam. Jendela adalah halaman pembayaran Qvard yang sama: pelanggan memilih aset dan jaringan pada tarif tetap selama durasi faktur. 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.
<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();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.
Panggilan dari backend
Server Anda mengirim id pesanan dalam id dan harga dalam USD dalam price, dengan header x-api-key. Respons berisi id pembayaran dan redirectUrl. Berikan id ke widget di browser, atau gunakan redirectUrl untuk pengalihan. Jangan pernah mengirim kunci rahasia (qvard_sk_…) ke 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. Catatan: acara onSuccess widget bukan bukti pembayaran.
Kapan memilih jendela tertanam
Gunakan modal tertanam atau formulir tertanam 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 widget pembayaran crypto Qvard tersedia 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 tertanam). Lihat contoh kode di artikel ini dan demo.
Apakah widget membuat pelanggan tetap di situs saya?
Ya, dalam mode modal atau tertanam. Pengalihan ke halaman yang dihosting membawa pelanggan ke situs lain, tetapi mereka kembali melalui tautan setelah pembayaran selesai.
Bagaimana cara menguji alurnya?
Buat pembayaran demo dan pastikan handler webhook Anda menerima status yang ditandatangani dan jumlahnya cocok, sebelum go live.
