Permintaan Pembayaran API Browser Standar

Apakah Anda tahu bahwa banyak browser modern memiliki API bawaan yang disebut Permintaan Pembayaran? API ini dijelaskan dalam standar W3C, yang bertujuan untuk mendukung pekerjaan dengan informasi penagihan dan kontak. Berikut ini adalah ikhtisar standar pada developers.google.com. Tinjauan implementasi API ini di situs web MDN menunjukkan bahwa Permintaan Pembayaran memberikan alat peramban pengembang yang memungkinkan pengguna untuk mengaitkan sistem dan platform pembayaran pilihan mereka dengan toko online. Ini meningkatkan kenyamanan melakukan pembayaran untuk barang dan jasa, mempercepat dan menyederhanakan proses ini. Khususnya, misalnya, API Permintaan Pembayaran memungkinkan pengguna memasukkan data dan alamat pembayaran hanya sekali, dan tidak memasukkan informasi yang sama di setiap situs. Pembayaran di semua situs yang mendukung API ini akan terlihat sama untuk pengguna. API Permintaan Pembayaran memiliki fitur berharga lainnya. Diantaranya - memecahkan masalah dengan ketersediaan alat pembayaran untuk pengguna penyandang cacat, sinkronisasi data pembayaran antara perangkat pengguna yang berbeda, alat penanganan kesalahan standar.



Bahan, terjemahan yang kami terbitkan hari ini, dikhususkan untuk demonstrasi penggunaan praktis Permintaan Pembayaran API. Segera perlu dicatat bahwa API Permintaan Pembayaran adalah teknologi eksperimental yang mungkin berubah di masa mendatang. Namun, penulis materi ini mengatakan bahwa, meskipun demikian, ia layak untuk berkenalan dengannya. Dia yakin bahwa teknologi ini memiliki masa depan yang cerah, dan bahwa perubahan yang dapat dibuat untuk itu tidak akan mempengaruhi prinsip-prinsip dasar bekerja dengannya terlalu banyak.

Dasar-dasarnya

Adopsi yang luas dari API Permintaan Pembayaran akan menguntungkan semua orang yang terlibat dalam pembuatan dan penggunaan sistem pembayaran online. Khususnya, untuk programmer dan pemilik situs web, ini berarti memfasilitasi penciptaan sistem penerimaan pembayaran, dan bagi pengguna, menyederhanakan dan mempercepat proses pembayaran untuk barang dan jasa.

Untuk menggunakan API ini dalam JavaScript, Anda harus terlebih dahulu membuat objek PaymentRequest . Perintah untuk membuatnya terlihat seperti ini:

 new PaymentRequest(methodData: fn, details: fn, options?); 

Konstruktor PaymentRequest melewati dua parameter yang diperlukan dan satu opsional:

• Parameter methodData adalah array objek yang berisi informasi tentang penyedia layanan pembayaran. Ini, misalnya, adalah informasi tentang metode pembayaran yang didukung.
• Parameter details adalah objek yang berisi informasi tentang pembayaran tertentu. Misalnya, jumlah total pembayaran, jumlah pajak, biaya pengiriman.
• Parameter options , opsional, adalah objek yang berisi informasi pembayaran tambahan.

Anda dapat menemukan informasi dalam dokumentasi dengan MDN bahwa API Permintaan Pembayaran hanya dapat digunakan menggunakan HTTPS. Ini cukup jelas mengingat apa yang bekerja dengan API ini.

Seperti inilah interaksi pengguna dengan API Permintaan Pembayaran.


Menggunakan API Permintaan Pembayaran

Seperti yang Anda lihat, sistem pembayaran terintegrasi langsung ke dalam browser. Ini berarti bahwa Anda tidak perlu menggunakan operasi pengalihan yang tidak aman untuk menyelesaikan pembayaran, Anda juga tidak perlu menggunakan API eksternal. Semuanya terjadi langsung di browser.

Berikut adalah proyek di mana implementasi layar disajikan, menunjukkan kepada pengguna daftar data kartu pembayaran yang disimpan.


Kartu Tersimpan

Pertimbangkan contoh praktis bekerja dengan API Permintaan Pembayaran.

Tinjauan Proyek

Jika Anda ingin bereksperimen dengan proyek Anda sendiri, yang akan kami analisis, Anda dapat menjalankan perintah berikut:

 git clone https://github.com/indreklasn/payments-request-api-example.git && yarn && yarn start 

Ini mengkloning repositori yang sesuai, menginstal dependensi proyek, dan memulai server, tersedia di localhost:3000 . Harap dicatat bahwa aplikasi yang dipertimbangkan diluncurkan di sistem lokal untuk tujuan penelitian.

Halaman utama aplikasi ini sangat sederhana. Ini meniru sebuah fragmen dari antarmuka toko online yang memungkinkan Anda untuk "memasukkan keranjang" produk tertentu. Untuk memulai proses checkout, klik tombol BUY .


Halaman aplikasi

Kami berurusan dengan aplikasi yang sangat sederhana. Oleh karena itu, kami dapat menempatkan semua logika yang terkait dengan antarmuka "toko online" dan pembayaran di file app.js :

 let count = 0 const cartIncrementButton = document.getElementById('cartIncrement') const cartDecrementButton = document.getElementById('cartDecrement') const countElement = document.getElementById('count') const buyButton = document.getElementById('purchase') function init() {   countElement.innerHTML = count  cartIncrementButton.addEventListener('click', () => {    count++    countElement.innerHTML = `${count}$`  })   cartDecrementButton.addEventListener('click', () => {    if (count === 0) return    count--    countElement.innerHTML = `${count}$`  }) } init() 

Di sini kita mendapatkan tautan ke elemen DOM, khususnya, tombol untuk menambah dan mengurangi jumlah "barang", dan kami melampirkan penangan acara kepada mereka. Jumlah total ditampilkan dalam elemen halaman yang sesuai.

Tombol cartIncrementButton dari kode kami dapat dibayangkan sebagai tombol yang memungkinkan Anda untuk menambahkan beberapa produk ke keranjang. Tombol cartDecrementButton memungkinkan cartDecrementButton untuk menghapus barang dari keranjang, dan di elemen countElement , harga semua barang yang dimasukkan ke dalam keranjang ditampilkan.

Penerapan sistem pembayaran

Kode berikut juga masuk ke app.js Ini adalah implementasi event handler yang terjadi ketika Anda mengklik tombol BUY (disebut buyButton dalam kode):

 buyButton.addEventListener('click', () => {   const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  ); }) 

Setelah pengguna mengklik tombol BUY , kami membuat instance objek PaymetnRequest . Kami menggunakan di sini beberapa fungsi yang mengembalikan apa yang perlu diteruskan ke konstruktor objek. Ini adalah fungsi buildSupportedPaymentMethodData dan buildShoppingCartDetails .

Argumen pertama ke konstruktor diwakili oleh panggilan ke fungsi buildSupportedPaymentMethodData . Ini mengembalikan berbagai objek yang didukung metode pembayaran. Fungsi ini dideklarasikan di app.js :

 function buildSupportedPaymentMethodData() {  //    :  return [{    supportedMethods: 'basic-card',    data: {      supportedNetworks: ['visa', 'mastercard'],      supportedTypes: ['debit', 'credit']    }  }]; 

Argumen kedua ke konstruktor, buildShoppingCartDetails , adalah panggilan fungsi yang menghasilkan informasi yang diperlukan untuk menyelesaikan pembelian.

Informasi ini dapat mencakup, misalnya, deskripsi barang yang dibeli, nilainya, jumlah total pembelian. Kode untuk fungsi buildShoppingCartDetails juga ada di app.js :

 function buildShoppingCartDetails() {  return {    id: 'count-order',    displayItems: [      {        label: 'Example item',        amount: {currency: 'USD', value: '1.00'}      }    ],    total: {      label: 'Total',      amount: {currency: 'USD', value: count }    }  }; } 

Perhatikan bahwa fungsi ini mengembalikan objek, bukan array objek.

Sekarang kami siap menunjukkan jendela kepada pengguna untuk melakukan pembayaran. Panggil metode .show() dari objek request . Panggilan ini akan mengembalikan janji. Jika Anda tidak terbiasa dengan janji, lihat materi ini . Kode, sekali lagi, ada di app.js :

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(    buildSupportedPaymentMethodData(),    buildShoppingCartDetails()  );  request.show().then(paymentResponse => {    console.log(paymentResponse)  }) }) 

Akibatnya, setelah kita menekan tombol BUY , kita akan melihat apa yang ditunjukkan pada gambar berikut.


Pertimbangan Pembayaran Pengguna

Pada langkah ini, Anda mungkin perlu menambahkan informasi kartu bank ke sistem. Saya sarankan menggunakan kartu tes VISA di sini. Masukkan nomor kartu, nama dan alamat Anda di kolom yang sesuai. Kami hanya menguji API, sehingga data yang dimasukkan mungkin tidak nyata.


Nomor Kartu Tes Visa


Masukkan detail kartu

Pemrosesan pembayaran

Setelah kami memasukkan informasi kartu ke dalam sistem dan mengkonfirmasi pembayaran, kami mendapatkan objek PaymentResponse dikembalikan dari janji.

Kami memanggil metode .complete () untuk memberi tahu pengguna bahwa semuanya berjalan sebagaimana mestinya. Begini tampilannya dalam kode:

 buyButton.addEventListener('click', () => {  const request = new PaymentRequest(buildSupportedPaymentMethodData(), buildShoppingCartDetails());  request.canMakePayment().then(result => {    if (result) {      request.show().then(paymentResponse => {        console.log(paymentResponse.details)        //    . ,   ,     ,    .        paymentResponse.complete('success')          .then(() => thankYouMessage.style.opacity = 1)      })    }     }) }) 

Itu saja! Kami baru saja memeriksa kode yang diperlukan untuk mengimplementasikan keranjang paling sederhana dari sebuah toko online.

Berikut ini adalah demonstrasi lengkap dari aplikasi tersebut.


Demonstrasi Aplikasi

→ Di sini Anda dapat menemukan kode sumber proyek.

Tentang dukungan untuk browser API Permintaan Pembayaran

Berikut adalah informasi dukungan untuk API Permintaan Pembayaran dengan caniuse.com.


Browser mana yang mendukung API Permintaan Pembayaran?

Seperti yang Anda lihat, API ini relatif baru, sehingga belum memiliki dukungan browser yang sangat luas. Hal baiknya adalah didukung oleh Chrome, Safari, Firefox, dan Edge. Anda mungkin menggunakan setidaknya satu dari browser ini, sehingga Anda dapat dengan mudah mengalami semua yang kita bicarakan di atas.

Perlu dicatat bahwa sangat jelas bahwa di bidang dukungan untuk browser API Permintaan Pembayaran masih banyak pekerjaan yang harus dilakukan. Ini terutama berlaku untuk peramban seluler. Karena itu, jika saya menggunakan API ini sekarang, saya tidak akan mengandalkan kerjanya pada perangkat seluler sejauh ini.

Ringkasan

API Permintaan Pembayaran memiliki setiap peluang untuk menjadi teknologi yang umum dan populer. Karena itu, jika teknologi ini menarik minat Anda - di sini , di sini , di sini dan di sini - materi yang dapat membantu Anda lebih memahaminya.

Pembaca yang budiman! Apakah Anda mempertimbangkan untuk menggunakan API Permintaan Pembayaran dalam proyek Anda?