Botón de pago por redirección

📎¿Qué es el botón de pago Payphone?

¡Integra el botón de pago Payphone y simplifica tus transacciones! En pocos minutos tendrás activo un botón de pago que te permitirá recibir pagos de forma segura y eficiente , ya sea con tarjetas de crédito y débito (Visa , Mastercard) o saldo Payphone.

¡Integración rápida y flexible con cualquier lenguaje de programación gracias a nuestros API REST!

Flujo del Botón de pago 💳

🚀¿Cómo funciona? La integración se realiza en dos fases clave:

1. 🧩 Preparación

En esta etapa se configura el detalle de la transaccion para obtener los enlaces hacia nuestros formularios de pago:

1. Solicitud POST: Realizar una solicitud POST a la API de Preparacion de Payphone.
2. Detalle de la transacción: Proporciona en el cuerpo de la solicitud los detalles del pago (monto a cobrar, impuestos y detalles generales de la transacción).
3. Obtener la URL del formulario de pago: Payphone te proporcionará una URL donde estará disponible el formulario para completar la transacción. Simplemente redirige a tu cliente a esta URL.
4. Realizar el pago: El cliente podrá pagar utilizando su tarjeta de crédito, débito, o saldo de Payphone.

2. ✅ Confirmación

Una vez que el usuario completa el pago, Payphone redirige a tu sitio con parámetros en la URL que representan el resultado de la operación.

Tu sistema debe:

1. Capturar los parámetros de respuesta: identificador de Payphone(ID) y identificador del comercio (clientTransactionId).
2. Solicitud POST: Realizar una solicitud POST a la API de Confirmación de Payphone incluyendo los parametros de la transaccion.
3. Respuesta Solicitud: Payphone te respondera con el detalle completo de la transacción (estado, monto, autorización, etc.)
4. Mostrar Resultado: Presentar al cliente el resultado de la transaccion.

🔙 Importante: Reverso Automático

Si tu sistema no ejecuta la fase de confirmación dentro de los primeros 5 minutos después del pago, Payphone reversará automáticamente la transacción. Esto se hace para proteger tanto al comercio como al cliente, evitando:

1. Cobros indebidos
2. Procesos incompletos por falta de datos
3. Conflictos o reclamos por parte del cliente

📖En resumen: Si no confirmas el pago, Payphone lo cancela automáticamente, ya que no puede garantizar que el comercio haya registrado correctamente la transacción.

⚠️ Consideraciones previas:

Antes de comenzar con la implementación de Boton de Pagos de Payphone, asegúrate de cumplir con los siguientes requisitos técnicos y administrativos:

🌐 Plataforma

1. El Boton de Pagos está diseñada exclusivamente para entornos WEB. No está disponible para aplicaciones móviles directamente.

🔒 Dominio y entorno seguro

1. Es indispensable contar con un dominio que tenga un certificado SSL (https://) válido para producción.
2. Para fines de prueba o desarrollo local, puedes utilizar http://localhost sin necesidad de certificado SSL.
3. Importante: El Boton de Pagos está vinculada directamente al dominio configurado en tu cuenta Payphone.
4. Esto significa que solo funcionará en ese dominio específico. Si se intenta ejecutar desde otro dominio no autorizado, se mostrará un error de autorización y el proceso de pago no podrá completarse.

🏢 Cuenta en Payphone Business

1. Debes tener una cuenta activa en Payphone Business.
2. Si aún no la tienes, puedes registrarte en: Payphone Business

👨💻 Usuario con rol de Desarrollador

1. Dentro de tu cuenta Payphone Business, deberás crear un usuario con el rol de Desarrollador.
2. Este usuario tendrá acceso a las configuraciones técnicas y a la generación de credenciales para integración.

💻 Entorno de desarrollo

1. Asegúrate de contar con un entorno de desarrollo funcional, incluyendo:
2. • Editor de código (VSCode, WebStorm, etc.)
   • Navegador actualizado
   • Herramientas de prueba como Postman, Insomnia o cURL
   • Conocimientos básicos de HTML, JavaScript y consumo de APIs REST

🔑 Obtención de credenciales

1. Desde la plataforma para desarrolladores de Payphone, deberás:
2. • Crear una nueva configuración de aplicación.
   • Obtener las credenciales necesarias para la integración: TOKEN de autenticación (Bearer Token) y STOREID asociado a tu comercio

Próximos pasos

Siguiendo este flujo, podrás implementar un proceso de pago seguro y eficiente en tu aplicación WEB.
A continuación, profundizaremos en cada uno de estos pasos.

🔑Configuración del Ambiente y Obtención de Credenciales

🛠️Preparar la transacción

Este método permite preparar los montos e información adicional necesarios para iniciar una transacción de pago a través del botón Payphone.

🧩 API Button/Prepare

Para preparar una transacción, debes realizar una solicitud POST como se muestra a continuacion:

🔗 URL de la solicitud POST

https://pay.payphonetodoesposible.com/api/button/Prepare

📦 Estructura del Cuerpo de la Solicitud:

El cuerpo de la solicitud debe ser un objeto JSON con la siguiente estructura:

{
    "amount": 315,
    "amountWithoutTax": 200,
    "amountWithTax": 100,
    "tax": 15, 
    "service": 0,
    "tip": 0,
    "clientTransactionId": "ID_UNICO_X_TRANSACCION-001",   
    "reference": "Motivo de cobro con Boton", 
    "storeId": "your_storeId",
    "currency": "USD",  
    "responseUrl": "https://your_domain.com/webhook/resultParameters",    
    "cancellationUrl": "https://tu-dominio.com/",
    "timeZone": -5, 
    "lat": "-1.831239",    
    "lng": "-78.183406",    
    "order": {
        "billTo": { //datos de facturacion
            "billToId": 12,
            "address1": "Colorado Springs",
            "address2": "Denver",
            "country": "EC",
            "state": "Azuay",
            "locality": "Cuenca",
            "firstName": "Elisabeth",
            "lastName": "Sobeck",
            "phoneNumber": "+593999999999",
            "email": "aloy@mail.com",
            "postalCode": "EC090108",
            "customerId": "idUserClient.001",
            "ipAddress": "127.0.0.1"
        },
        "lineItems": [
            {
                "productName": "Producto Vendido",
                "unitPrice": 100,
                "quantity": 1,
                "totalAmount": 115,
                "taxAmount": 15,
                "productSKU": "3342.0004",
                "productDescription": "Descripción Producto"
            },
            {
                "productName": "Servicio Entregado",
                "unitPrice": 100,
                "quantity": 2,
                "totalAmount": 200,
                "taxAmount": 0,
                "productSKU": "5342.0054",
                "productDescription": "Descripción Servicio"
            }
        ]
    },
    "documentId": null,
    "phoneNumber": null,
    "email": null,
    "optionalParameter": "Descripción Extra"
}

El objeto JSON mostrado define el cobro de $3.15, divididos en $1 con un impuesto del 15% y $2 sin impuesto.

‍

🔐 Es fundamental incluir las siguientes cabeceras en la solicitud:

• Authorization: bearer TU_TOKEN (Token de autenticación de la aplicación, precedido por la palabra "Bearer").
• Content-type: application/json (Formato de los datos: JSON).

amount = amountWithoutTax + amountWithTax  + tax + service + tip

🔸Ejemplos de cuerpos de solicitudes con campos mínimos

A continuación, se muestran ejemplos de objetos JSON con los campos mínimos para diferentes tipos de cobro:

{ 
    "amount": 115, 
    "amountWithTax": 100,  
    "tax": 15, 
    "clientTransactionId": "ID_UNICO_X_TRANSACCION-001",  
    "currency": "USD",  
    "storeId": "your_storeId", 
    "reference": "Pago con API Link",   
    "responseUrl":"https://tu-dominio.com/ConfirmacionPago" 
}

{ 
    "amount": 200, 
    "amountWithoutTax": 200, 
    "clientTransactionId": "ID_UNICO_X_TRANSACCION-001",  
    "currency": "USD",  
    "storeId": "your_storeId",  
    "reference": "Pago con API Link",  
    "responseUrl":"https://tu-dominio.com/ConfirmacionPago"
}

{ 
    "amount": 315, 
    "amountWithoutTax": 200, 
    "amountWithTax": 100, 
    "tax": 15,  
    "clientTransactionId": "ID_UNICO_X_TRANSACCION-001",  
    "currency": "USD",  
    "storeId": "your_storeId",  
    "reference": "Pago con API Link",   
    "responseUrl":"https://tu-dominio.com/ConfirmacionPago"
}

📋Descripción de parámetros en la petición

A continuación se detallan todos los parámetros que se pueden usar para una transacción como montos a cobra, moneda, datos del cliente y otros campos que puedes enviar.

📋 Desglose del campo order

El campo order se divide en dos arreglos: BillTo, LineItems

🧾BillTo (Datos de facturación):
El campo billTo es un arreglo que contiene información de facturación

📦 LineItems (Detalle del pedido):
El campo lineItems es un conjunto de arreglos que contiene la información de los servicios o productos entregados

🧱 Ejemplos de solicitud POST a Buttom/Prepare

A continuación, se presenta varios ejemplos de cómo realizar solicitudes POST:

<?php 
    date_default_timezone_set('America/Guayaquil');

    //Preparar cabecera para la solicitud
    $headers[] = 'Authorization: Bearer your_token' ;//CREDENCIALES DE CONFIGURACION
    $headers[] = 'Content-Type: application/json' ;//TIPO DE APLICACION 

    //Genera Dato Unico por transacción 
    $clientTransactionID = substr((date("ymd-Hi-s").gettimeofday()["usec"]),0, 16);

    //Preparar objeto JSON para solicitud
    $data = array(
        "amount" => 215,
        "amountWithoutTax" => 100,
        "amountWithTax" => 100,
        "tax" => 15,
        "service" => 0,
        "tip" => 0,
        "storeId" => "your_storeId",
        "clientTransactionId" => $clientTransactionID,
        "currency" => "USD",
        "responseUrl" => "https://your_domain.com/confirm.php",
        "reference" => "Prueba Boton por redireccion"
    );
    $objetoJSON = json_encode($data);

    //Iniciar solicitud curl: POST 
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://pay.payphonetodoesposible.com/api/button/Prepare");
    curl_setopt($curl, CURLOPT_POST, 1);

    curl_setopt($curl, CURLOPT_POSTFIELDS, $objetoJSON);    
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    //Respuesta en formato JSON
    $curl_response = curl_exec($curl);
    //Finaliza solicitud curl: POST
    curl_close($curl);
    
    //Mostrar Resultado en Pantalla
    echo "<h1>Prueba Botón por redirección</h1> <br><br>";

    $result= json_decode($curl_response);

    if(isset($result->paymentId) ) {
        echo "<a href='".$result->payWithPayPhone."'>PAGAR CON PAYPHONE</a> <br><br>";
        
        echo "<a href='" .$result->payWithCard."'>PAGAR CON TARJETA VISA/MASTERCARD</a>";
    }else{
        echo "<pre>".json_encode($result,JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )."</pre>"; 
    }      
    
?>

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo de Solicitud POST con jQuery</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
    <script>
    	//Genera un Dato Unico por transacción
        const  redirectClientTraxID =Date.now();
        //Se realiza solicitud POST: Se prepara objeto JSON, header y presenta resultado o error
        $(document).ready(function() {
            $.ajax({
                url: "https://pay.payphonetodoesposible.com/api/button/Prepare",
                type: "POST",
                headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer your_token"
                },
                data: JSON.stringify({ 
                    "amount": 155,
                    "amountWithoutTax": 155, 
                    "amountWithTax": 0,                
                    "tax": 0, 
                    "reference": "Pago mediante Boton payphone",    
                    "currency": "USD",                 
                    "clientTransactionId": redirectClientTraxID,
                    "storeId": "your_storeId",    
                    "ResponseUrl": "https://your-domain.com/Confirm"
                }),
                success: function(response) {
                    $("#resultado").html(
                        "<a href='" + response.payWithPayPhone + "' target='_blank'>Pagar con payphone</a><br><br>" +
                        "<a href='" + response.payWithCard + "' target='_blank'>Pagar con Tarjeta Visa/MasterCard</a><br><br>"+
                        "Respuesta : <pre>" + JSON.stringify(response, null, 2) + "</pre>"
                    );
                },
                error: function(error) {
                    $("#resultado").html(
                        "Error en la solicitud : <pre>" + JSON.stringify(error, null, 2) + "</pre>"
                    );
                }
            });
        });
    </script>
</head>
<body>
    <h1>Ejemplo de Solicitud POST</h1>
    <div id="resultado"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>  
    <title>Ejemplo de Solicitud POST con fetch</title>  
    <script>     
        //Genera un Dato Unico por transacción   
        const  redirectClientTraxID =Date.now();
        //Preparar cabecera para la solicitud
        const  headers = {
                "Content-Type": "application/json",
                "Authorization": "Bearer your_token",
                "Referer": document.referrer
            };
        //Preparar objeto JSON para solicitud
        const bodyJSON = { 
            "amount": 180,//monto total
            "amountWithoutTax": 180,//monto que no cobrar impuestos 
            "amountWithTax": 0,//monto que cobrar impuestos excluido el impuesto                  
            "tax": 0,//monto del impuestos 
            "reference": "Prueba Boton fetch", //motivo de transaccion opcional   
            "currency": "USD",//ISO DE MONEDA                    
            "clientTransactionId": redirectClientTraxID,//id unico proporcionado por el comercio
            "storeId": "your_storeId",    
            "ResponseUrl": "https://your-domain.com/Confirm"
        };

        //Iniciar solicitud: POST 
        const  url = "https://pay.payphonetodoesposible.com/api/button/Prepare";
        fetch(url, {
            method: "POST",
            headers: headers,
            body: JSON.stringify(bodyJSON)
        })
        .then((res) => res.json())
        .catch((error) => {
                // Se crea etiqueta <pre> que contiene el error
                const jsonResult = document.createElement("pre");
                jsonResult.textContent = JSON.stringify(error, null, 2);

                // Mostrar los enlaces en el documento con un salto de línea entre ellos
                const container = document.createElement("div");
                container.appendChild(jsonResult);

                // Agregar los enlaces al body del documento o a un contenedor específico
                document.body.appendChild(container);
            })
        .then((data) => {
            // Se procesa la respuesta JSON
            const payWithPayPhone = data.payWithPayPhone;
            const payWithCard = data.payWithCard;

            // Se crea etiquetas <a> con los enlaces hacia el formulario
            const payWithPayPhoneLink = document.createElement("a");
            payWithPayPhoneLink.href = payWithPayPhone;
            payWithPayPhoneLink.textContent = "Pagar con PayPhone";

            const payWithCardLink = document.createElement("a");
            payWithCardLink.href = payWithCard;
            payWithCardLink.textContent = "Pagar con Tarjeta Visa/MasterCard";

            // Se crea etiqueta <pre> que contiene el json de respuesta
            const jsonResult = document.createElement("pre");
            jsonResult.textContent = JSON.stringify(data, null, 2);

            // Mostrar los enlaces en el documento con un salto de línea entre ellos
            const container = document.createElement("div");
            container.appendChild(payWithPayPhoneLink);
            container.appendChild(document.createElement("br")); // Salto de línea
            container.appendChild(document.createElement("br")); // Salto de línea
            container.appendChild(payWithCardLink);
            container.appendChild(document.createElement("br")); // Salto de línea
            container.appendChild(document.createElement("br")); // Salto de línea
            container.appendChild(jsonResult);

            // Agregar los enlaces al body del documento o a un contenedor específico
            document.body.appendChild(container);
        });    
    </script>
</head>
<body>
    <h1>Ejemplo de Solicitud POST con Fetch</h1>
    <div id="resultado"></div>    
</body>
</html>

📬Respuesta a la solicitud POST

Al realizar la solicitud POST, recibirás un objeto JSON que incluye los siguientes parámetros:

{
    "paymentId": "GSizecyUkIAkxTj3SQ",
    "payWithPayPhone": "https://pay.payphonetodoesposible.com/PayPhone/Index?paymentId=GSizecyUkIAkxTj3SQ",
    "payWithCard": "https://pay.payphonetodoesposible.com/Anonymous/Index?paymentId=GSizecyUkIAkxTj3SQ"
}

• paymentId: Identificador del pago.
  
• payWithPayPhone: URL del formulario para realizar el pago mediante la app de Payphone.
  
• payWithCard: URL del formulario para realizar el pago directamente con su tarjeta de crédito o débito.
  

Al redireccionar desde el dominio hacia los enlaces del formulario se mostrará de la siguiente forma:

Los clientes pueden pagar con tarjetas de crédito y débito (Visa , MasterCard), así como con saldo Payphone. Independientemente del método de pago, recibirás la misma respuesta de transacción, ya sea aprobada o rechazada.

❌ Respuesta a error en la solicitud POST

Si algun campo no cumple con las reglas o formato en la solicitud POST, recibirás un objeto JSON que incluye el detalle del error:

{
    "message": "Validaciones fallidas",
    "errorCode": 800,
    "errors": [
        {
            "message": "Amount",
            "errorCode": 0,
            "errorDescriptions": [
                "El campo Amount no es igual a la suma de AmountWithTax, AmountWithoutTax, Tax, Service, Tip"
            ]
        }
    ]
}

📌 Consideraciones

⏱️ Tiempo de vida del formulario

• Cada enlace como el formulario del botón de Pagos tiene una vigencia de 10 minutos desde su carga.
• Si el usuario no completa el pago en ese tiempo, el formulario expirará y se deberá generar uno nuevo.

🚫 Error de "No Autorizado"

¿Por qué ocurre este error?

El mensaje de “Acceso denegado o dominio no permitido” al intentar cargar o ejecutar el boton de Pagos puede deberse a una de las siguientes razones:

1. 🌐 Dominio no autorizado

• Los Formularios del Botón de Pagos solo funcionaran si son redireccionados desde el dominio registrado en tu configuración de desarrollador en Payphone Developer.
• Si intentas redireccionar desde otro dominio o abrir el enlace directamente, se bloqueará por motivos de seguridad.
• ✅ Solución: Asegúrate de que la redirección hacia el formulario de pago se realice desde el mismo dominio que configuraste en tu cuenta de Payphone.

2. 🛡️ Falta de identidad del sitio (Referrer-Policy)

En algunos frameworks o servidores, existe una configuración por defecto que no comparte la identidad del sitio web desde donde se hace la redirección al formulario de pago.

Esto impide que Payphone verifique el origen de la solicitud y provoca el error de acceso denegado.

La configuración detectada que puede causar el error:

• Referrer-Policy: en las plataformas mas comunes como C# / ASP.NET, WordPress, entre otras
• SECURE_REFERRER_POLICY: Desde Django 3.1 en adelante

📘 ¿Qué es la Referrer-Policy?

La Referrer-Policy es una política de seguridad del navegador que define qué información del origen (referencia) se envía al hacer peticiones a otros recursos.

A continuación, se muestran las opciones más comunes:

• no-referrer: No se envía ninguna referencia. Máxima privacidad, pero puede romper funcionalidades.
• no-referrer-when-downgrade: Envía la referencia solo si ambos sitios usan HTTPS.
• origin: Envía solo el esquema y host del sitio (sin ruta). Nivel medio de privacidad.
• origin-when-cross-origin: Como origin, pero solo en solicitudes entre sitios distintos.
• strict-origin: Similar a origin, pero restringido a HTTPS.
• strict-origin-when-cross-origin: Mayor control sobre envíos entre orígenes cruzados.
• no-referrer: No se envía ninguna referencia. Máxima privacidad, pero puede romper funcionalidades.

✅ Recomendación de Payphone

Para garantizar el correcto funcionamiento de Boton de Pagos, recomendamos usar:

• origin
• origin-when-cross-origin

Esto proporciona el equilibrio ideal entre funcionalidad y privacidad, y permite a Payphone validar correctamente el origen de la solicitud.

🧾Consultar respuesta de la transacción

Una vez que el usuario completa el pago, será redirigido automáticamente a la URL de respuesta que hayas configurado previamente en la plataforma de Payphone.

Esta URL incluirá dos parámetros esenciales en la cadena:

• id Número entero que representa el identificador único de la transacción generado por Payphone.
• clientTransactionId Cadena de texto definida como identificador unico por tu plataforma al iniciar el pago.

Es crucial capturar estos parámetros para poder realizar una solicitud POST al método Confirm.

🔸 Ejemplo en PHP para obtener los parámetros de la URL:

$id = isset($_GET["id"])?$_GET["id"]:0;
$clientTransactionId = isset($_GET["clientTransactionId"])?$_GET["clientTransactionId"]:"";

✔️Confirmar el Estado de la Transacción API Buttom/Confirm :

Para verificar si una transacción fue aprobada, cancelada o fallida, debes realizar una solicitud POST al endpoint de confirmación.

Esto te permitirá mostrar un mensaje claro al usuario sobre el resultado.

🔗Endpoint del API Confirm

https://pay.payphonetodoesposible.com/api/button/V2/Confirm

📦 Cuerpo de la solicitud (JSON):

El cuerpo de la solicitud debe ser un objeto JSON que contenga los siguientes parámetros, los cuales son los valores que se recibió de la URL de respuesta:

{
  "id": 0,
  "clientTxId": "string"
}

🔐 Es fundamental incluir las siguientes cabeceras en la solicitud:

• Authorization: bearer TU_TOKEN (Esta cabecera debe contener el token de autenticación de tu aplicación, precedido por la palabra “Bearer”. Este token es el mismo que utilizaste al preparar la transacción inicialmente).
• Content-type: application/json (Indica que el formato de los datos enviados en el cuerpo de la solicitud es JSON).

📬Respuesta satisfactoria de solicitud POST

Si la solicitud es correcta, recibirás un objeto JSON con el detalle de la transacción. Los parámetros recibidos son:

{
    "email": "aloy@mail.com",
    "cardType": "Credit",
    "bin": "530219",
    "lastDigits": "XX17",
    "deferredCode": "00000000",
    "deferred": false,
    "cardBrandCode": "51",
    "cardBrand": "Mastercard Produbanco/Promerica",
    "amount": 315,
    "clientTransactionId": "ID_UNICO_X_TRANSACCION-001",
    "phoneNumber": "593999999999",
    "statusCode": 3,
    "transactionStatus": "Approved",
    "authorizationCode": "W23178284",
    "message": null,
    "messageCode": 0,
    "transactionId": 23178284,
    "document": "1234567890",
    "currency": "USD",
    "optionalParameter3": "Descripción Extra",
    "optionalParameter4": "ELISABETH SOBECK",
    "storeName": "Tienda Payphone",
    "date": "2023-10-10T11:57:26.367",
    "regionIso": "EC",
    "transactionType": "Classic",
    "reference": "Pago por venta Fact#001"
}

📝Descripción de parámetros de respuesta

Una vez la llamada es satisfactoria obtendrás un JSON con los siguientes parámetros:

📬Respuesta con error de solicitud POST

Si la solicitud contiene algún error, recibirás un objeto JSON con el detalle del error. Los parámetros recibidos son:

{
    "message": "La transacción no existe, verifique que el identificador enviado sea correcto.",
    "errorCode": 20
}

🔙 Importante Recordar: Reverso Automático

Si tu sistema no ejecuta la fase de confirmación dentro de los primeros 5 minutos después del pago, Payphone reversará automáticamente la transacción. Esto se hace para proteger tanto al comercio como al cliente, evitando:

• Cobros indebidos
• Procesos incompletos por falta de datos
• Conflictos o reclamos por parte del cliente

📖 En resumen: Si no confirmas el pago, Payphone lo cancela automáticamente, ya que no puede garantizar que el comercio haya registrado correctamente la transacción.

🧱Ejemplo de Implementación API Buttom/Confirm

A continuación, se presenta varios ejemplos de cómo realizar solicitudes POST:

<?php
    //Obtener parametros enviados por payphone de la URL de respuesta
    $id = isset($_GET["id"])?$_GET["id"]:0;
    $clientTxId = isset($_GET["clientTransactionId"])?$_GET["clientTransactionId"]:"";

    //Preparar cabecera para la solicitud
    $headers[] = 'Authorization: Bearer your_token' ;//CREDENCIALES DE CONFIGURACION
    $headers[] = 'Content-Type: application/json' ;//TIPO DE APLICACION 

    //Preparar objeto JSON para solicitud
    $data = array(
        "id" => (int)$id,
        "clientTxId" => $clientTxId 
    );
    $objetoJSON = json_encode($data);

    //Iniciar solicitud curl: POST 
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://pay.payphonetodoesposible.com/api/button/V2/Confirm");
    curl_setopt($curl, CURLOPT_POST, 1);

    curl_setopt($curl, CURLOPT_POSTFIELDS, $objetoJSON);    
    curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    //Respuesta en formato JSON
    $curl_response = curl_exec($curl);
    //Finaliza solicitud curl: POST
    curl_close($curl);


    //Mostrar Resultado en Pantalla
    echo "<h1>Prueba Confirmacion de Transaccion</h1> <br>";

    $result= json_decode($curl_response);
    echo "Respuesta : <pre>".json_encode($result,JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )."</pre>";
?>

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Confirmacion con jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   
        <script>
            //---------Funcion que obtiene parametros de la url---------//
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            } 

            var id=getQueryVariable('id');
            var clientTxId=getQueryVariable('clientTransactionId');

            $(document).ready(function() {
                $.ajax({
                    url: "https://pay.payphonetodoesposible.com/api/button/V2/Confirm",
                    type: "POST",
                    headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer your_token"
                    },
                    data: JSON.stringify({ 
                        "id": id,
                        "clientTxId": clientTxId
                    }),
                    success: function(response) {
                        $("#resultado").html(
                            "Respuesta : <pre>" + JSON.stringify(response, null, 2) + "</pre>"
                        );
                    },
                    error: function(error) {
                        $("#resultado").html(
                            "Error en la solicitud : <pre>" + JSON.stringify(error, null, 2) + "</pre>"
                        );
                    }
                });
            });
        </script>
    </head>    
    <body>
        <h1>Ejemplo de Solicitud POST con jQuery</h1>
        <div id="resultado"></div>
    
    </body>
</html>

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Confirmacion con Fetch</title> 
        <script>
            //---------Funcion que obtiene parametros de la url---------//
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable) {
                        return pair[1];
                    }
                }
                return "0";
            } 

            const id=getQueryVariable('id');
            const clientTxId=getQueryVariable('clientTransactionId');

            const  headers = {
                "Content-Type": "application/json",
                "Authorization": "Bearer your_token",
                "Referer": document.referrer
            };

            const bodyJSON = { 
                "id": id,
                "clientTxId": clientTxId
            };

            const  url = "https://pay.payphonetodoesposible.com/api/button/V2/Confirm";

            fetch(url, {
                method: "POST",
                headers: headers,
                body: JSON.stringify(bodyJSON)
            })
            .then((res) => res.json())
            .catch((error) => {
                // Creamos la etiqueta <pre> que contiene el error
                const jsonResult = document.createElement("pre");
                jsonResult.textContent = JSON.stringify(error, null, 2);

                // Agregar etiqueta <pre> al <div>
                const container = document.createElement("div");
                container.appendChild(jsonResult);

                // Agregar la respuesta al body del documento o a un contenedor específico
                document.body.appendChild(container);
            })
            .then((data) => {

                // Creamos las etiquetas <a>
                const jsonResult = document.createElement("pre");
                jsonResult.textContent = JSON.stringify(data, null, 2);

                // Mostrar los enlaces en el documento con un salto de línea entre ellos
                const container = document.createElement("div");
                container.appendChild(jsonResult);

                // Agregar los enlaces al body del documento o a un contenedor específico
                document.body.appendChild(container);
            });  
        </script>
    </head>    
    <body>
        <h1>Confirmacion de Transaccion con Fetch</h1>   
    </body>
</html>

¡Listo! Si llegaste hasta aquí, ya tienes la lógica principal implementada. En la siguiente sección del manual podrás ver cómo hacer pruebas con datos simulados y pasar a producción.

🎞️ Video Tutorial

A continuación, encontrarás un video donde podrás ver cómo integrar nuestro Botón de Pago en pocos minutos.

🔰Pruebas y paso a producción

Una vez que tu aplicación esté en producción, el proceso estará completo.
¡Felicidades por integrar Boton de Pagos por redireccion de Payphone!

↩️Reverso de Transacciones

🔧Funcionalidades Adicionales