Cambios en la API de solicitud de pago

Eiji Kitamura
Eiji Kitamura

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.

Qué no debes hacer

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.

Qué no debes hacer

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.

shippingType=&#39;entrega&#39;
shippingType="delivery"
shippingType=&#39;pickup&#39; [retiro]
shippingType="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.
     });
}