Perubahan pada API permintaan pembayaran

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome 62

PaymentDetailsModifier kini tersedia

Dalam permintaan pembayaran, ada kasus saat Anda ingin memberikan diskon atau biaya tambahan, bergantung pada metode pembayaran yang dipilih pelanggan. PaymentDetailsModifier adalah fitur yang dapat Anda gunakan untuk mencapai hal ini.

Tambahkan properti modifiers ke argumen kedua konstruktor PaymentRequest bersama dengan array objek PaymentDetailsModifier yang merupakan aturan deklaratif tentang cara mengubah item tampilan dan total, bergantung pada metode pembayaran pilihan pelanggan.

Contoh berikut menunjukkan cara Anda menyatakan bahwa pengguna akan dikenai biaya pemrosesan sebesar $3 karena memilih pembayaran dengan kartu kredit.

let methods = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard']
   supportedTypes: ['credit', 'debit']
 }
}];

let details = {
 displayItems: [{
   label: 'T-shirt',
   amount: { currency: 'USD', value: '68.00' }
 }],
 total: {
   label: 'Total price',
   amount: { currency: 'USD', value: '68.00' }
 },
 modifiers: [{
   supportedMethods: 'basic-card',
   data: {
     supportedTypes: ['credit']
   },
   additionalDisplayItems: [{
     label: 'Processing fee',
     amount: { currency: 'USD', value: '3.00' }
   }],
   total: {
     label: 'Credit card price',
     amount: {currency: ‘USD’, value: ‘71.00’}}
 }]
};

let options = {};

let request = new PaymentRequest(methods, details, options);

Pada sheet Permintaan Pembayaran yang sebenarnya, segera setelah memilih pembayaran dengan kartu kredit, pengguna akan melihat item tampilan tambahan yang disebut "Biaya pemrosesan" dengan tagihan $3, dengan total harga sebesar $71,00.

PaymentDetailsModifier berisi parameter berikut:

Ketika ada opsi pengiriman, situasi akan menjadi sedikit rumit, karena harga total modifiers tidak boleh statis dan memerlukan modifikasi dinamis.

Untuk mencapainya, Anda akan mengubah additionalDisplayItems dan total properti modifiers pada peristiwa shippingaddresschange dan shippingoptionchange seperti yang Anda lakukan pada properti displayItems objek PaymentDetails.

Properti supportedMethods sekarang menggunakan string

Properti supportedMethods di objek PaymentMethodData (argumen pertama ke konstruktor PaymentRequest) telah mengambil array string yang menunjukkan metode pembayaran. Fungsi ini sekarang menggunakan satu string sebagai argumen.

Perhatikan bahwa memberikan array akan terus berfungsi untuk saat ini.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chrome 61

SupportTypes di kartu dasar tersedia

Jika supportedMethods adalah 'basic-card', Anda kini dapat memberikan supportedTypes untuk menunjukkan jenis kartu yang didukung di antara 'credit',  'debit', dan 'prepaid'.

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

Pastikan untuk memeriksa kembali jenis kartu di gateway pembayaran Anda, karena pemfilteran ini mungkin tidak berfungsi dengan sempurna, bergantung pada asal kartu tersebut.

Chrome 57

PaymentRequest kini tersedia di dalam iframe

Payment Request API kini dapat dipanggil dari dalam iframe dengan menambahkan atribut allowpaymentrequest ke elemen iframe.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData mendukung "kartu dasar"

Argumen pertama untuk konstruktor PaymentRequest() adalah array data metode pembayaran. Format PaymentMethodData telah diubah dalam rilis ini.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

Format properti data bergantung pada nilai dalam supportedMethods dan didasarkan pada spesifikasi Basic Card. Perlu diketahui bahwa spesifikasi menyertakan supportedTypes yang menerima credit, debit, atau prepaid, tetapi Chrome 57 mengabaikan properti ini dan memperlakukan nilai apa pun di supoprtedNetworks sebagai kartu kredit.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chrome 56

tertunda

Sebagai bagian dari informasi item pembayaran, developer dapat menambahkan pending untuk menunjukkan bahwa harga belum sepenuhnya ditentukan. Kolom pending menerima nilai boolean.

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

Kolom ini biasanya digunakan untuk menampilkan item baris, seperti jumlah pajak atau pengiriman yang bergantung pada pemilihan alamat pengiriman atau opsi pengiriman. Chrome menunjukkan kolom tertunda di UI untuk permintaan pembayaran.

requestPayerName

Sebagai bagian dari opsi pengiriman (argumen ketiga untuk PaymentRequest), developer kini dapat menambahkan requestPayerName untuk meminta nama pembayar terpisah dari informasi alamat pengiriman. requestPayerName menerima nilai boolean.

shippingType

Sebagai bagian dari opsi pengiriman (argumen ketiga untuk PaymentRequest), developer kini dapat menambahkan shippingType untuk meminta UI menampilkan "pengiriman" atau "pengambilan", bukan "pengiriman". shippingType menerima string shipping (default), delivery, atau pickup.

Fungsi penserialisasi tersedia untuk PaymentResponse dan PaymentAddress

Objek PaymentResponse dan objek PaymentAddress sekarang dapat diserialisasi JSON. Developer dapat mengonversi satu objek menjadi objek JSON dengan memanggil fungsi toJSON() dan menghindari pembuatan fungsi toDict() yang rumit.

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

Selain ketersediaan API, Anda dapat memeriksa apakah pengguna memiliki metode pembayaran aktif sebelum memanggil Payment Request API. Ingat bahwa ini bersifat opsional karena pengguna tetap dapat menambahkan metode pembayaran baru di UI pembayaran.

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
     request.canMakePayment().then(result => {
       if (result) {
         // Payment methods are available.
       } else {
         // Payment methods are not available, but users can still add
        // a new payment method in Payment UI.
       }
     }).catch(error => {
       // Unable to determine.
     });
}