Como Usar la API de Solicitud de Pagos de JavaScript – Parte 1

5 minuto(s)

En esta página:

Demo

En la actualidad existen muchas aplicaciones de ventas de productos como tiendas en línea, aplicaciones móviles (stores), consolas de videojuegos con tiendas incorporadas, tiendas de videojuegos, etc. Todas tienen algo en particular: usan un sistema de pagos para que los usuarios puedan comprar sus productos, hay muchas formas de implementar un sistema de pagos en línea y con determinadas tecnologías y lenguajes de programación. En este Post te enseñaré a Como Usar la API de Solicitud de Pagos de JavaScript, vamos con ello.

Partes

Parte 1
Parte 2 (Final)

Antes de continuar te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos) y “¿ Qué Es NoCode Development ?” (Anchor Podcast):

Spotify:	Sound Cloud:	Apple Podcasts	Anchor Podcasts

Bien ahora continuemos con el Post: Como Usar la API de Solicitud de Pagos de JavaScript – Parte 1.

¿ Que Es la API de Solicitud de Pagos de JavaScript ?

Primero debes tener en cuenta que la API de Solicitud de Pagos de JavaScript no es una nueva forma de pagar las cosas. Ya existen desde mucho antes, otras alternativas de pago. Esta API es un flujo optimizado para que tanto el consumidor como el comerciante tengan una experiencia nativa fluida al pagar en línea.

La experiencia con el fujo de esta API de solicitud de pago es que el consumidor ya no tiene que llenar múltiples formularios que contienen todo tipo de detalles. En cambio, aprovechan lo que ya está configurado en su navegador. Y esto tiene mucho sentido ¿ verdad ?

¿ Porque tendría que completar mi dirección de envío en cada sitio web ? Rara vez cambia y lo mismo ocurre con los datos personales. Entonces ¿ porqué no aprovechar esto en el navegador ?

Configuración

Primero creamos nuestro botón HTML con un mensaje debajo de él:


<button id="pagar"  class="btn btn-primary mb-3">Pagar 20$</button> 
<div id="mensaje">Presionar el botón para realizar el pago</div>

<button id="pagar" class="btn btn-primary mb-3">Pagar 20$</button>

<div id="mensaje">Presionar el botón para realizar el pago</div>

El botón está usando clases de Bootstrap y si lo abro en el navegador se debería de ver sin problemas:

Ahora debemos adjuntar un controlador de clic al botón para iniciar el proceso de pago:


button.addEventListener('click', () => {
  // Hacer algo 
});

button.addEventListener('click', () => {

// Hacer algo

});

Paso seguido debemos configurar la API de solicitud de pago. En su forma más básica, se ve asi:


const solicitud = new PaymentRequest(metodosPago, detallesPago);

const solicitud = new PaymentRequest(metodosPago, detallesPago);

Los métodos de pago pueden contener una lista de métodos de pago admitidos. Cada elemento del objeto consta de dos parámetros:

supportedMethods: Cadena basada en URL que apunta al punto final de pago.
data: Información opcional proporcionada por el proovedor de pago.

Si ahora tomamos BobBucks (Herramienta para pruebas de pagos), como proovedor de pagos como ejemplo, podemos iniciar con el siguiente contexto:


const metodosPago = [{
  supportedMethods: 'https://bobbucks.dev/pay'
}];

const metodosPago = [{

supportedMethods: 'https://bobbucks.dev/pay'

}];

La segunda parte de la solicitud son los datos sobre lo que estamos pagando.

En general, lo más probable es que esto provenga de tu carrito de compras, pero dado que usamos un pago estático de $ 20, podemos proporcionarlo codificado:


const detallesPago = {
  id: 'pago-001',
  displayItems: [
    {
      label: 'Comprar este producto',
      amount: { currency: 'USD', value: '20.00' }
    }
  ],
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '20.00' }
  }
}

const detallesPago = {

id: 'pago-001',

displayItems: [

{

label: 'Comprar este producto',

amount: { currency: 'USD', value: '20.00' }

}

total: {

label: 'Total',

amount: { currency: 'USD', value: '20.00' }

}

Ahora que tenemos toda la información, pongámosla en acción e iniciemos la solicitud de pago cuando el usuario hace clic en el botón.


button.addEventListener("click", () => {
  request.show().then( (paymentResponse) => {
    paymentResponse.complete("success").then(() => {
      response.innerText = "Gracias por tu compra !";
    });
  });
});

button.addEventListener("click", () => {

request.show().then( (paymentResponse) => {

paymentResponse.complete("success").then(() => {

response.innerText = "Gracias por tu compra !";

});

Manejo del Pago

Es bueno saber que aunque esta API maneja toda la magia del pago, aún debes manejar el pago por tu parte. En este tutorial, no entraremos en detalles al respecto, pero depende de ti integrar alguna validación del lado del servidor para saber si el pago fue exitoso y qué datos necesita procesar en función de la respuesta.

Para mostrar un respuesta, está disponible como objeto de retorno del método .show():


button.addEventListener("click", () => {

  request.show().then( (paymentResponse) => {
   console.log(paymentResponse); 

   // ¡Maneja el pago antes de mostrar un mensaje de éxito!
   paymentResponse.complete("success").then(() => {
      response.innerText = "Gracias por tu compra";
    });

  });
});

button.addEventListener("click", () => {

request.show().then( (paymentResponse) => {

console.log(paymentResponse);

// ¡Maneja el pago antes de mostrar un mensaje de éxito!

paymentResponse.complete("success").then(() => {

response.innerText = "Gracias por tu compra";

});

Este objeto de respuesta se verá así:


details: {gpay_token_id: 'ABCDEADBEEF', message: 'Gracias por usar BobBucks!'}
methodName: "https://bobbucks.dev/pay"
onpayerdetailchange: null
payerEmail: null
payerName: null
payerPhone: null
requestId: "demo-123"
shippingAddress: null
shippingOption: null

details: {gpay_token_id: 'ABCDEADBEEF', message: 'Gracias por usar BobBucks!'}

methodName: "https://bobbucks.dev/pay"

onpayerdetailchange: null

payerEmail: null

payerName: null

payerPhone: null

requestId: "demo-123"

shippingAddress: null

shippingOption: null

Bien hasta aqui llegamos con esta primera parte de este tutorial sobre Como Usar la API de Solicitud de Pagos de JavaScript.

Ten Paciencia, lo que quiero es que conozcas bien como usar esta API y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

En la siguiente parte y última terminaremos de configurar esta API y veremos una Demo del proyecto en funcionamiento.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.