Dapatkan info terbaru tentang yang baru di Web Payments.
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 segera hadir Firefox. Jika Anda baru menggunakan Pembayaran Web, lihat "Ringkasan Pembayaran Web" untuk memulai.
Sejak peluncuran Payment Request API dan Payment Handler API, telah ada beberapa perubahan yang dibuat pada spesifikasinya masing-masing. Perubahan ini tidak akan merusak kode yang berfungsi, tetapi sebaiknya Anda memperhatikannya. Postingan ini merangkum update tersebut dan akan terus mengumpulkan perubahan API tersebut.
Metode baru: hasEnrolledInstrument()
Di Payment Request API versi sebelumnya, canMakePayment() digunakan
untuk memeriksa keberadaan instrumen pembayaran pengguna. Dalam update spec
terbaru, canMakePayment() telah diganti dengan
hasEnrolledInstrument()
tanpa mengubah fungsinya.
Metode hasEnrolledInstrument()
memiliki konsensus dari semua browser utama.
Chrome telah menerapkannya di versi 74 dan Webkit
serta Gecko memiliki bug
pelacakan, tetapi belum menerapkan metode ini sejak 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() kini menangani pemeriksaan instrumen pembayaran
pengguna,
canMakePayment()
telah diperbarui untuk hanya memeriksa ketersediaan aplikasi pembayaran.
Perubahan pada canMakePayment() ini terikat pada implementasi
hasEnrolledInstrument(). Mulai Juni 2019, fitur 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
lain (seperti Google Pay) tidak 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 jumlah akhir
diketahui. Penjual memiliki waktu sepuluh detik untuk me-resolve detailsPromise sebelum
waktu tunggu habis. Fitur ini ditujukan untuk perjalanan bolak-balik sisi server yang cepat.
Fitur ini telah diluncurkan 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 me-resolve ke
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));
});
Peningkatan pengembangan lokal
Chrome 76 menambahkan dua peningkatan kecil untuk produktivitas developer. Jika lingkungan pengembangan lokal Anda menggunakan sertifikat yang ditandatangani sendiri, kini Anda dapat menggunakan flag command line --ignore-certificate-errors untuk membuat Chrome mengizinkan Web Payments API di lingkungan pengembangan Anda. Jika Anda mengembangkan menggunakan server web lokal
yang tidak mendukung HTTPS, Anda juga dapat menggunakan
tanda --unsafely-treat-insecure-origin-as-secure=<origin> untuk membuat Chrome memperlakukan
origin HTTP sebagai HTTPS.