Gömülü kripto checkout: sitenizde bir ödeme penceresi
Gömülü kripto checkout: canlı modal veya satır içi ödeme penceresi entegre edin. Sunucu ve tarayıcıda ödeme oluşturma, webhook doğrulaması, demo.
Gömülü kripto checkout, ödeme penceresinin müşteriyi başka bir siteye göndermek yerine kendi sayfanızın içinde JavaScript widget’ı aracılığıyla açılması demektir. Modal (kayan pencere) veya satır içi form olabilir. Qvard, https://qvard.com/checkout.js adresinde üretime hazır bir widget sağlar. Bu rehber nasıl çalıştığını ve nasıl entegre edileceğini açıklar.
Gömülü checkout ne demektir
Gömülü checkout, genellikle bir modal olan ve müşterinin zaten bulunduğu sayfanın üzerinde açılan bir ödeme penceresidir. Müşteri mağaza bağlamını korur ve siteden çıkmadan öder. Ödeme mantığı hosted bir sayfadakiyle aynıdır.
Qvard’da nasıl çalışır
Widget, https://qvard.com/checkout.js adresinden yüklenir ve ödeme penceresini modal (açılır pencere) veya satır içi moddaki olarak açar. Pencere, aynı Qvard ödeme sayfasıdır: müşteri kripto varlığını ve ağını seçer; tutar siparişiniz tarafından sabitlenir. Widget örneği, tarayıcıda oluşturma için genel anahtarınızı (qvard_pk_…) veya sunucuda oluşturma için bir ödeme id’sini alır. Demo sayfasında https://qvard.com/en/embedded-checkout/playground/ adresinde canlı olarak deneyin.
Ödeme oluşturmanın iki yolu
Tarayıcıda: genel anahtarı (qvard_pk_…) ve tutarı widget’e geçirin; ödemeyi oluşturur ve pencereyi açar. Sunucuda: arka uçunuz POST /api/v1/payment aracılığıyla ödemeyi oluşturur ve id’yi widget’e geçirir. Sabit fiyat veya stok limiti olan siparişler için sunucuda oluşturmayı kullanın, böylece müşteri tarayıcıda fiyatı değiştiremez. Alternatif olarak, widget’i atlayın ve müşterileri barındırılan ödeme sayfasına yönlendirin.
<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
}Sunucuda: önce ödemeyi oluşturun
Sunucunuz sipariş numarasını ve USD cinsinden fiyatı x-api-key başlığıyla gönderir. Yanıtta ödeme id’si ve redirectUrl yer alır. Tarayıcıda id’yi widget’e geçirin veya barındırılan yönlendirme için redirectUrl’i kullanın. Anahtarı sunucuda tutun, istek tarayıcıdan yapılmamalıdır.
Webhook’tan ödemeyi doğrulayın
Durum ödendi olduğunda webhook endpoint’iniz id ve status’u alır, X-Qvard-Signature başlığı (HMAC-SHA256) ile imzalanmıştır. Gizli anahtarınızı (qvard_sk_…) kullanarak imzayı doğrulayın ve webhook’taki tutarın siparişinizle eşleşip eşleşmediğini kontrol edin. Siparişi imza doğrulamasından sonra ödendi olarak işaretleyin.
Gömülü pencereyi ne zaman seçersiniz
Müşterileri sayfanızda tutmak için gömülü modal veya satır içi formu kullanın. Barındırılan ödeme sayfası yönlendirmesi eşit derecede iyi çalışır ve ödeme penceresini gömüştürmemeyi tercih ederseniz seçeneğinizdir. Her iki yaklaşım da aynı API ve webhook’u paylaşır.
FAQ
Gömülü kripto checkout bugün Qvard’da var mı?
Evet. https://qvard.com/checkout.js adresinden widget’i yükleyin ve tarayıcıda oluşturma için genel anahtarınızı (qvard_pk_…) geçirin veya sunucuda ödemeyi oluşturup id’yi geçirin.
Widget’i sitime nasıl eklerim?
<script src="https://qvard.com/checkout.js"></script> etiketini ekleyin ve QvardCheckout’u anahtarınız, tutarınız ve moddunuzla (modal veya satır içi) başlatın. Bu makaledeki kod örneklerine ve demoya bakın.
Ödeme imzası önemli midir?
Evet. Webhook’unuzda X-Qvard-Signature başlığını her zaman gizli anahtarınızı kullanarak doğrulayın ve webhook’taki tutarın siparişinizle eşleşip eşleşmediğini kontrol edin.
Gömülü pencere yerine yönlendirme kullanabilir miyim?
Evet. redirectUrl’deki barındırılan ödeme sayfası eşit derecede iyi çalışır ve widget gerektirmez. Her iki yaklaşım da aynı API ve webhook’u kullanır.
