Cómo funciona la API de Payment Request

Aprende cómo funciona la API de Payment Request en un nivel general.

Eiji Kitamura

API de Payment Request

Cuando un cliente intenta comprar algo en tu sitio web, el sitio debe solicitarle que proporcione información de pago y, de manera opcional, otra información, como la preferencia de envío. Puedes lograrlo de forma fácil y rápida con la API de Payment Request (API de PR).

Estructura básica

La construcción de un objeto PaymentRequest requiere dos parámetros: payment methods y payment details. Además, un tercer parámetro payment options es opcional. Una solicitud básica se puede crear de la siguiente manera:

const request = new PaymentRequest(paymentMethods, paymentDetails);

Veamos cómo se compila y se usa cada parámetro.

Formas de pago

El primer parámetro, paymentMethods, es una lista de los métodos de pago admitidos en una variable de array. Cada elemento del array consta de dos componentes: supportedMethods y, de forma opcional, data.

Para supportedMethods, el comercio debe especificar un identificador de forma de pago, como https://bobbucks.dev/pay. La existencia y el contenido de data dependen del contenido de supportedMethods y del diseño del proveedor de la app de pagos.

El proveedor de la aplicación de pago debe proporcionar ambos datos.

// Supported payment methods
const paymentMethods = [{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: {
    ... // Optional parameters defined by the payment app provider.
  }
}];

Detalles del pago

El segundo parámetro, paymentDetails, se pasa como un objeto y especifica los detalles del pago de la transacción. Contiene el valor obligatorio total, que especifica el importe total que debe el cliente. De manera opcional, este parámetro también puede mostrar una lista de los artículos comprados.

En el siguiente ejemplo, se muestra la lista opcional de artículos comprados (solo un artículo, en este caso), así como el importe total adeudado obligatorio. En ambos casos, la unidad de moneda se especifica con cada importe individual.

const paymentDetails = {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
};

Verifica si la forma de pago está disponible

Chrome verifica si el usuario y el entorno están listos para realizar el pago durante la construcción de un objeto PaymentRequest.

Para verificar si el usuario y el entorno están listos para realizar un pago, llama a canMakePayment() antes de invocar el procedimiento de pago. Si llamas a canMakePayment(), se muestra true si el navegador admite al menos un método de pago especificado en el objeto.

request.canMakePayment().then(result => {
  if (result) {
    // This browser supports the specified payment method.
  } else {
    // This browser does NOT support the specified payment method.
  }
}).catch(e => {
  // An exception
});

Obtén más información sobre PaymentRequest.canMakePayment() en MDN

El método show()

Después de establecer los dos parámetros y crear el objeto request como se muestra arriba, puedes llamar al método show(), que muestra la interfaz de usuario de la app de pagos.

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

El proveedor de la app de pagos es quien decide cómo se verá la interfaz de usuario de la app de pagos. Una vez que el cliente acepta realizar un pago, se pasa al comercio un objeto JSON que contiene toda la información necesaria para transferir dinero. Luego, el comercio puede enviarlo a la PSP para que procese el pago.

Por último, puedes cerrar la IU de solicitud de pago completando el proceso con response.complete('success') o response.complete('fail'), según el resultado que devuelva la PSP.

Cuál es el próximo paso

Obtén más información sobre los pagos web.