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

Po wybraniu płatności kartą kredytową użytkownik widzi w rzeczywistym arkuszu żądania płatności dodatkowy wyświetlany element o nazwie „Opłata za przetwarzanie” z opłatą w wysokości 3 zł i łączną ceną 71 USD.

PaymentDetailsModifier zawiera te parametry:

Gdy dostępne są opcje dostawy, sytuacja staje się nieco bardziej skomplikowana, ponieważ łączna cena modifiers 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 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 przekazywanie tablicy będzie na razie nadal 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ź 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 elementach 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 kartę „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 supportedMethods i opiera się na specyfikacji karty podstawowej. Pamiętaj, że specyfikacja zawiera element supportedTypes, który akceptuje wartości credit, debit lub prepaid, ale Chrome 57 ignoruje tę właściwość i traktuje wszystkie wartości w elemencie 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 pola oczekujące dotyczące żądania płatności.

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 w postaci PaymentRequest) deweloperzy mogą teraz dodać shippingType, aby w interfejsie użytkownika zamiast „shipping” był „dostawa” lub „odbiór”. shippingType akceptuje ciągi shipping (domyślny), delivery lub pickup.

Funkcje serializatora dostępne dla PaymentResponse i PaymentAddress

Obiekt PaymentResponse i obiekt PaymentAddress można teraz zserializować w formacie JSON. Deweloperzy mogą przekonwertować go 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ż przed wywołaniem interfejsu Payment Request API sprawdzić, czy użytkownik ma aktywną formę płatności. 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.
     });
}