Web Ödemeleri'ndeki yeniliklerden haberdar olun.
Web Ödemeleri, 2016'dan beri tarayıcılarda herkese açık olarak kullanılmaktadır. Temel özellik olan Payment Request API artık Chrome, Safari, Edge ve yakında Firefox'ta kullanılabilir. Web ödemelerinde yeniyseniz başlamak için "Web Ödemelerine Genel Bakış" başlıklı makaleyi inceleyin.
Payment Request API ve Payment Handler API kullanıma sunulduktan sonra, ilgili spesifikasyonlarda oldukça fazla değişiklik yapıldı. Bu değişiklikler, çalışan kodunuzu etkilemeyecek olsa da bu değişikliklere dikkat etmenizi öneririz. Bu yayında bu güncellemeler özetlenmiştir ve API değişiklikleri bu yayında toplanmaya devam edecektir.
Yeni yöntem: hasEnrolledInstrument()
Payment Request API'nin önceki sürümünde, kullanıcının ödeme aracının olup olmadığını kontrol etmek için canMakePayment() kullanılıyordu. Spesifikasyonda yapılan son bir güncellemeyle canMakePayment(), işlevini değiştirmeden hasEnrolledInstrument() ile değiştirildi.
hasEnrolledInstrument() yöntemi tüm başlıca tarayıcıların fikir birliğiyle mevcuttur.
Chrome bu yöntemi 74 sürümünde uyguladı. Hem Webkit hem de Gecko'da izlemeyle ilgili hatalar var ancak Haziran 2019 itibarıyla bu yöntem henüz uygulanmadı.
Yeni hasEnrolledInstrument() yöntemini kullanmak için şuna benzeyen kodu değiştirin:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
Aşağıdaki gibi bir kodla:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment() artık enstrüman olup olmadığını kontrol etmiyor
hasEnrolledInstrument() artık kullanıcının ödeme aracını kontrol ettiğinden, canMakePayment() yalnızca ödeme uygulamasının kullanılabilirliğini kontrol edecek şekilde güncellendi.
canMakePayment() ile ilgili bu değişiklik, hasEnrolledInstrument()'un uygulanmasına bağlıdır. Haziran 2019 itibarıyla bu özellik Chrome 74'te uygulanmaktadır ancak diğer tarayıcılarda uygulanmamaktadır. hasEnrolledInstrument() yöntemini kullanmadan önce kullanıcının tarayıcısında kullanılıp kullanılamadığını kontrol edin.
// 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, basic-card ödeme yönteminden kaldırıldı
PaymentAddress.languageCode, basic-card için kargo adreslerinden ve fatura adreslerinden kaldırıldı. Diğer ödeme yöntemlerinin (ör. Google Pay) fatura adresleri etkilenmez.
Bu değişiklik Chrome 74, Firefox ve Safari'de uygulanmıştır.
PaymentRequest.show() artık isteğe bağlı bir detailsPromise parametresi alıyor
PaymentRequest.show(),
satıcının nihai toplam bilinmeden önce ödeme isteği kullanıcı arayüzü sunmasına
olanak tanır. Satıcının, zaman aşımı yaşanmadan önce detailsPromise sorununu çözmesi için on saniye süre tanınır. Bu özellik, sunucu tarafında hızlı bir gidiş dönüş işlemi için tasarlanmıştır.
Bu özellik Chrome 75 ve Safari'de kullanıma sunulmuştur.
// 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()
Ödeme işleyici API özelliğiPaymentRequestEvent.changePaymentMethod(), ödeme işleyicilerin (ör. Google Pay) onpaymentmethodchange etkinlik işleyicisini tetiklemek için kullanılır. changePaymentMethod(), güncellenmiş fiyat bilgileri (ör. verginin yeniden hesaplanması) içeren bir satıcı yanıtına yönlendiren bir söz döndürür.
Hem PaymentRequestEvent.changePaymentMethod() hem de paymentmethodchange etkinliği Chrome 76'da kullanılabilir. Webkit, paymentmethodchange etkinliğini Teknoloji Önizlemesi'nde uyguladı.
// 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);
});
}));
});
Satıcı örneği:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
Geliştirme sürecini iyileştirme
Chrome 76, geliştirici üretkenliği için iki küçük iyileştirme ekler. Yerel geliştirme ortamınızda kendinden imzalı sertifika kullanılıyorsa Chrome'un geliştirme ortamınızda Web Payments API'lerine izin vermesi için artık --ignore-certificate-errors komut satırı işaretçisini kullanabilirsiniz. HTTPS'yi desteklemeyen bir yerel web sunucusu kullanarak geliştirirseniz Chrome'un, HTTP kaynağını HTTPS olarak işlemesi için --unsafely-treat-insecure-origin-as-secure=<origin> işaretini de kullanabilirsiniz.