Cara kerja Payment Request API

Pelajari cara kerja Payment Request API di tingkat tinggi.

API Permintaan Pembayaran

Saat pelanggan mencoba membeli sesuatu dari situs Anda, situs tersebut harus menanyakan pelanggan untuk memberikan informasi pembayaran dan, jika perlu, informasi lainnya seperti preferensi pengiriman. Anda dapat mencapainya dengan mudah dan cepat menggunakan Payment Request API (PR API).

Struktur dasar

Membuat objek PaymentRequest memerlukan dua parameter: payment metode dan detail pembayaran. Selain itu, parameter opsi pembayaran ketiga bersifat opsional. Permintaan dasar dapat dibuat seperti ini:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Mari kita lihat bagaimana setiap parameter dibuat dan digunakan.

Metode pembayaran

Parameter pertama, paymentMethods, adalah daftar metode pembayaran yang didukung di variabel array. Setiap elemen dalam {i>array<i} terdiri dari dua komponen, supportedMethods dan, secara opsional, data.

Untuk supportedMethods, penjual harus menentukan Metode Pembayaran ID seperti https://bobbucks.dev/pay. Keberadaan dan konten data bergantung pada konten supportedMethods dan desain penyedia aplikasi pembayaran.

Kedua informasi tersebut harus diberikan oleh penyedia aplikasi pembayaran.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Detail pembayaran

Parameter kedua, paymentDetails, diteruskan sebagai objek dan menentukan detail pembayaran untuk transaksi. Berisi nilai yang diperlukan total, yang menentukan jumlah total yang harus dibayar dari pelanggan. Parameter ini juga dapat mencantumkan item yang dibeli.

Dalam contoh di bawah ini, daftar item pembelian opsional (hanya satu item, dalam kasus) ditampilkan, sebagaimana jumlah total terutang yang diperlukan. Dalam kedua kasus, mata uang unit ditentukan dengan masing-masing jumlah.

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

Memeriksa ketersediaan metode pembayaran

Chrome memeriksa apakah pengguna dan lingkungan siap untuk melakukan pembayaran selama konstruksi objek PaymentRequest.

Untuk memeriksa apakah pengguna dan lingkungan siap melakukan pembayaran, panggil canMakePayment() sebelum menjalankan prosedur pembayaran. Menelepon canMakePayment() menampilkan true jika browser mendukung setidaknya satu pembayaran yang ditentukan dalam objek.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

Pelajari lebih lanjut PaymentRequest.canMakePayment() di MDN

Metode show()

Setelah menetapkan dua parameter dan membuat objek request seperti yang ditunjukkan di atas, Anda dapat memanggil metode show(), yang menampilkan pengguna aplikasi pembayaran dalam antarmuka berbasis web yang sederhana.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

Tampilan antarmuka pengguna aplikasi pembayaran sepenuhnya bergantung pada aplikasi pembayaran penyedia layanan. Setelah pelanggan setuju untuk melakukan pembayaran, objek JSON akan diteruskan kepada penjual yang berisi semua informasi yang diperlukan untuk mentransfer uang. Penjual kemudian dapat mengirimkannya ke PSP untuk memproses pembayaran.

Terakhir, Anda dapat menutup UI Permintaan Pembayaran dengan menyelesaikan proses menggunakan response.complete('success') atau response.complete('fail') bergantung pada yang ditampilkan oleh PSP.

Berikutnya

Pelajari lebih lanjut Pembayaran Web.