Web Payments API'lerinde yapılan güncellemeler

Web ödemelerindeki yeniliklerden haberdar olun.

Danyao Wang
Danyao Wang
Rouslan Solomakhin
Rouslan Solomakhin

Web ödemeleri, 2016'dan beri tarayıcılarda herkese açık olarak kullanılabilir. 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 büyük tarayıcılar tarafından kabul edilmiştir. 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 aşağıdaki gibi görünen kodu değiştirin:

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

Şuna benzer 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 bu durumdan etkilenmez.

Bu değişiklik Chrome 74, Firefox ve Safari'de uygulandı.

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ü göstermesine 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 tetikler. 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ürecinin yerelleştirilmesi

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 yerel bir web sunucusu kullanıyorsanız Chrome'un HTTP kaynağını HTTPS olarak işlemesini sağlamak için --unsafely-treat-insecure-origin-as-secure=<origin> işaretini de kullanabilirsiniz.