Botón de Pago Dinámico
Una de las principales formas de comenzar a recibir pagos online es integrar un Botón de Pago.
En esta guía mostraremos como crear un Botón de Pago utilizando nuestra API y como integrarlo en una aplicación web o móvil para que tus usuarios puedan pagar desde el Checkout de PAGOS360.
El Checkout de PAGOS360 es un formulario de pago web alojado en nuestros servidores para permitir realizar transacciones de forma segura y con total confianza.
Diagrama de interacción
El siguiente diagrama resume el flujo de comunicación entre la Aplicación Cliente donde se incluirá el Botón de Pago y nuestra plataforma.
A los fines prácticos, el diagrama muestra la Aplicación Cliente en dos capas (backend y frontend), pudiendo variar según la arquitectura de cada aplicación.
Comunicación entre la App y PAGOS360
1️⃣ Crear una Solicitud de Pago
Para crear una Solicitud de Pago utilizaremos el endpoint Crear Solicitud de Pago.
Se debe realizar un POST a https://api.pagos360.com/payment-request proporcionando los datos requeridos para crear una Solicitud de Pago.
La información mínima necesaria a incluir es:
- nombre del pagador
- concepto
- importe
- fecha de vencimiento
En la referencia de este endpoint se puede consultar en detalle los atributos adicionales que soporta para integraciones avanzadas, tales como referencia externa, segundo vencimiento, medios de pago y metadata.
A continuación se muestra un ejemplo en lenguaje PHP utilizando la librería pecl/http v2:
<?php$client = new http\Client;$request = new http\Client\Request;$body = new http\Message\Body;$body->append('{"payment_request":{"description":"concepto_del_pago","first_due_date":"27-01-2022","first_total":1167.34,"payer_name":"nombre_pagador"}}');$request->setRequestUrl('https://api.pagos360.com/payment-request');$request->setRequestMethod('POST');$request->setBody($body);$request->setHeaders(array( 'content-type' => 'application/json', 'authorization' => 'Bearer <API Key>'));$client->enqueue($request)->send();$response = $client->getResponse();echo $response->getBody();Como respuesta al POST /payment-request obtendremos:
{ "id": 135, "type": "payment_request", "state": "pending", "created_at": "2022-01-01T15:20:49-03:00", "payer_name": "nombre_pagador", "description": "concepto_del_pago", "first_due_date": "2022-01-27T00:00:00-03:00", "first_total": 1167.34, "checkout_url": "https://checkout.pagos360.com/payment-request/9455caf6-36ce-11e9-96fd-fb95450d3047"}De la anterior respuesta, nuestro interés particular es obtener el valor del atributo checkout_url. Este vínculo nos permitirá instanciar el Checkout.
Es una buena práctica persistir el ID de la Solicitud de Pago, para luego sincronizar tu aplicación cuando PAGOS360 te notifique cualquier evento sobre dicha solicitud, por ejemplo, que la misma ha sido pagada.
2️⃣ Construir el Botón de Pago
En este ejemplo construiremos un botón utilizando HTML y CSS que nos permitirá personalizar nuestro botón al 100%. El objetivo es conseguir un botón similar al siguiente:
Para construir el botón podría utilizarse el elemento <a> o el elemento <input>. Ambos tipos son personalizables pero para este ejemplo optamos por el elemento <a>. El siguiente código HTML deberá ser colocado donde se quiera mostrar el botón:
<a class="boton_pagar" href="<checkout_url>">PAGAR</a>El valor del atributo href, debe ser sustituido por el valor obtenido en el paso anterior. Algo así como: https://checkout.pagos360.com/payment-request/123456789 y que utilizaremos como ruta a la que dirigirá el botón.
A continuación, personalizaremos el aspecto a través de código CSS. Este código debe incluirse entre las etiquetas <head> y </head> del documento HTML. También pueden utilizarse hojas de estilo o estilos en línea. Recuerda crear la clase con el mismo nombre asignado al atributo class en el código HTML.
<style type="text/css">.boton_pagar { text-decoration: none; padding: 10px 15px; font-weight: 600; font-size: 16px; color: #ffffff; background-color: #0984e3; border-radius: 3px;}</style>3️⃣ Mostrando el Checkout
Cuando el pagador, utilice el Botón de Pago, será redirigido al Checkout de PAGOS360 donde podrá seleccionar el método de pago de su preferencia y completar los datos necesarios para realizar la transacción.
4️⃣ Retorno a la Aplicación Cliente
Al finalizar el proceso de pago y en el caso de haber sido especificadas las URL de retorno (back_url_success, back_url_pending o back_url_rejected), el pagador será redireccionado nuevamente a la aplicación cliente.
Si el pagador en cualquier momento antes de finalizar el proceso de pago cierra el navegador o la pestaña este redireccionado no se ejecutará.
Para recibir una notificación de pago en su Aplicación, puede configurar un Webhook.