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

Eiji Kitamura

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 İsteği sayfasında, kredi kartıyla ödeme alır almaz kullanıcı, 3 ABD doları ücret alınan ve toplam fiyatı 71,00 ABD doları olan "İşleme ücreti" adlı ek bir görüntü öğesi görür.

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

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 gerçekleştirmek için modifiers mülkünün additionalDisplayItems ve total özelliklerini shippingaddresschange ve shippingoptionchange etkinliğinde, PaymentDetails nesnesinin displayItems özelliğinde yaptığınız gibi 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.

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

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

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

Chrome 61 sürümü

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']
 }
}];

Kart türünü, ödeme ağ geçidinizle tekrar kontrol ettiğinizden emin olun. Bu filtreleme, nereden geldiğine bağlı olarak düzgün çalışmayabilir.

Chrome 57 sürümü

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, "temel-kart"ı destekliyor

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.

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

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, gönderim seçeneği (PaymentRequest için üçüncü bağımsız değişken) kapsamında artık requestPayerName öğesini ekleyerek gönderim adresi bilgisinden ayrı olarak ödeyenin adını 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.

PaymentResponse ve PaymentAddress için kullanılabilen serileştirici 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 bir ö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.
     });
}