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

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

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ł i łączną ceną 71,00 zł.

PaymentDetailsModifier zawiera te parametry:

Nazwa usługi
`supportedMethods`	Określ, która forma płatności ma zastosowanie do tej reguły.
`additionalDisplayItems`	dodatkowe elementy wyświetlania, które chcesz dodać, czyli rabaty lub dodatkowe opłaty;
`total`	Całkowity koszt po dodaniu dodatkowych elementów wyświetlania.
`data`	W przypadku płatności `basic-card` będzie ona służyć do filtrowania określonych typów kart za pomocą `supportedTypes`. W przeciwnym razie użycie tego parametru zależy od formy płatności (aplikacji do płatności). Zapoznaj się z dokumentacją poszczególnych form płatności.

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 właściwości modifiers additionalDisplayItems i total w przypadku zdarzeń shippingaddresschange i shippingoptionchange tak samo jak w przypadku właściwości 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ć.

Nie

Stare – nadal działają.

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

Tak

Nowy – nowy sposób.

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 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 „basic-card”

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

Nie

Stare – nadal działają.

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

Tak

Nowa – 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 elementach supportedMethods i jest oparty 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 oczekujące pola w interfejsie prośby o płatność.

requestPayerName

W ramach opcji dostawy (trzeci argument funkcji PaymentRequest) deweloperzy mogą teraz dodać parametr requestPayerName, aby poprosić płatnika o oddzielne podanie imienia i nazwiska oraz adresu 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 osobisty” zamiast „dostawa”. shippingType akceptuje ciągi shipping (domyślny), delivery lub pickup.

shippingType='pickup' — shippingType="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ć go na obiekt JSON, wywołując funkcję toJSON(), i w ten sposób 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.
     });
}