Tombol pembayaran kripto untuk situs web

Tombol «Bayar dengan kripto» mudah ditambahkan, tetapi tidak bisa berupa potongan kode salin-tempel: membuat pembayaran memerlukan kunci API rahasia Anda, yang tidak boleh sampai ke browser. Karena itu tombol harus berbicara dengan server Anda sendiri, yang membuat pembayaran dan mengembalikan alamat halaman pembayaran. Panduan ini menunjukkan pola itu dengan kode yang berfungsi dan hal-hal yang menjaganya tetap aman.

Mengapa belum ada tombol salin-tempel

Banyak penyedia pembayaran menyediakan tombol atau widget yang dapat disematkan. Qvard belum punya tombol tanpa kode: tautan pembayaran sedang dikembangkan. Checkout tersemat sudah siap sebagai widget untuk situs Anda. SDK sudah siap. Hari ini integrasi lewat API, dan API diautentikasi dengan kunci rahasia di header Authorization: Bearer.

Kunci itu dapat membuat pembayaran untuk proyek Anda, jadi harus tetap di server. Tombol yang membawa kunci di kode front-end akan menyerahkannya kepada setiap pengunjung. Ini bukan keterbatasan yang perlu disiasati; inilah alasan pola di bawah memiliki langkah di server.

Polanya: tombol, endpoint Anda, halaman pembayaran

Tiga langkah membentuk tombol yang berfungsi:

Tombol mengirim permintaan ke endpoint di server Anda, menyatakan apa yang ingin dibeli pengunjung (produk, paket), bukan berapa harganya.
Endpoint Anda mencari harga, membuat catatan pesanan Anda sendiri, dan memanggil Qvard: satu POST ke https://api.qvard.com/api/v1/payment dengan kunci di header Authorization: Bearer dan JSON dengan nomor pesanan sebagai id serta jumlah sebagai price dalam dolar AS. Responsnya 201 dengan redirectUrl.
Browser dialihkan ke redirectUrl itu, halaman pembayaran Qvard yang dihosting, tempat pengunjung memilih aset dan jaringan lalu membayar dari dompet.

Tidak ada yang rahasia menyentuh halaman, dan halaman pembayarannya dihosting Qvard, jadi Anda tidak membangun checkout kripto.

Front-end: tombol dan pengalihan

Tombol membutuhkan sekitar lima belas baris. Ia menonaktifkan dirinya selama permintaan berjalan, mengirim pengenal produk, dan jika berhasil mengarahkan browser ke alamat yang dikembalikan. Jika gagal, ia diaktifkan kembali dan menampilkan pesan, agar pengunjung dapat mencoba lagi.

Ingat satu aturan: browser mengirim apa yang dibeli, tidak pernah berapa. Jika jumlah berasal dari halaman, siapa pun dapat membuka alat pengembang dan mengubah paket 49 dolar menjadi pembayaran satu dolar.

HTML + JSpay-button.html

<button id="pay-crypto" data-product="pro-plan">Pay with crypto</button>

<script>
  document.getElementById('pay-crypto').addEventListener('click', async (event) => {
    const button = event.currentTarget;
    button.disabled = true;
    try {
      // Send only WHAT is being bought; the server decides the price.
      const res = await fetch('/api/crypto-checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ product: button.dataset.product })
      });
      if (!res.ok) throw new Error('checkout failed');
      const { redirectUrl } = await res.json();
      window.location.assign(redirectUrl);   // the Qvard hosted payment page
    } catch (e) {
      button.disabled = false;
      alert('Could not start the payment. Please try again.');
    }
  });
</script>

Server: harga, pesanan, pembayaran

Endpoint pada contoh melakukan empat hal:

Mencari harga dari tabel di server dan menolak produk yang tidak dikenal.
Membuat pesanan Anda sendiri dan memakai nomornya sebagai id pembayaran. Begitulah webhook kemudian menemukan pesanan.
Memanggil Qvard dan mengembalikan hanya redirectUrl ke browser. Respons 400 («Error validation», dengan pesan per field) berarti isinya salah; 401 berarti kuncinya salah. Keduanya tidak boleh diulang tanpa perubahan.
Aman diulang. Mengirim id yang sama untuk metode pembayaran yang sama mengembalikan pembayaran yang ada, sehingga pengunjung yang mengklik dua kali tidak membuat dua.

Tambahkan pembatasan laju pada endpoint agar tak seorang pun dapat membuat ribuan pesanan yang belum dibayar, dan wajibkan pengguna yang masuk atau captcha jika produk Anda memerlukannya.

Node.jscrypto-checkout.js

import express from 'express';
import crypto from 'node:crypto';

const app = express();
const PRICES_USD = { 'pro-plan': 49 };          // prices live on the server, never in the browser

app.post('/api/crypto-checkout', express.json(), async (req, res) => {
  const price = PRICES_USD[req.body.product];
  if (!price) return res.sendStatus(400);

  const orderId = await db.orders.create({ product: req.body.product, amountUsd: price }); // your own order number

  const response = await fetch('https://api.qvard.com/api/v1/payment', {
    method: 'POST',
    headers: { Authorization: 'Bearer ' + process.env.QVARD_API_KEY, 'Content-Type': 'application/json' },
    body: JSON.stringify({ id: String(orderId), price })
  });
  if (response.status !== 201) return res.sendStatus(502);

  const { redirectUrl } = await response.json();
  res.json({ redirectUrl });
});

Setelah klik: webhook yang memutuskan

Mengalihkan pengunjung ke halaman pembayaran memulai pembayaran; tidak menyelesaikannya. Saat pembayaran selesai, Qvard memanggil callback URL yang tersimpan di proyek Anda dengan id Anda dan status completed. Baru saat itu berikan akses atau tandai pesanan dibayar. Endpoint harus menjawab tepat HTTP 200 dan aman bila dijalankan dua kali; lihat cara mengamankan webhook pembayaran kripto.

URL kembali setelah pembayaran belum tersedia, jadi pengunjung kembali ke situs Anda sendiri. Beri mereka halaman yang menampilkan status pesanan sebenarnya dan menyegarkan diri selama menunggu, bukan halaman terima kasih yang mengasumsikan sukses.

Harga tetap, jumlah variabel, dan langkah berikutnya

Harga tetap (paket, produk) adalah kasus mudah: tabel di server menyimpannya.
Jumlah variabel (donasi, isi ulang) memerlukan validasi di server: minimum, maksimum, dan pemeriksaan angka. Jumlah di bawah minimum metode pembayaran yang dipilih ditolak dengan 400.
Beberapa tombol berbagi endpoint yang sama; hanya pengenal produk yang berbeda.

Panduan lengkap ada di cara menerima pembayaran kripto di situs web, dan API-nya di API pembayaran kripto untuk developer. Faktur demo menunjukkan halaman yang dituju tombol; ketentuan komersial ada di halaman harga.

FAQ

Bisakah saya menaruh kunci API Qvard di kode tombol?

Tidak. Kunci dapat membuat pembayaran untuk proyek Anda dan harus tetap di server. Tombol harus memanggil endpoint Anda sendiri, yang memanggil Qvard.

Apakah ada widget tersemat atau tombol tanpa kode?

Ya, checkout tersemat sudah siap sebagai widget untuk situs Anda. Tombol tanpa kode belum ada: tautan pembayaran sedang dikembangkan. SDK sudah siap. Hari ini integrasi memakai API dengan endpoint server kecil.

Dari mana harga harus berasal?

Dari server Anda, tidak pernah dari browser. Tombol hanya mengirim apa yang dibeli, dan server yang menentukan harga dalam dolar AS.

Bagaimana saya tahu pelanggan sudah membayar?

Dari webhook yang dikirim Qvard saat pembayaran selesai. Pengunjung yang kembali ke situs bukan bukti pembayaran.

Tombol pembayaran kripto untuk situs web

Mengapa belum ada tombol salin-tempel

Polanya: tombol, endpoint Anda, halaman pembayaran

Front-end: tombol dan pengalihan

Server: harga, pesanan, pembayaran

Setelah klik: webhook yang memutuskan

Harga tetap, jumlah variabel, dan langkah berikutnya

FAQ

Artikel terkait

Pembayaran kripto di WordPress

Pembayaran kripto di WooCommerce

Pembayaran kripto untuk backend kustom