Chrome 62
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.
O PaymentDetailsModifier
é o recurso que pode ser usado para fazer isso.
Adicione a propriedade modifiers
ao segundo argumento do construtor PaymentRequest
com uma matriz de objeto PaymentDetailsModifier
, que é regras declarativas
de como os itens de exibição e o total precisam ser modificados dependendo da forma
de pagamento escolhida pelo cliente.
O exemplo a seguir mostra como você declara a cobrança de uma taxa de processamento de US $3 do usuário para escolher um pagamento por 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 "Solicitação de pagamento", assim que escolher um pagamento com cartão de crédito, o usuário vai encontrar um item de exibição adicional chamado "Taxa de processamento" com uma cobrança de US $3, com preço total de US $71,00.
PaymentDetailsModifier
contém os seguintes parâmetros:
Nome da propriedade | |
---|---|
supportedMethods | Especifique qual forma de pagamento aplica esta regra. |
additionalDisplayItems |
Outros itens de exibição que você quiser incluir com descontos ou cobranças extras. |
total | Preço total após a adição dos additionalDisplayItems. |
data | Para
pagamentos com basic-card , isso vai ser usado como uma forma de filtrar tipos de cartão
específicos com supportedTypes . Caso contrário, o uso desse
parâmetro depende da forma de pagamento (app de pagamento). Consulte a
documentação fornecida por cada forma de pagamento. |
Quando há opções de frete, o processo fica um pouco complicado, porque o preço total de modifiers
não pode ser estático e precisa de modificação dinâmica.
Para fazer isso, modifique additionalDisplayItems
e total
da propriedade modifiers
no evento shippingaddresschange
e shippingoptionchange
, assim como faz para a propriedade displayItems
do objeto PaymentDetails
.
A propriedade supportedMethods agora usa uma string
A propriedade supportedMethods
no objeto PaymentMethodData
(o primeiro argumento do
construtor PaymentRequest
) está usando uma matriz de strings que
indica uma forma de pagamento. Agora, ele usa uma única string como argumento.
Por enquanto, fornecer uma matriz vai continuar funcionando.
Antigo; por enquanto ainda funciona.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
Novo - do novo jeito.
var methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: 'https://bobpay.xyz' }];
Chrome 61
supportedTypes no cartão básico está disponível
Quando supportedMethods
for "basic-card
", agora você poderá fornecer supportedTypes
para indicar quais tipos de cards têm suporte 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 o gateway de pagamento, porque esse filtro pode não funcionar perfeitamente, dependendo da origem.
Chrome 57
PaymentRequest agora está disponível em iframes
A API Payment Request agora pode ser chamada em um iframe
adicionando o
atributo allowpaymentrequest
ao elemento iframe
.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData oferece suporte a "basic-card"
O primeiro argumento para o construtor PaymentRequest()
é uma matriz de dados da forma de pagamento. O formato PaymentMethodData
foi alterado nesta versão.
Antigo; por enquanto ainda funciona.
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
Nova: a nova estrutura.
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 do Card básico. Observe que 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
},
Geralmente, isso é usado para mostrar itens de linha, como valores de frete ou tributos, que dependem da seleção do endereço de entrega ou das opções de envio. O Chrome indica campos pendentes na IU 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 frete
(terceiro argumento para PaymentRequest
), os desenvolvedores agora podem adicionar shippingType
para
solicitar que a interface mostre "entrega" ou "retirada" em vez de "frete".
shippingType
aceita as strings shipping
(padrão), delivery
ou
pickup
.
Funções do serializador disponíveis para PaymentResponse e PaymentAddress
Os objetos PaymentResponse e PaymentAddress
agora são serializáveis em 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, é possível verificar se um usuário tem uma forma de pagamento ativa antes de invocar a API Payment Request. 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.
});
}