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

Eiji Kitamura
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 sunmak istediğiniz durumlar olabilir. Bunu başarmak için PaymentDetailsModifier özelliğini kullanabilirsiniz.

PaymentRequest oluşturucunun ikinci bağımsız değişkenine modifiers özelliğini, bir PaymentDetailsModifier nesnesi dizisiyle birlikte ekleyin. Bu, müşterinin istediği ödeme yöntemine bağlı olarak görüntülü reklam öğelerinin ve toplamın nasıl değiştirilmesi gerektiğini belirten bildirimsel kurallardır.

Aşağıdaki örnekte, bir kullanıcıdan kredi kartıyla ödeme yapmayı tercih ettiği için 3 ABD doları işlem ücreti alınacağını nasıl bildirdiğ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, kullanıcılar kredi kartıyla ödeme yapmaya karar vermeden önce, toplam fiyatı 71,00 ABD doları olan 3 ABD doları ücret içeren "İşlem ücreti" adlı bir ek görüntülü reklam öğesi görür.

PaymentDetailsModifier şu parametreleri içerir:

Mülk adı
supportedMethods Bu kuralın hangi ödeme yönteminin geçerli olduğunu belirtin.
additionalDisplayItems İndirim veya ekstra ödeme eklemek istediğiniz ilave görüntülü reklam öğeleri.
total additionalDisplayItems eklendikten sonraki toplam fiyat.
data basic-card ödemesinde bu, supportedTypes ile belirli kart türlerini filtrelemenin bir yolu olarak kullanılır. Aksi takdirde, bu parametrenin kullanımı ödeme yöntemine (ödeme uygulaması) bağlıdır. Her ödeme yönteminin sağladığı belgeleri inceleyin.

modifiers için toplam fiyat sabit olamayacağı ve dinamik değişiklik gerektirdiği için gönderim seçenekleri olduğunda işler biraz karışabilir.

Bunu sağlamak için shippingaddresschange ve shippingoptionchange etkinliğinde modifiers mülkünün additionalDisplayItems ve total değerlerini PaymentDetails nesnesinin displayItems özelliğinde yaptığınız gibi değiştirirsiniz.

supportedMethods özelliği artık bir dize alıyor

PaymentMethodData nesnesindeki (PaymentRequest oluşturucunun ilk bağımsız değişkeni) supportedMethods özelliği, ödeme yöntemi belirten bir dize dizisi alıyor. Şu anda tek bir dizeyi bağımsız değişken olarak alıyor.

Dizi verme işleminin şimdilik devam edeceğini unutmayın.

Yapılmaması gerekenler

Eskidir. Şu an için çalışmaya devam eder.

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

Yeni-yeni yöntem.

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

Chrome 61

Temel kartta supportedTypes mevcut

supportedMethods "basic-card" olduğunda artık "credit", "debit" ve "prepaid" arasında hangi tür kartların desteklendiğini belirtmek için supportedTypes girebilirsiniz.

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

Bu filtreleme, kaynağın nereden alındığına bağlı olarak mükemmel çalışmayabilir.

Chrome 57

PaymentRequest artık iframe'lerin içinde kullanılabilir

Ödeme İsteği API'si 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ı" destekler

PaymentRequest() oluşturucunun ilk bağımsız değişkeni, bir ödeme yöntemi verileri dizisidir. PaymentMethodData biçimi bu sürümde değiştirildi.

Yapılmaması gerekenler

Eskidir. Şu an için çalışmaya devam eder.

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 özelliğinin biçimi, supportedMethods içindeki değere ve Temel Kart spesifikasyonuna dayanır. Spesifikasyonda credit, debit veya prepaid kabul eden supportedTypes özelliği bulunduğunu ancak Chrome 57'nin bu özelliği yoksaydığını 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 bilgilerinin bir parçası olarak fiyatın henüz tam olarak belirlenmediğini belirtmek için pending ekleyebilirler. pending alanında boole değeri kabul edilir.

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

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

requestPayerName

Geliştiriciler, gönderim seçeneğinin (PaymentRequest için üçüncü bağımsız değişken) bir parçası olarak, ödeme yapanın adını gönderim adresi bilgilerinden ayrı olarak istemek için requestPayerName öğesini ekleyebilir. requestPayerName, boole değeri kabul eder.

shippingType

Geliştiriciler, gönderim seçeneğinin bir parçası olarak (PaymentRequest için üçüncü bağımsız değişken), kullanıcı arayüzünde "gönderim" yerine "teslimat" veya "teslim alma" ifadelerini göstermesini istemek için artık shippingType öğesini ekleyebilir. shippingType; shipping (varsayılan), delivery veya pickup dizelerini kabul eder.

shippingType=&#39;delivery&#39;
shippingType="delivery"
shippingType=&#39;pickup&#39; [teslim alma]
shippingType="pickup"

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

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

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

canMakePayment

API 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 ekleyebileceklerinden 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.
     });
}