Endpoints - API Reference
Solicitudes de Pago
Débito Automático en Tarjeta
Débito Automático en CBU
Cuenta Pagos360.com
Reportes

Botón de Pago Dinámico

Una de las principales formas de comenzar a recibir pagos online es a través de un Botón de Pago.

En esta guía mostraremos como implementar en una aplicación web o móvil un Botón de Pago dinámico que instancie el web checkout de Pagos360.com utilizando nuestra API.

Lectura previa recomendada

Para familiarizarse con los conceptos de Solicitud de Pago (payment-request) le recomendamos leer el apartado:

  1. Solicitar Pago del Centro de Ayuda.
  2. Conceptos Generales de Solicitudes de Pago del Centro de Desarrolladores, donde se detalla la descripción de cada atributo y los diferentes estados de una solicitud entre otros conceptos.

Comencemos!

El siguiente diagrama resume el flujo de información entre la Aplicación Cliente donde se incluirá el Botón de Pago y la plataforma de Pagos360.com.

A los efectos 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. En todo caso el flujo de la transacción será el mismo.

Paso 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 /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

Pudiendo opcionalmente ser utilizados los siguientes atributos:

  • referencia externa
  • fecha de segundo vencimiento
  • importe al segundo vencimiento
  • email del pagador
  • medios de pago a excluir
  • URLs de retorno
  • 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":"25-01-2020","first_total":200.99,"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": 35,
  "type": "payment_request",
  "state": "pending",
  "created_at": "2019-02-22T15:20:49-03:00",
  "payer_name": "nombre_pagador",
  "description": "concepto_del_pago",
  "first_due_date": "2020-01-25T00:00:00-03:00",
  "first_total": 200.99,
  "barcode": "29680000002000000000350002000019138000000004",
  "checkout_url": "https://checkout.pagos360.com/payment-request/9455caf6-36ce-11e9-96fd-fb95450d3057",
  "barcode_url": "https://admin.pagos360.com/api/payment-request/barcode/9455caf6-36ce-11e9-96fd-fb95450d3057",
  "pdf_url": "https://admin.pagos360.com/api/payment-request/pdf/9455caf6-36ce-11e9-96fd-fb95450d3057"
}

De la anterior respuesta, nuestro interés particular es obtener el valor del atributo checkout_url. Este vínculo nos permitirá instanciar el web checkout.

Es una buena práctica persistir el ID de la Solicitud de Pago, para luego sincronizar la aplicación cliente de manera unívoca cuando Pagos360.com le notifique cualquier evento sobre dicha solicitud, por ejemplo, que la misma ha sido pagada.

Paso 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:

PAGAR

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> que resulta mas simple y manejable. 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 para dicho campo 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 estilso en línea. Recuerda crear la clase con el mismo nombre asignado al atributo class en el código HTML5.

<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>

Paso 3: Mostrando el Checkout

Cuando el pagador, utilice el Botón de Pago, será redirigido al web checkout de Pagos360.com donde podrá seleccionar el método de pago de su preferencia y completar los datos necesarios para realizar la transacción.


De manera predefinida, el checkout es mostrado en una ventana del Navegador de Internet del usuario.

Para modificar el comportamiento predefinido y embeber el checkout en un modal dentro de la propia aplicación utilizaemos un script en JAVASCRIPT.

Mostrar el Checkout dentro de la Aplicación Cliente

Primero debemos agregar el ID “pagos360-pay-button” al elemento <a> del Botón de Pago generado en el Paso 2:

<a class="boton_pagar" href="<checkout_url>" id="pagos360-pay-button">PAGAR</a>

A continuación, y dentro de las etiquetas <body> y </body> del documento HTML debe incluirse el siguiente script:

<script type="text/javascript">
        (function () {
            function load() {
                window.isLoaded !== true && (function () {
                    var s = document.createElement("script");
                    s.type = "text/javascript";
                    s.async = true;
                    s.src = document.location.protocol + "render.min.js";
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    window.isLoaded = true;
                })();
            }
            window.isLoaded !== true ? (window.attachEvent ? window.attachEvent('onload', load) : window.addEventListener('load', load, false)) : null;
        })();
</script>

Puede obtener el recurso render.min.js en https://github.com/pagos360/checkout-render

Con estos simples agregados ahora el checkout se mostrará en un modal dentro de la propia aplicación cliente.


Paso 4: Retorno a la Aplicación Cliente

Al finalizar el proceso de pago y en el caso de haber sido especificadas las URLs 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 ejecuta.