Ödeme isteği API'sindeki değişiklikler

Chrome 62

PaymentDetailsModifier artık kullanılabilir

Ödeme isteğinde, müşterinin seçtiği ödeme yöntemine bağlı olarak indirim veya ek ücret uygulamak istediğiniz durumlar olabilir. Bunu yapmak için kullanabileceğiniz özellik PaymentDetailsModifier'tür.

PaymentRequest yapıcısının ikinci bağımsız değişkenine modifiers mülkünü ve müşterinin tercih ettiği ödeme yöntemine bağlı olarak görüntüleme öğelerinin ve toplamın nasıl değiştirilmesi gerektiğine dair açıklayıcı kurallar olan bir PaymentDetailsModifier nesnesi dizisi ekleyin.

Aşağıdaki örnekte, bir kullanıcının kredi kartı ödemesi seçmesi durumunda 3 ABD doları işlem ücreti alınacağını nasıl beyan edeceğiniz gösterilmektedir.

let methods = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard']
   supportedTypes: ['credit', 'debit']
 }
}];

let details = {
 displayItems: [{
   label: 'T-shirt',
   amount: { currency: 'USD', value: '68.00' }
 }],
 total: {
   label: 'Total price',
   amount: { currency: 'USD', value: '68.00' }
 },
 modifiers: [{
   supportedMethods: 'basic-card',
   data: {
     supportedTypes: ['credit']
   },
   additionalDisplayItems: [{
     label: 'Processing fee',
     amount: { currency: 'USD', value: '3.00' }
   }],
   total: {
     label: 'Credit card price',
     amount: {currency: USD, value: 71.00}}
 }]
};

let options = {};

let request = new PaymentRequest(methods, details, options);

Gerçek ödeme isteği sayfasında, kullanıcı kredi kartı ödemesini seçer seçmez 3 ABD doları tutarındaki "İşleme ücreti" adlı ek bir ödeme öğesi görür.Bu öğenin toplam fiyatı 71,00 ABD dolarıdır.

PaymentDetailsModifier aşağıdaki parametreleri içerir:

Mülk adı
supportedMethods Bu kuralın hangi ödeme yöntemi için geçerli olacağını belirtin.
additionalDisplayItems İndirim veya ek ücret eklemek istediğiniz ek görüntüleme öğeleri.
total additionalDisplayItems eklendikten sonraki toplam fiyat.
data basic-card ödemesi için bu, supportedTypes ile belirli kart türlerini filtrelemek için kullanılır. Aksi takdirde bu parametrenin kullanımı ödeme yöntemine (ödeme uygulaması) bağlıdır. Her ödeme yönteminin sağladığı dokümanlara bakın.

Gönderim seçenekleri olduğunda işler biraz karmaşıklaşır. Çünkü modifiers toplam fiyatı statik olamaz ve dinamik olarak değiştirilmesi gerekir.

Bunu yapmak için PaymentDetails nesnesinin displayItems mülkünde yaptığınız gibi modifiers mülkünün shippingaddresschange ve shippingoptionchange etkinliği üzerine additionalDisplayItems ve total özelliklerini değiştirirsiniz.

supportedMethods mülkü artık bir dize alıyor

PaymentMethodData nesnesinde supportedMethods mülkü (PaymentRequest kurucusunun ilk bağımsız değişkeni), bir ödeme yöntemini belirten bir dize dizisi alıyordu. Artık bağımsız değişken olarak tek bir dize alıyor.

Bir dizi sağlamanın şimdilik çalışmaya devam edeceğini unutmayın.

Yapılmaması gerekenler:

Eski - Hâlâ çalışıyor.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: ['https://bobpay.xyz']
}];
Yapılması gerekenler

Yeni - yeni yol.

var methodData = [{
     supportedMethods: 'basic-card',
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}, {
    supportedMethods: 'https://bobpay.xyz'
}];

Chrome 61

Temel kartta supportedTypes kullanılabilir

supportedMethods "basic-card" olduğunda artık supportedTypes değerini sağlayarak "credit", "debit" ve "prepaid" arasında hangi kart türlerinin desteklendiğini belirtebilirsiniz.

var methodData = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
     'diners', 'discover', 'mir', 'unionpay']
   supportedTypes: ['credit', 'debit', 'prepaid']
 }
}];

Bu filtreleme, kaynağına bağlı olarak mükemmel şekilde çalışmayabileceğinden kart türünü ödeme ağ geçidinizde tekrar kontrol edin.

Chrome 57

PaymentRequest artık iframe'lerde kullanılabilir

Payment Request API artık iframe öğesine allowpaymentrequest özelliği eklenerek bir iframe içinden çağrılabilir.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData, "basic-card"ı destekler

PaymentRequest() yapıcısının ilk bağımsız değişkeni, ödeme yöntemi verilerinden oluşan bir dizidir. Bu sürümde PaymentMethodData biçimi değiştirildi.

Yapılmaması gerekenler:

Eski - Hâlâ çalışıyor.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);
Yapılması gerekenler

Yeni: Yeni yapı.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay']
     }
}];
var request = new PaymentRequest(methodData, details, options);

data mülkünün biçimi, supportedMethods'daki değere bağlıdır ve Temel Kart spesifikasyonuna dayanır. Spesifikasyonun credit, debit veya prepaid değerini kabul eden supportedTypes özelliğini içerdiğini ancak Chrome 57'nin bu özelliği göz ardı ettiğini ve supoprtedNetworks içindeki tüm değerleri kredi kartı olarak değerlendirdiğini unutmayın.

var methodData = [{
     supportedMethods: ['basic-card'],
     data: {
       supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
         'diners', 'discover', 'mir', 'unionpay'],
       supportedTypes: ['credit'] <= not available
     }
}];

Chrome 56

beklemede

Geliştiriciler, ödeme öğesi bilgileri kapsamında, fiyatın henüz tam olarak belirlenmediğini belirtmek için pending ekleyebilir. pending alanı bir boole değeri kabul eder.

    {
      label: "State tax",
      amount: { currency: "USD", value : "5.00" },
      pending: true
    },

Bu, genellikle kargo adresi veya kargo seçeneklerinin seçimine bağlı olan kargo veya vergi tutarları gibi satır öğelerini göstermek için kullanılır. Chrome, ödeme isteği için kullanıcı arayüzünde bekleyen alanları gösterir.

requestPayerName

Geliştiriciler artık kargo seçeneği (PaymentRequest için üçüncü bağımsız değişken) kapsamında requestPayerName ekleyebilir ve böylece ödeme yapan kullanıcının adını kargo adresi bilgilerinden ayrı olarak isteyebilir. requestPayerName bir boole değeri kabul eder.

shippingType

Gönderim seçeneği (PaymentRequest için üçüncü bağımsız değişken) kapsamında geliştiriciler artık kullanıcı arayüzünde "gönderim" yerine "teslimat" veya "teslimat noktası" ifadesinin gösterilmesini istemek için shippingType ekleyebilir. shippingType, shipping (varsayılan), delivery veya pickup dizelerini kabul eder.

shippingType=&#39;delivery&#39;
shippingType="delivery"
shippingType=&#39;pickup&#39;
shippingType="pickup"

PaymentResponse ve PaymentAddress için kullanılabilen serileştirme işlevleri

PaymentResponse nesnesi ve PaymentAddress nesnesi artık JSON olarak serileştirilebilir. Geliştiriciler, toJSON() işlevini çağırarak bir toDict() işlevi oluşturmaktan kaçınabilir ve toJSON() işlevini JSON nesnesine dönüştürebilir.

request.show().then(response => {
     let res = response.toJSON();
});

canMakePayment

API'nin kullanılabilirliğine ek olarak, Payment Request API'yi çağırmadan önce kullanıcının etkin bir ödeme yöntemi olup olmadığını kontrol edebilirsiniz. Kullanıcılar ödeme kullanıcı arayüzünde yeni ödeme yöntemi eklemeye devam edebileceğinden bunun isteğe bağlı olduğunu unutmayın.

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
     request.canMakePayment().then(result => {
       if (result) {
         // Payment methods are available.
       } else {
         // Payment methods are not available, but users can still add
        // a new payment method in Payment UI.
       }
     }).catch(error => {
       // Unable to determine.
     });
}