Ikuti terus info terbaru tentang Pembayaran Web.
Pembayaran Web telah tersedia secara publik di browser sejak tahun 2016. Fitur inti—Payment Request API—kini tersedia di beberapa browser: Chrome, Safari, Edge, dan yang akan datang di Firefox. Jika Anda baru mengenal Pembayaran Web, lihat "Ringkasan Pembayaran Web" untuk memulai.
Sejak peluncuran Payment Request API dan Payment Handler API, ada beberapa perubahan yang dibuat pada spesifikasinya masing-masing. Perubahan ini tidak akan merusak kode yang berfungsi, tetapi sebaiknya Anda waspada. Postingan ini merangkum update tersebut dan akan terus mengakumulasi perubahan API tersebut.
Metode baru: hasEnrolledInstrument()
Pada Payment Request API versi sebelumnya, canMakePayment() digunakan
untuk memeriksa keberadaan instrumen pembayaran pengguna. Dalam update
spesifikasi terbaru, canMakePayment() telah diganti dengan
hasEnrolledInstrument()
tanpa mengubah fungsinya.
Metode hasEnrolledInstrument()
memiliki konsensus dari semua browser utama.
Chrome telah menerapkannya dalam versi 74 dan Webkit
serta Gecko memiliki bug
pelacakan, tetapi belum menerapkan metode tersebut hingga Juni 2019.
Untuk menggunakan metode hasEnrolledInstrument() baru, ganti kode yang terlihat seperti
ini:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
Dengan kode yang terlihat seperti ini:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment() tidak lagi memeriksa keberadaan instrumen
Karena hasEnrolledInstrument() sekarang menangani pemeriksaan instrumen pembayaran
pengguna,
canMakePayment()
telah diupdate agar hanya memeriksa ketersediaan aplikasi pembayaran.
Perubahan pada canMakePayment() ini terikat dengan implementasi
hasEnrolledInstrument(). Mulai Juni 2019, implementasi ini diterapkan di Chrome 74, tetapi
tidak di browser lain. Pastikan untuk memeriksa apakah metode hasEnrolledInstrument()
tersedia di browser pengguna sebelum mencoba menggunakannya.
// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
// `canMakePayment()` behavior change corresponds to
// `hasEnrolledInstrument()` availability.
request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
console.log("Cannot check for payment app availability without checking for instrument presence.");
}
languageCode dihapus dari metode pembayaran basic-card
PaymentAddress.languageCode telah dihapus dari alamat pengiriman dan
alamat penagihan untuk basic-card. Alamat penagihan metode pembayaran lainnya (seperti Google Pay) tidak akan terpengaruh.
Perubahan ini telah diterapkan di Chrome 74, Firefox, dan Safari.
PaymentRequest.show() kini menggunakan detailsPromise opsional
PaymentRequest.show()
memungkinkan penjual menampilkan UI permintaan pembayaran sebelum total akhir
dapat diketahui. Penjual memiliki waktu sepuluh detik untuk me-resolve detailsPromise sebelum
waktu tunggu. Fitur ini ditujukan untuk perjalanan bolak-balik sisi server yang cepat.
Fitur ini telah tersedia di Chrome 75 dan Safari.
// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
return;
}
// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
// Find out the exact total amount and call
// `resolveDetailsPromise(details)`.
// Use a 3 second timeout as an example.
window.setTimeout(function() {
resolveDetailsPromise(details);
}, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);
PaymentRequestEvent.changePaymentMethod()
Fitur Payment Handler API
PaymentRequestEvent.changePaymentMethod()
memungkinkan pengendali pembayaran (misalnya, Google Pay) untuk memicu
pengendali peristiwa
onpaymentmethodchange. changePaymentMethod() menampilkan promise yang di-resolve menjadi
respons
penjual
dengan informasi harga yang diperbarui (misalnya, penghitungan ulang pajak).
Peristiwa PaymentRequestEvent.changePaymentMethod() dan paymentmethodchange
tersedia di Chrome 76 dan Webkit telah menerapkan
peristiwa paymentmethodchange dalam Pratinjau
Teknologinya.
// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
if (evt.changePaymentMethod === undefined) {
// Not implemented in this version of Chrome.
return;
}
// Notify merchant that the user selected a different payment method.
evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
.then((responseFromMerchant) => {
if (responseFromMerchant === null) {
// Merchant ignored the 'paymentmethodchange' event.
return;
}
handleResponseFromMerchant(responseFromMerchant);
})
.catch((error) => {
handleError(error);
});
}));
});
Contoh penjual:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
Pengembangan lokal yang lebih baik
Chrome 76 menambahkan dua peningkatan kecil untuk produktivitas developer. Jika lingkungan pengembangan lokal
menggunakan sertifikat yang ditandatangani sendiri, Anda kini dapat menggunakan
flag command line --ignore-certificate-errors untuk membuat Chrome mengizinkan Web
Payments API di lingkungan pengembangan. Jika mengembangkan aplikasi menggunakan server web
lokal yang tidak mendukung HTTPS, Anda juga dapat menggunakan
tanda --unsafely-treat-insecure-origin-as-secure=<origin> agar Chrome memperlakukan
asal HTTP sebagai HTTPS.