Web Payments'taki yeniliklerden haberdar olun.
Web Payments, 2016'dan beri tarayıcılarda herkesin kullanımına sunulmuştur. Temel özellik olan Payment Request API artık Chrome, Safari, Edge ve yakında Firefox'ta olmak üzere birden çok tarayıcıda kullanılabilir. Web Payments'ta yeniyseniz başlamak için "Web Payments Genel Bakış"a göz atın.
Payment Request API ve Payment Handler API'nin kullanıma sunulmasından bu yana ilgili spesifikasyonlarda epey değişiklik yapıldı. Bu değişiklikler çalışma kodunuzu bozmaz ancak bu değişikliklere dikkat etmenizi öneririz. Bu gönderide bu güncellemeler özetlenmektedir ve API değişiklikleri birikmeye devam edecektir.
Yeni yöntem: hasEnrolledInstrument()
Ödeme İsteği API'sinin önceki sürümünde canMakePayment(), kullanıcının ödeme aracının bulunup bulunmadığını kontrol etmek için kullanılıyordu. Yakın zamanda spesifikasyonda yapılan bir güncellemede canMakePayment(), işlevi değiştirilmeden hasEnrolledInstrument() ile değiştirildi.
hasEnrolledInstrument() yöntemi tüm önde gelen tarayıcılardan fikir birliği alır.
Chrome, sürüm 74'te uygulamıştır ve hem Webkit hem de Gecko'da izleme hataları bulunur ancak Haziran 2019 itibarıyla bu yöntemi henüz uygulamamıştır.
Yeni hasEnrolledInstrument() yöntemini kullanmak için aşağıdaki gibi görünen kodu değiştirin:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
Kod aşağıdaki gibi görünür:
// 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 araç varlığını kontrol etmiyor
hasEnrolledInstrument() artık kullanıcının ödeme aracını kontrol etme işlemini gerçekleştirdiğinden canMakePayment(), yalnızca ödeme uygulamasının kullanılabilirliğini kontrol edecek şekilde güncellendi.
canMakePayment() için yapılan bu değişiklik hasEnrolledInstrument() uygulamasına bağlıdır. Haziran 2019 itibarıyla bu özellik Chrome 74'te uygulanmış olup diğer tarayıcılarda uygulanmamıştır. Kullanmaya çalışmadan önce hasEnrolledInstrument() yönteminin kullanıcının tarayıcısında kullanılabilir olup olmadığı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.");
}
basic-card ödeme yönteminden languageCode kaldırıldı
PaymentAddress.languageCode, basic-card için gönderim adreslerinden ve fatura adreslerinden kaldırıldı. Google Pay gibi diğer ödeme yöntemlerinin fatura adresleri etkilenmez.
Bu değişiklik Chrome 74, Firefox ve Safari sürümlerinde uygulanmıştır.
PaymentRequest.show() artık isteğe bağlı detailsPromise gerektiriyor
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ına uğramadan önce detailsPromise sorununu çözmesi için on saniyesi vardır. Bu özellik, sunucu tarafında hızlı bir gidiş dönüş için tasarlanmıştır.
Bu özellik Chrome 75 ve Safari sürümlerinde 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()
Payment Handler API özelliği PaymentRequestEvent.changePaymentMethod(), ödeme işleyicilere (ör. Google Pay) kullanarak onpaymentmethodchange etkinlik işleyiciyi tetikleyin. changePaymentMethod(), güncellenmiş fiyat bilgileriyle (ör. vergi yeniden hesaplaması) satıcı yanıtına çözüm getiren bir söz verir.
Hem PaymentRequestEvent.changePaymentMethod() hem de paymentmethodchange etkinliği Chrome 76'da kullanılabilir ve Webkit, Teknoloji Önizlemesi'nde paymentmethodchange etkinliğini uygulamıştır.
// 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ştirilmiş yerel geliştirme
Chrome 76, geliştirici üretkenliği için iki küçük iyileştirme ekler. Yerel geliştirme ortamınız kendinden imzalı sertifika kullanıyorsa artık Chrome'un, geliştirme ortamınızdaki Web Payments API'lerine izin vermesi için --ignore-certificate-errors komut satırı işaretini kullanabilirsiniz. HTTPS'yi desteklemeyen bir yerel web sunucusu kullanarak geliştirme yapıyorsanız Chrome'un HTTP kaynağını HTTPS olarak işlemesi için --unsafely-treat-insecure-origin-as-secure=<origin> işaretini de kullanabilirsiniz.