Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

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 quieres 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 son 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.

En el siguiente ejemplo, se muestra cómo declarar que se le cobrará al usuario una tarifa por 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 se elige un pago con tarjeta de crédito, el usuario verá un elemento de visualización adicional llamado "Tarifa por procesamiento" con un cargo de USD 3, con un precio total de USD 71.00.

PaymentDetailsModifier contiene los siguientes parámetros:

Nombre de la propiedad
`supportedMethods`	Especifica a qué forma de pago se aplica esta regla.
`additionalDisplayItems`	Elementos de visualización adicionales a los que quieras agregar descuentos o cargos adicionales.
`total`	Es el precio total después de agregar los additionalDisplayItems.
`data`	Para el pago con `basic-card`, se usará como una forma de filtrar tipos de tarjetas específicos con `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, las cosas se complican un poco, porque el precio total de modifiers no puede ser estático y necesita una modificación dinámica.

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

La propiedad supportedMethods ahora toma una cadena

La propiedad supportedMethods del objeto PaymentMethodData (el primer argumento del constructor PaymentRequest) toma un array de cadenas que indica una forma de pago. Ahora, toma una sola cadena como argumento.

Ten en cuenta que, por el momento, se seguirá admitiendo el uso de un array.

Qué no debes hacer

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']
}];

Qué debes hacer

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

supportedTypes en la tarjeta básica está disponible

Cuando supportedMethods es '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 pasarela de pagos, ya que es posible que este filtrado no funcione perfectamente según su origen.

Chrome 57

PaymentRequest ya está disponible dentro de 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 "basic-card"

El primer argumento del 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

Antiguo: sigue funcionando por el momento.

var methodData = [{
     supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

Qué debes hacer

Nuevo: Es la estructura nueva.

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 de 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 se determinó por completo. El campo pending acepta un valor booleano.

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

Esto se suele usar para mostrar líneas de pedido, como los importes de envío o impuestos, que dependen de la selección de la dirección de envío 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 para PaymentRequest), los desarrolladores ahora pueden agregar requestPayerName para solicitar el nombre del pagador de forma 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 para PaymentRequest), los desarrolladores ahora pueden agregar shippingType para solicitar que la IU muestre "entrega" o "retiro" en lugar de "envío". shippingType acepta las cadenas shipping (predeterminada), delivery o pickup.

shippingType='pickup' — shippingType="pickup"

Funciones de serializador 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() 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 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.
     });
}

Cambios en la API de solicitud de pago Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.