Zmiany w interfejsie API żądań płatności

Eiji Kitamura

Chrome 62

Usługa PaymentDetailsModifier jest już dostępna

W żądaniu płatności możesz w niektórych przypadkach zastosować rabat lub dodatkową opłatę w zależności od wybranej przez klienta formy płatności. PaymentDetailsModifier to funkcja, która Ci to umożliwi.

Dodaj właściwość modifiers do drugiego argumentu konstruktora PaymentRequest wraz z tablicą obiektu PaymentDetailsModifier, która zawiera deklaratywnie reguły dotyczące modyfikacji wyświetlanych elementów i sumy w zależności od wybranej przez klienta formy płatności.

Ten przykład pokazuje, jak zadeklarować opłatę za przetwarzanie w wysokości 3 USD za wybranie płatności kartą kredytową.

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);

Na karcie żądania płatności, gdy użytkownik wybierze płatność kartą kredytową, zobaczy dodatkowy element wyświetlania o nazwie „Opłata za przetwarzanie” z opłatą w wysokości 3 zł, a łączna cena wyniesie 71,00 zł.

PaymentDetailsModifier zawiera te parametry:

Gdy dostępne są opcje dostawy, sytuacja staje się nieco bardziej skomplikowana, ponieważ modifiers' cena łączna nie może być statyczna i wymaga modyfikacji dynamicznej.

Aby to zrobić, zmodyfikuj atrybuty additionalDisplayItems i total obiektu modifiers po zdarzeniu shippingaddresschange i shippingoptionchange tak samo, jak to robisz w przypadku atrybutu displayItems obiektu PaymentDetails.

Właściwość supportedMethods przyjmuje teraz ciąg znaków

Właściwość supportedMethods obiektu PaymentMethodData (pierwszy argument konstruktora PaymentRequest) przyjmuje tablicę ciągów znaków wskazującą formę płatności. Teraz przyjmuje jako argument pojedynczy ciąg tekstowy.

Pamiętaj, że na razie przekazywanie tablicy nadal będzie działać.

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

supportedTypes w karcie podstawowej jest dostępny

Gdy supportedMethods to „basic-card”, możesz teraz podać wartość supportedTypes, aby wskazać, które typy kart są obsługiwane: „credit”, „debit” lub „prepaid”.

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

Sprawdź ponownie typ karty w usłudze bramy płatności, ponieważ filtrowanie może nie działać prawidłowo w zależności od źródła danych.

Chrome 57

Interfejs PaymentRequest jest teraz dostępny w ramkach iframe

Interfejs Payment Request API można teraz wywołać z poziomu elementu iframe, dodając do niego atrybut allowpaymentrequest.iframe

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

PaymentMethodData obsługuje „basic-card”

Pierwszym argumentem konstruktora PaymentRequest() jest tablica danych o metodie płatności. W tej wersji zmieniliśmy format PaymentMethodData.

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);

Format właściwości data zależy od wartości w  i jest oparty na specyfikacji karty podstawowej.supportedMethods Pamiętaj, że specyfikacja zawiera supportedTypes, która akceptuje wartości credit, debit lub prepaid, ale Chrome 57 ignoruje tę właściwość i traktuje wszystkie wartości w supoprtedNetworks jako karty kredytowe.

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

Chrome 56

oczekuje

W ramach informacji o produkcie płatności deweloperzy mogą dodać pending, aby wskazać, że cena nie została jeszcze w pełni określona. Pole pending może zawierać wartość logiczną.

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

Jest ona często używana do wyświetlania elementów zamówienia, takich jak kwoty dostawy lub podatki, które zależą od wybranego adresu dostawy lub opcji dostawy. Chrome wskazuje w interfejsie prośby o płatność pola oczekujące.

requestPayerName

W ramach opcji dostawy (trzeci argument funkcji PaymentRequest) deweloperzy mogą teraz dodać parametr requestPayerName, aby poprosić płatnika o imię i nazwisko oddzielnie od informacji o adresie dostawy. requestPayerName może mieć wartość logiczną.

shippingType

W ramach opcji dostawy (trzeci argument funkcji PaymentRequest) deweloperzy mogą teraz dodać parametr shippingType, aby poprosić o wyświetlenie w interfejsie opcji „dostawa” lub „odbiór” zamiast „dostawa”. shippingType akceptuje ciągi shipping (domyślny), delivery lub pickup.

Funkcje serializatora dostępne dla odpowiedzi PaymentResponse i adresu płatności PaymentAddress

Obiekt PaymentResponse i obiekt PaymentAddress można teraz zserializować w formacie JSON. Deweloperzy mogą przekonwertować je na obiekt JSON, wywołując funkcję toJSON(), i uniknąć tworzenia skomplikowanych funkcji toDict().

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

canMakePayment

Oprócz sprawdzania dostępności interfejsu API możesz też sprawdzić, czy użytkownik ma aktywną formę płatności, zanim wywołasz interfejs Payment Request API. Pamiętaj, że jest to opcjonalne, ponieważ użytkownicy mogą nadal dodawać nową formę płatności w interfejsie płatności.

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