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.
Eski - Hâlâ çalışıyor.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
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.
Eski - Hâlâ çalışıyor.
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
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.
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.
});
}