Cambios en la API de solicitud de pago

Eiji Kitamura

Chrome 62

PaymentDetailsModifier ya está disponible

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 de objetos PaymentDetailsModifier, que son reglas declarativas de cómo se deben modificar los elementos de visualización y el total según el método de pago que elija el cliente.

En el siguiente ejemplo, se muestra cómo declarar que se le cobrará a un usuario 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 solicitud de pago real, en cuanto elija 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, con un precio total de USD 71.

PaymentDetailsModifier contiene los siguientes parámetros:

Cuando hay opciones de envío, se complica un poco, ya que el precio total de modifiers no puede ser estático y necesita modificaciones dinámicas.

Para lograrlo, modificarás additionalDisplayItems y total de la propiedad modifiers en los eventos shippingaddresschange y shippingoptionchange, al igual que lo haces con la propiedad displayItems del objeto PaymentDetails.

La propiedad supportedMethods ahora toma una cadena.

La propiedad supportedMethods en el objeto PaymentMethodData (el primer argumento del constructor PaymentRequest) ha estado tomando 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, seguirá funcionando si proporcionas un array.

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 en la tarjeta básica está disponible

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 tu puerta de enlace de pagos, ya que es posible que este filtrado no funcione perfectamente según la fuente.

Chrome 57

PaymentRequest ahora está disponible dentro de iframes

Ahora se puede llamar a la API de Payment Request desde un iframe si se agrega el atributo allowpaymentrequest al elemento iframe.

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

PaymentMethodData admite "basic-card".

El primer argumento del constructor PaymentRequest() es un array de datos del método de pago. En esta versión, se modificó el formato 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);

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 el precio aún no está determinado 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 líneas de pedido, como el envío o los importes de impuestos, que dependen de la selección de la dirección o 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 de PaymentRequest), los desarrolladores ahora pueden agregar requestPayerName para solicitar el nombre del pagador por separado 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 "entrega" o "recogida" en lugar de "envío". shippingType acepta las cadenas shipping (predeterminada), delivery o pickup.

Funciones de serialización disponibles para PaymentResponse y PaymentAddress

El objeto PaymentResponse y el objeto PaymentAddress ahora se pueden serializar en JSON. Los desarrolladores pueden convertir uno en un objeto JSON llamando a la función toJSON() y evitar crear funciones toDict() complicadas.

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 Payment Request API. Recuerda que esto es opcional, ya que los usuarios 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.
     });
}