Изменения в API запроса платежей

Eiji Kitamura

Хром 62

PaymentDetailsModifier теперь доступен

В запросе на оплату бывают случаи, когда вы хотите предоставить скидку или дополнительную плату в зависимости от способа оплаты, выбранного клиентом. PaymentDetailsModifier — это функция, которую вы можете использовать для достижения этого.

Добавьте свойство modifiers ко второму аргументу конструктора PaymentRequest вместе с массивом объектов PaymentDetailsModifier , которые представляют собой декларативные правила изменения отображаемых элементов и итоговой суммы в зависимости от выбранного клиентом способа оплаты.

В следующем примере показано, как вы объявляете, что с пользователя взимается комиссия за обработку в размере 3 долларов США за выбор оплаты кредитной картой.

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

На листе запроса платежа, как только пользователь выбирает платеж по кредитной карте, он увидит дополнительный элемент под названием «Комиссия за обработку» с комиссией в размере 3 долларов США и общей стоимостью 71,00 долларов США.

PaymentDetailsModifier содержит следующие параметры:

Когда есть варианты доставки, все становится немного сложнее, потому что общая стоимость modifiers не может быть статичной и требует динамического изменения.

Чтобы добиться этого, вам нужно будет изменить additionalDisplayItems и total свойства modifiers при событии shippingaddresschange и shippingoptionchange так же, как вы это делаете со свойством displayItems объекта PaymentDetails .

Свойство supportedMethods теперь принимает строку

Свойство supportedMethods в объекте PaymentMethodData (первый аргумент конструктора PaymentRequest ) принимало массив строк, указывающий способ оплаты. Теперь оно принимает одну строку в качестве аргумента.

Обратите внимание, что указание массива пока продолжит работать.

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'
}];

Хром 61

Поддерживаемые типы в базовой карте доступны

Если supportedMethods имеет значение « basic-card », теперь можно указать supportedTypes , чтобы указать, какие типы карт поддерживаются: « credit », « debit » и « prepaid ».

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

Обязательно дважды проверьте тип карты в вашем платежном шлюзе, так как эта фильтрация может работать некорректно в зависимости от того, откуда она была выпущена.

Хром 57

PaymentRequest теперь доступен внутри iframe

API запроса платежа теперь можно вызывать из iframe , добавив атрибут allowpaymentrequest к элементу iframe .

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

PaymentMethodData поддерживает «базовую карту»

Первый аргумент конструктора PaymentRequest() — массив данных способа оплаты. Формат 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);

Формат свойства data зависит от значения в supportedMethods и основан на спецификации Basic Card . Обратите внимание, что спецификация включает supportedTypes , который принимает credit , debit или prepaid , но Chrome 57 игнорирует это свойство и обрабатывает любые значения в supoprtedNetworks как кредитные карты.

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

Хром 56

в ожидании

Как часть информации о платежном элементе , разработчики могут добавить pending , чтобы указать, что цена еще не полностью определена. Поле pending принимает логическое значение.

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

Это обычно используется для отображения позиций, таких как сумма доставки или налога, которые зависят от выбора адреса доставки или вариантов доставки. Chrome указывает поля ожидания в пользовательском интерфейсе для запроса на оплату.

запросPayerName

В качестве части параметра доставки (третий аргумент PaymentRequest ) разработчики теперь могут добавлять requestPayerName для запроса имени плательщика отдельно от информации об адресе доставки. requestPayerName принимает логическое значение.

shippingType

В качестве части параметра доставки (третий аргумент PaymentRequest ) разработчики теперь могут добавлять shippingType , чтобы запросить, чтобы пользовательский интерфейс отображал «delivery» или «pickup» вместо «shipping». shippingType принимает строки shipping (по умолчанию), delivery или pickup .

Функции сериализатора, доступные для PaymentResponse и PaymentAddress

Объект PaymentResponse и объект PaymentAddress теперь сериализуемы в формате JSON. Разработчики могут преобразовать один объект в объект JSON, вызвав функцию toJSON() , и избежать создания громоздких функций toDict() .

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

canMakePayment

В дополнение к доступности API вы можете проверить, есть ли у пользователя активный способ оплаты, прежде чем вызывать API запроса оплаты. Помните, что это необязательно, так как пользователи все равно могут добавить новый способ оплаты в платежном интерфейсе.

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