Ta strona została przetłumaczona przez Cloud Translation API.

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

Eiji Kitamura

Twitter GitHub Glitch Mastodon

Chrome 62

Usługa PaymentDetailsModifier jest już dostępna

W żądaniu płatności mogą się pojawić sytuacje, w których możesz podać rabat lub dodatkową opłatę w zależności od formy płatności wybranej przez klienta. Aby to zrobić, możesz użyć funkcji PaymentDetailsModifier.

Dodaj właściwość modifiers do drugiego argumentu konstruktora PaymentRequest wraz z tablicą obiektu PaymentDetailsModifier, który deklaruje, jak powinny być modyfikowane wyświetlane elementy i łączna wartość w zależności od formy płatności wybranej przez klienta.

Poniższy przykład pokazuje, jak zgłaszasz użytkownika, który ma zostać obciążony opłatą za obsługę w wysokości 3 USD za wybór 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);

Natychmiast po wybraniu płatności kartą kredytową użytkownik zobaczy dodatkową pozycję „Opłata za przetworzenie płatności” z obciążeniem w wysokości 3 USD o łącznej cenie 71 USD.

PaymentDetailsModifier zawiera te parametry:

nazwa usługi,
`supportedMethods`	Określ formę płatności, która stosuje tę regułę.
`additionalDisplayItems`	Dodatkowe elementy displayowe, do których chcesz dodać zniżki lub dodatkowe opłaty.
`total`	Łączna cena po dodaniu dodatkowych DisplayItems.
`data`	W przypadku płatności `basic-card` zostanie ona użyta do filtrowania konkretnych typów kart za pomocą `supportedTypes`. W przeciwnym razie użycie tego parametru zależy od formy płatności (aplikacji płatniczej). Zapoznaj się z dokumentacją udostępnioną przez poszczególne formy płatności.

Sprawa się komplikuje, gdy dostępne są opcje dostawy, ponieważ łączna cena produktu modifiers nie może być statyczna i wymaga dynamicznych modyfikacji.

Aby to zrobić, zmodyfikujesz additionalDisplayItems i total właściwości modifiers po zdarzeniu shippingaddresschange i shippingoptionchange, tak jak robisz to w przypadku właściwości displayItems obiektu PaymentDetails.

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

Właściwość supportedMethods w obiekcie PaymentMethodData (pierwszy argument konstruktora PaymentRequest) przyjmuje tablicę ciągów znaków, które wskazują formę płatności. Jako argument przyjmuje teraz 1 ciąg znaków.

Pamiętaj, że podanie tablicy przez jakiś czas będzie nadal działać.

Nie

Stary – na razie działa.

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

Tak

Nowy sposób.

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

Chrome 61

Obsługiwane są typy obsługiwanych typów na karcie podstawowej

Gdy supportedMethods ma wartość „basic-card”, możesz teraz podać supportedTypes, aby wskazać, jakiego typu karty są obsługiwane w przypadku „credit”, „debit” i „prepaid”.

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

Sprawdź dokładnie typ karty w bramie płatności, ponieważ to filtrowanie może nie działać idealnie, w zależności od tego, skąd pochodzi karta.

Chrome 57

Element PaymentRequest jest teraz dostępny wewnątrz elementów iframe

Interfejs Payment Request API można teraz wywoływać z elementu iframe przez dodanie atrybutu allowpaymentrequest do elementu iframe.

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

PaymentMethodData obsługuje „podstawową kartę”

Pierwszym argumentem konstruktora PaymentRequest() jest tablica danych formy płatności. Format PaymentMethodData został zmieniony w tej wersji.

Nie

Stary – na razie działa.

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

Tak

Nowy – nowa struktura.

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 jest oparty na specyfikacji podstawowej karty. Pamiętaj, że specyfikacja zawiera supportedTypes, który akceptuje credit, debit lub prepaid, ale Chrome 57 ignoruje tę właściwość i traktuje wszystkie wartości 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 informacjach o elemencie 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 to często używane do wyświetlania elementów zamówienia, takich jak dostawa lub kwoty podatku, które są zależne od wybranego adresu lub opcji dostawy. Chrome wskazuje w interfejsie pola oczekujące na żądanie płatności.

requestPayerName

W ramach opcji dostawy (trzeci argument do PaymentRequest) deweloperzy mogą teraz dodać requestPayerName, aby poprosić o nazwę płatnika niezależnie od adresu dostawy. requestPayerName może zawierać wartość logiczną.

shippingType

W ramach opcji dostawy (trzeciego argumentu PaymentRequest) deweloperzy mogą teraz dodać shippingType, aby poprosić o wyświetlanie w interfejsie informacji „dostawa” lub „odbiór” zamiast „dostawa”. shippingType akceptuje ciągi tekstowe shipping (domyślne), delivery lub pickup.

shippingType='odbiór' — shippingType="pickup"

Funkcje serializacji dostępne dla PaymentResponse i PaymentAddress

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

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

canMakePayment

Oprócz informacji o dostępności interfejsu API przed wywołaniem Payment Request API możesz sprawdzić, czy użytkownik ma aktywną formę płatności. Pamiętaj, że jest to opcjonalne, ponieważ użytkownicy nadal mogą 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.
     });
}