Cómo funciona la API de Payment Request

Conoce cómo funciona la API de Payment Request en general.

Eiji Kitamura

API de Payment Request

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

Estructura básica

Para construir un objeto PaymentRequest, se requieren dos parámetros: formas de pago y detalles de pago. Además, el tercer parámetro de opciones de pago es opcional. Se podría crear una solicitud básica de la siguiente manera:

const request = new PaymentRequest(paymentMethods, paymentDetails);

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

Formas de pago

El primer parámetro, paymentMethods, es una lista de formas de pago admitidas 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 pago.

El proveedor de la aplicación de pagos 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 de pago de la transacción. Contiene el valor requerido total, que especifica el importe total que debe pagar el cliente. De manera opcional, este parámetro también puede enumerar los artículos comprados.

En el siguiente ejemplo, se muestra la lista opcional de artículos comprados (en este caso, solo un artículo), al igual que el importe total a pagar requerido. 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

Antes de invocar el procedimiento de pago, el comercio puede verificar si el usuario y el entorno están listos para realizar un pago.

Llamar a canMakePayment() verifica si el navegador admite al menos una forma de pago especificada 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
});

Más información sobre PaymentRequest.canMakePayment() en MDN

El método show()

Después de configurar los dos parámetros y crear el objeto request como se muestra más 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 aspecto de la interfaz de usuario de la app de pagos depende completamente del proveedor de apps de pagos. Cuando el cliente acepta realizar un pago, se pasa un objeto JSON al comercio que contiene toda la información necesaria para transferir dinero. Luego, el comercio puede enviarlo al PSP para que procese el pago.

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

Cuál es el próximo paso

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