Chrome 62
Ahora está disponible PaymentDetailsModifier
En una solicitud de pago, hay casos en los que deseas proporcionar un descuento o un cargo adicional según la forma de pago que elija el cliente.
PaymentDetailsModifier
es la función que puedes usar para lograrlo.
Agrega la propiedad modifiers
al segundo argumento del constructor PaymentRequest
junto con un array del objeto PaymentDetailsModifier
que es reglas declarativas de cómo se deben modificar los elementos de visualización y el total según la forma de pago que elija el cliente.
El siguiente ejemplo muestra cómo declaras a un usuario que se le cobra una tarifa de procesamiento de USD 3 por elegir un pago con tarjeta 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);
En la hoja de solicitudes de pago real, en cuanto seleccione un pago con tarjeta de crédito, el usuario verá un elemento de visualización adicional llamado “Tarifa de procesamiento” con un cargo de USD 3 y un precio total de USD 71.00.
PaymentDetailsModifier
contiene los siguientes parámetros:
Nombre de la propiedad | |
---|---|
supportedMethods | Especifica qué forma de pago aplica esta regla. |
additionalDisplayItems |
Elementos de visualización adicionales que desea agregar, ya sea descuentos o cargos adicionales. |
total | Es el precio total después de agregar el elemento additionalDisplayItems. |
data | En el caso de los pagos con basic-card , se usará como una forma de filtrar tipos de tarjetas específicos por supportedTypes . De lo contrario, el uso de este parámetro dependerá de la forma de pago (app de pagos). Consulta la documentación que proporciona cada forma de pago. |
Cuando hay opciones de envío, el proceso se complica, ya que el precio total de modifiers
no puede ser estático y necesita modificaciones dinámicas.
Para ello, modificarás las propiedades additionalDisplayItems
y total
de la propiedad modifiers
durante los eventos shippingaddresschange
y shippingoptionchange
, de la misma manera que lo haces con la propiedad displayItems
del objeto PaymentDetails
.
La propiedad supportedMethods ahora toma una string.
La propiedad supportedMethods
del objeto PaymentMethodData
(el primer argumento para el constructor PaymentRequest
) tomó un array de cadenas que indica una forma de pago. Ahora está tomando una sola cadena como argumento.
Ten en cuenta que, por el momento, la asignación de un array seguirá funcionando.
Es antiguo: sigue funcionando por el momento.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: ['https://bobpay.xyz'] }];
Nuevo, la nueva forma
var methodData = [{ supportedMethods: 'basic-card', data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }, { supportedMethods: 'https://bobpay.xyz' }];
Chrome 61
Se encuentra disponible supportedTypes en tarjeta básica.
Cuando supportedMethods
sea "basic-card
", ahora puedes proporcionar supportedTypes
para indicar qué tipo de tarjetas se admiten entre "credit
", "debit
" y "prepaid
".
var methodData = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
supportedTypes: ['credit', 'debit', 'prepaid']
}
}];
Asegúrate de verificar el tipo de tarjeta con la puerta de enlace de pagos, ya que es posible que este filtrado no funcione a la perfección según el origen de la fuente.
Chrome 57
PaymentRequest ahora está disponible dentro de los iframes
Ahora se puede llamar a la API de Payment Request desde un iframe
agregando el atributo allowpaymentrequest
al elemento iframe
.
<iframe src="/totally/fake/url" allowpaymentrequest></iframe>
PaymentMethodData admite el atributo "basic-card".
El primer argumento para el constructor PaymentRequest()
es un array de datos de la forma de pago. Se modificó el formato PaymentMethodData
en esta versión.
Es antiguo: sigue funcionando por el momento.
var methodData = [{ supportedMethods: ['visa', 'mastercard', 'amex', 'jcb'] }]; var request = new PaymentRequest(methodData, details, options);
Nuevo: la nueva estructura.
var methodData = [{ supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'diners', 'discover', 'mir', 'unionpay'] } }]; var request = new PaymentRequest(methodData, details, options);
El formato de la propiedad data
depende del valor en supportedMethods
y se basa en la especificación Basic Card. Ten en cuenta que la especificación incluye supportedTypes
, que acepta credit
, debit
o prepaid
, pero Chrome 57 ignora esta propiedad y trata cualquier valor en supoprtedNetworks
como tarjetas de crédito.
var methodData = [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay'],
supportedTypes: ['credit'] <= not available
}
}];
Chrome 56
pendiente
Como parte de la información del elemento de pago, los desarrolladores pueden agregar pending
para indicar que aún no se determinó el precio por completo. El campo pending
acepta un valor booleano.
{
label: "State tax",
amount: { currency: "USD", value : "5.00" },
pending: true
},
Por lo general, se usa para mostrar elementos de una sola línea, como los importes del impuesto o el envío, que dependen de la selección de la dirección o de las opciones de envío. Chrome indica los campos pendientes en la IU para la solicitud de pago.
requestPayerName
Como parte de la opción de envío (tercer argumento para PaymentRequest
), ahora los desarrolladores pueden agregar requestPayerName
para solicitar el nombre del pagador independiente de la información de la dirección de envío.
requestPayerName
acepta un valor booleano.
shippingType
Como parte de la opción de envío (tercer argumento de PaymentRequest
), los desarrolladores ahora pueden agregar shippingType
para solicitar que la IU muestre “entregas” o “retiro” en lugar de “envío”.
shippingType
acepta las strings shipping
(predeterminado), delivery
o pickup
.
Funciones de serializador disponibles para PaymentResponse y PaymentAddress
El objeto PaymentResponse y el objeto PaymentAddress
ahora pueden serializarse con JSON. Los desarrolladores pueden convertir
uno en un objeto JSON llamando a la función toJSON()
y evitar crear
funciones toDict()
engorrosas.
request.show().then(response => {
let res = response.toJSON();
});
canMakePayment
Además de la disponibilidad de la API, puedes verificar si un usuario tiene una forma de pago activa antes de invocar la API de Payment Request. Recuerda que esto es opcional, ya que los usuarios aún pueden agregar una forma de pago nueva en la IU de pago.
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.
});
}