Mudanças na API Payment Request

Eiji Kitamura

Chrome 62

O PaymentDetailsModifier já está disponível

Em uma solicitação de pagamento, há casos em que você quer fornecer um desconto ou uma cobrança extra, dependendo da forma de pagamento escolhida pelo cliente. PaymentDetailsModifier é o recurso que você pode usar para isso.

Adicione a propriedade modifiers ao segundo argumento do construtor PaymentRequest com uma matriz do objeto PaymentDetailsModifier, que são regras declarativas de como os itens de exibição e o total precisam ser modificados dependendo do método de pagamento escolhido pelo cliente.

O exemplo a seguir mostra como declarar que um usuário vai receber uma taxa de processamento de US$ 3 por escolher um pagamento com cartão de crédito.

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 página de solicitação de pagamento, assim que escolher um pagamento com cartão de crédito, o usuário vai ver um item de exibição adicional chamado "Taxa de processamento" com uma cobrança de US$ 3, com um preço total de US$ 71,00.

PaymentDetailsModifier contém os seguintes parâmetros:

Quando há opções de frete, as coisas ficam um pouco complicadas, porque o preço total do modifiers não pode ser estático e precisa de modificação dinâmica.

Para fazer isso, modifique o additionalDisplayItems e o total da propriedade modifiers no evento shippingaddresschange e shippingoptionchange, assim como você faz com a propriedade displayItems do objeto PaymentDetails.

A propriedade supportedMethods agora aceita uma string

A propriedade supportedMethods no objeto PaymentMethodData (o primeiro argumento do construtor PaymentRequest) recebe uma matriz de strings que indica uma forma de pagamento. Agora ele usa uma única string como argumento.

Por enquanto, o uso de uma matriz vai continuar funcionando.

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 em cartão básico está disponível

Quando supportedMethods for 'basic-card', agora será possível fornecer supportedTypes para indicar qual tipo de cartão é compatível entre 'credit',  'debit' e 'prepaid'.

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

Verifique o tipo de cartão com seu gateway de pagamento, porque essa filtragem pode não funcionar perfeitamente dependendo da origem.

Chrome 57

O PaymentRequest agora está disponível em iframes

Agora, a API Payment Request pode ser chamada em um iframe adicionando o atributo allowpaymentrequest ao elemento iframe.

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

PaymentMethodData oferece suporte a "cartão básico"

O primeiro argumento para o construtor PaymentRequest() é uma matriz de dados da forma de pagamento. O formato PaymentMethodData foi alterado nesta versão.

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

O formato da propriedade data depende do valor em supportedMethods e é baseado na especificação Cartão básico. A especificação inclui supportedTypes, que aceita credit, debit ou prepaid, mas o Chrome 57 ignora essa propriedade e trata todos os valores em supoprtedNetworks como cartões de crédito.

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

Chrome 56

pendente

Como parte das informações do item de pagamento, os desenvolvedores podem adicionar pending para indicar que o preço ainda não foi totalmente determinado. O campo pending aceita um valor booleano.

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

Isso é usado com frequência para mostrar itens de linha, como valores de frete ou impostos que dependem da seleção do endereço de entrega ou das opções de envio. O Chrome indica os campos pendentes na interface para a solicitação de pagamento.

requestPayerName

Como parte da opção de envio (terceiro argumento para PaymentRequest), os desenvolvedores agora podem adicionar requestPayerName para solicitar o nome do pagador separado das informações do endereço de entrega. requestPayerName aceita um valor booleano.

shippingType

Como parte da opção de envio (terceiro argumento para PaymentRequest), os desenvolvedores agora podem adicionar shippingType para solicitar que a IU mostre "entrega" ou "retirada" em vez de "envio". shippingType aceita as strings shipping (padrão), delivery ou pickup.

Funções de serialização disponíveis para PaymentResponse e PaymentAddress

Os objetos PaymentResponse e PaymentAddress agora são serializáveis por JSON. Os desenvolvedores podem converter um em um objeto JSON chamando a função toJSON() e evitar a criação de funções toDict() complicadas.

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

canMakePayment

Além da disponibilidade da API, você pode verificar se um usuário tem uma forma de pagamento ativa antes de invocar a API Payment Request. Lembre-se de que isso é opcional, já que os usuários ainda podem adicionar uma nova forma de pagamento na interface de pagamento.

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