Ringkasan Payment Request API

Eiji Kitamura

Saat pelanggan mencoba membeli sesuatu dari situs Anda, situs harus meminta pelanggan untuk memberikan informasi pembayaran dan, secara opsional, informasi lain seperti preferensi pengiriman. Anda dapat melakukannya dengan cepat menggunakan Payment Request API (PR API).

Struktur pembayaran dasar

Untuk membuat objek PaymentRequest, diperlukan dua parameter: metode pembayaran dan detail pembayaran. Selain itu, parameter opsi pembayaran ketiga bersifat opsional. Permintaan dasar dapat dibuat seperti ini:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Lihat cara setiap parameter dibuat dan digunakan.

Metode pembayaran

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

Untuk supportedMethods, penjual harus menentukan ID Metode Pembayaran 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. Atribut ini berisi nilai wajib total, yang menentukan total jumlah yang harus dibayar dari pelanggan. Parameter ini juga dapat mencantumkan item yang dibeli secara opsional.

Dalam contoh berikut, daftar item yang dibeli opsional (hanya satu item, dalam kasus ini) ditampilkan, begitu juga dengan total jumlah yang harus dibayar. Dalam kedua kasus tersebut, unit mata uang ditentukan dengan setiap 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 apakah metode pembayaran tersedia

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

Untuk memeriksa apakah pengguna dan lingkungan siap melakukan pembayaran, panggil canMakePayment() sebelum memanggil prosedur pembayaran. Memanggil canMakePayment() akan menampilkan true jika browser mendukung setidaknya satu metode 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, Anda dapat memanggil metode show(), yang menampilkan antarmuka pengguna aplikasi pembayaran.

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

Tampilan antarmuka pengguna aplikasi pembayaran sepenuhnya bergantung pada penyedia aplikasi pembayaran. Setelah pelanggan menyetujui untuk melakukan pembayaran, objek JSON akan diteruskan ke penjual yang berisi semua informasi yang diperlukan untuk mentransfer uang. Kemudian, penjual 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 hasil yang ditampilkan PSP.

Berikutnya

Pelajari lebih lanjut Pembayaran Web.