Tokenización Payphone

📎¿Qué es tokenización de tarjetas?

La tokenización de tarjetas es un mecanismo de seguridad que permite a los comercios asociados a Payphone almacenar de forma segura un identificador único (cardToken) de la tarjeta de crédito o débito de un cliente, en lugar de los datos sensibles de la tarjeta. Este cardToken se utiliza para procesar pagos futuros sin la necesidad de volver a solicitar los datos completos de la tarjeta al cliente, siendo una funcionalidad adicional del botón de pago o cajita de pagos de Payphone

Flujo de tokenización 💳

🔹 1. Primera Transacción

1. El cliente realiza una compra a través del botón de pago de Payphone.
2. Si el comercio tiene la autorización necesaria, Payphone genera un token único para la tarjeta(cardToken) del cliente.
3. Payphone te envía ese cardToken junto con la información necesaria para confirmar la venta.

🔹 2. Transacciones Subsiguientes

1. El comercio usa el cardToken generado en la primera transacción para realizar nuevos cobros al cliente.
2. Payphone procesa la transacción utilizando el cardToken en lugar de los datos completos de la tarjeta.

📥Transacciones y Obtención del cardToken

1. Transacción Aprobada: Para que se genere y te sea entregado el token de la tarjeta (cardToken), la transacción realizada por el cliente a través del botón de pago o cajita de pagos debe ser aprobada por la entidad emisora de la tarjeta.
2. Retorno del cardToken: Si la transacción es exitosa, el cardToken será incluido en la respuesta que Payphone envía a tu url de respuesta.

⚠️Consideraciones Importantes: ¡Puntos Clave a Tener en Cuenta!

💳 Pagos Exclusivos con Tarjeta

1. La tokenización solo funciona para pagos directos con tarjetas de crédito o débito.
2. No es compatible con otros métodos de pago (saldo, giftcard o pagos directos del app Payphone.).

🔐 Seguridad en el Manejo de Tokens

1. Payphone implementa altos estándares de seguridad para proteger los tokens de las tarjetas.
2. Sin embargo, tú también debes seguir las mejores prácticas de seguridad en el manejo de estos datos para evitar riesgos.

👥 Sistema de Gestión de Usuarios

1. Debes contar con un sistema de gestión de usuarios activo y funcional.
2. Este sistema es esencial para vincular los datos de tus usuarios con los tokens de tarjeta y la información del titular proporcionada por Payphone.

✅ Consentimiento del Cliente

1. Siempre debes obtener el consentimiento explícito de tus clientes antes de almacenar los tokens de sus tarjetas.
2. Es fundamental cumplir con las leyes y regulaciones de protección de datos.

🔁Pagos Recurrentes

1. La tokenización de Payphone te da los cardTokens, pero no es un sistema de pagos recurrentes automático.
2. Tú debes implementar la lógica para realizar cobros periódicos utilizando estos tokens. ¡Payphone te da la llave, tú abres la puerta de la recurrencia!

🧩 Botón de Pago Activo y Configurado

1. Tu botón o cajita de pago debe estar correctamente configurado y operativo.
2. Integralo siguiendo las guías proporcionadas por Payphone

1. Esta guía incluye la configuración de aplicación en Payphone developer, preparación y confirmación de la transacción.

📬 Solicita Autorizacion

1. Una vez que el botón de pagos o cajita de pagos estén activos y funcionando correctamente, podrás realizar la solicitud de habilitación de tokenización.

🛡️Proceso de Autorización para Tokenización

El acceso al servicio de Tokenización Payphone requiere una autorización previa. A continuación, se detalla el proceso:

✉️ Solicitud de Autorización:

Para iniciar el proceso, el comercio debe enviar un correo electrónico a nuestra area comercial de Payphone con la siguiente información:

📨 Correo electrónico de contacto: Las solicitudes pueden enviarse a requests.docs@payphone.app

1. Asunto: Activación de la funcionalidad: Tokenización
2. Identificador del comercio: RUC, Cédula de Identidad
3. Nombre del comercio
4. Giro de Negocio: la actividad o conjunto de actividades principales que realiza la empresa para generar ingresos.
5. Motivo detallado de la solicitud: Explicar el uso que se le dará al servicio y los beneficios que aportará al negocio.
6. Información de contacto del solicitante: Nombre completo, número de teléfono y correo electrónico.

🔍Revisión y Evaluación por el Agente Comercial:

El agente comercial de Payphone revisará cuidadosamente la solicitud, analizando los siguientes aspectos:

1. Viabilidad comercial: Se evaluará si el servicio solicitado se alinea con la estrategia y los objetivos de Payphone.
2. Riesgos: Se identificarán y evaluarán los posibles riesgos asociados con la activación del servicio, como riesgos de seguridad o fraude.
3. Investigación adicional: El agente comercial podrá solicitar información adicional al cliente si es necesario para completar el análisis.
4. Reuniones: El agente comercial podrá programar reuniones con el cliente para discutir la solicitud en detalle y aclarar cualquier duda.

🏢Validación del Comercio:

Payphone realizará una verificación exhaustiva de la información del comercio, incluyendo:

1. Verificación de identidad: Se verificará la identidad del comercio y sus representantes.
2. Datos de contacto: Se validarán los datos de contacto proporcionados.
3. Actividad comercial: Se analizará la actividad comercial del comercio.
4. Evaluación de riesgos: Se evaluarán los riesgos asociados al comercio, como riesgo crediticio o riesgo de fraude.
5. Cumplimiento normativo: Se verificará que el comercio cumple con todas las regulaciones y normativas aplicables.
6. Firma de acuerdos: Se firmarán acuerdos de responsabilidad entre Payphone y el comercio para formalizar la relación.

📏Políticas de Seguridad:

De acuerdo con las políticas de seguridad de Payphone, se requiere que el comercio mantenga el 10% del saldo obtenido a través de la plataforma durante un período de 6 meses. Este plazo permite verificar la ausencia de transacciones no reconocidas o pagos no autorizados.

✅Aprobación de la Solicitud:

1. Autorización: Una vez que el comercio haya sido validado y se hayan obtenido las aprobaciones internas, el agente comercial autorizará el uso del servicio de Tokenización.
2. Activación: El área técnica de Payphone procederá a activar el servicio para el cliente.
3. Notificación: Se notificará al cliente que el servicio ha sido activado y se le proporcionarán las instrucciones de uso.

📡Seguimiento y Monitoreo:

1. Monitoreo continuo: Payphone realizará un seguimiento continuo del uso del servicio para asegurar su correcto funcionamiento y detectar posibles problemas.
2. Soporte: Se brindará soporte técnico al cliente en caso de cualquier inconveniente.

🛠️Implementación de tokenización

🪪Obtención del Token de Tarjeta (cardToken):

1. Primera Transacción: Realiza una transacción normal utilizando el botón de pago de Payphone.
2. Respuesta con Token: Si la transacción es aprobada y tienes los permisos necesarios, recibirás un nuevo parámetro llamado ctoken en la URL de respuesta. Este ctoken es el identificador único de la tarjeta del cliente y debe almacenarse de forma segura en el sistema del comercio.

📤Parámetros Recibidos:

En la respuesta del botón de pagos, el comercio recibirá los siguientes parámetros:

1. ID: Identificador de la transacción.
2. ‍ClientTransactionID: Identificador único proporcionado por el cliente.
3. ‍ctoken: Token de tarjeta si la transacción es aprobada y los permisos son adecuados.

👤Guardar Datos del Titular de la Tarjeta:

Continuando con con el proceso del botón de pagos, se realiza la confirmación de la transacción, este proceso devuelve un JSON con información de la transacción.

De estos datos obtenidos se debe almacenar de forma segura los siguientes campos:

1. email: Correo electrónico asociado a la cuenta del titular de la tarjeta.
2. phoneNumber: Número de teléfono registrado del titular.
3. document: Número de documento de identidad del titular.
4. optionalParameter4: Nombre completo del titular. (incluido solo si es pago con tarjeta)

⚠️Importante: El nombre del titular debe ser encriptado para ser utilizado en futuras solicitudes. Este dato encriptado se denomina cardHolder.

Todos estos datos te permiten tener una gestión eficiente para:

1. Gestión de clientes: Identificar a los usuarios y sus cardToken de manera eficiente.
2. Cumplimiento con regulaciones: Asegurar un almacenamiento adecuado de la información personal.

🔒Encriptación del nombre del titular de la tarjeta:

Para utilizar el servicio de tokenización es necesario q el nombre del titular este encriptado para posteriormente enviarlo en la solicitud de tokenización en el campo cardHolder.

Utiliza el algoritmo de encriptación AES 256 CBC sin vector de inicialización para cifrar el nombre del titular de la tarjeta antes de enviarlo en la solicitud.

1. Clave de Encriptación: Consulta la clave de encriptación específica en la configuración de Payphone Developer.

🧱Ejemplo encriptación:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Encriptacion AES 256 CBC</title>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
</head>
<body>
    <h1>Encriptacion AES 256 CBC sin vector de inicializacion</h1>
    <div><a>Nombre del titular: <strong id="userName"></strong></a></div>
    <div><a>Valor Encriptado : <strong id="result"></strong></a></div>       

    <script>
        //funcion que encripta en AES 256 CBC sin vector de inicializacion
        function encrypted_aes(optionalParameter4) {
            var key = CryptoJS.enc.Utf8.parse('your_coding_password');
            var iv = CryptoJS.enc.Utf8.parse('');
            var encrypted = CryptoJS.AES.encrypt(optionalParameter4, key,{ iv: iv });
            var result_aes = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
            return result_aes;
        }        
        //Nombre del titular
        const userName="User Name";
        //se llama a la funcion de encriptacion
        const cardHolder=encrypted_aes(userName) ;
        //se muestra resultados
        document.getElementById("userName").innerHTML=userName;
        document.getElementById("result").innerHTML=cardHolder;        
        console.log("Valor Encriptado : "+cardHolder);
    </script>
</body>
</html>

<?php
    //funcion que encripta en AES 256 CBC sin vector de inicializacion
    function encrypt($optionalParameter4,$codingPassword) {
        error_reporting(E_ERROR | E_PARSE | E_NOTICE);
        $encrypted = base64_encode(openssl_encrypt($optionalParameter4,'AES-256-CBC',$codingPassword,OPENSSL_RAW_DATA,""));   
        error_reporting(E_ALL);
        return $encrypted;
    }
    //Nombre del titular
    $userName="User Name";
    //se llama a la funcion de encriptacion
    $cardHolder=encrypt($userName,"your_coding_password");
    //se muestra resultados
    echo "<h1>Encriptacion AES 256 CBC sin vector de inicializacion</h1>";
    echo "<a>Nombre del titular: <strong>$userName</strong></a><br>";
    echo "<a>Valor Encriptado : <strong>$cardHolder</strong></a>";

?>

Una vez implementados estos pasos, el comercio contará con una tarjeta virtual asociada a cada cliente, facilitando pagos futuros y garantizando la seguridad de la información, mediante el uso del sistema de tokenización de Payphone.

🔧Generación de nuevas transacciones con cardToken:

Para generar nuevas transacciones utilizando los datos guardados como el cardToken, se debe realizar una solicitud HTTP POST:

🧩 API transaction/web

🔗 URL de la solicitud POST

https://pay.payphonetodoesposible.com/api/transaction/web

🔐 Cabeceras Requeridas:

• Authorization: bearer TU_TOKEN (Token de autenticación de la aplicación, precedido por la palabra "Bearer". Este token es el mismo que utilizaste al preparar la transacción inicialmente).
• Content-type: application/json (Formato de los datos: JSON).

📦Estructura del Cuerpo de la Solicitud:

El cuerpo de la solicitud debe ser un objeto JSON que incluya los datos del titular de la tarjeta (cardToken, cardHolder, email, documentId, phoneNumber ), montos y demás información para la nueva transacción

    {
        "cardHolder": "{{cardHolder}}",
        "cardToken": "{{ctoken_user}}",
        "documentId": "1234567890",
        "phoneNumber": "593999999999",
        "email": "aloy@mail.com",
        "amount": 315,
        "amountWithoutTax": 315,
        "amountWithTax": 0,
        "tax": 0,
        "service": null,
        "tip": null,
        "clientTransactionId": "ID_UNICO_X_TRX-101",
        "currency": "USD",
        "storeId": "your_storeId",
        "optionalParameter": "Concepto o motivo de cobro",
        "order": {
            "billTo": {
            	"billToId": 12,
                "address1": "Colorado Springs",
                "address2": "Denver",
                "country": "EC",
                "state": "Azuay",
                "locality": "Cuenca",
                "firstName": "Elisabeth",
                "lastName": "Sobeck",
                "phoneNumber": "+593999999999",
                "email": "aloy@mail.com",
                "postalCode": "010202",
                "ipAddress": "127.0.0.1"
            },
            "lineItems": [
                {
                    "productName": "Producto Vendido",
                    "unitPrice": 100,
                    "quantity": 1,
                    "totalAmount": 115,
                    "taxAmount": 15,
                    "productSKU": "SKU-4242.0001",
                    "productDescription": "DETALLE PRODUCTO"
                },
                {
                    "productName": "Servicio Entregado",
                    "unitPrice": 100,
                    "quantity": 2,
                    "totalAmount": 200,
                    "taxAmount": 0,
                    "productSKU": "SKU-4242.0001",
                    "productDescription": "DETALLE SERVICIO"
                }
            ]
        }
    }

amount = amountWithoutTax + amountWithTax  + tax + service + tip

📋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

📬Respuesta de solicitud

El resultado de una transacción exitosa incluirá el token de la tarjeta, el código de autorización, y otros detalles relevantes de la transacción

{
    "cardToken": "ctoken_user",
    "authorizationCode": "W46191086",
    "messageCode": 0,
    "status": "Approved",
    "statusCode": 3,
    "transactionId": 46191086,
    "clientTransactionId": "TOK2025-02-07T22:33:50.471Z",
    "currencyCode": "USD"
}

📝Descripción de parámetros de respuesta

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

🧱 Ejemplos de solicitudes POST al api transaction/web

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

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

    //Funcion q ejecuta una solicitud http POST
    function curlPost($urlAPI, $headers,$body) {
        //Iniciar solicitud curl: POST 
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $urlAPI);
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $body);    
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $curl_response = curl_exec($curl);
        //Finaliza solicitud curl: POST
        curl_close($curl);        
        //Respuesta en formato JSON
        return json_decode($curl_response);
    }
    // funcion de encriptacion en AES 256 CBC sin vector de inicializacion
    function encrypt($objet) {
        error_reporting(E_ERROR | E_PARSE | E_NOTICE);
        $encrypted = base64_encode(openssl_encrypt($objet,'AES-256-CBC',"your_codingPassword",OPENSSL_RAW_DATA,""));   
        error_reporting(E_ALL);
        return $encrypted;
    } 

    /*## Preparar credenciales como variables para la solicitud ##*/
    $token="your_token";
    $storeId = "your_storeID";

    //INFORMACION DE TARJETA Y DATOS DE USUARIO
    //token de tarjeta "ctoken"
    $cardToken = "ctoken_user";
    //datos del titular obtenidos de la confirmacion de la transaccion
    $documentId = "1234567890";
    $phoneNumber = "593999999999";
    $email = "aloy@mail.com";
    //Nombre del titular
    $userName="Elisabeth Sobeck";
    //ejecutar funcion de encriptacion para obtener cardHolder
    $cardHolder=encrypt($userName);
    //separar nombre en un arreglo
    $arrayName = explode(" ", $userName); 
    //Genera Dato Unico por transaccion 
    $clientTransactionID = substr((date("ymd-Hi-s").gettimeofday()["usec"]),0, 16);

    /*## Preparar informacion para la solicitud POST ##*/
    //URL del servicio payphone
    $url="https://pay.payphonetodoesposible.com/api/transaction/web";
    //Preparar cabecera para la solicitud
    $headers[] = 'Authorization: Bearer '.$token ;//CREDENCIALES DE CONFIGURACION
    $headers[] = 'Content-Type: application/json' ;//TIPO DE APLICACION 
     
    //Preparar objeto JSON para solicitud
    $data = array(
        "cardHolder"=> $cardHolder,
        "cardToken"=> $cardToken,
        "documentId"=> $documentId,
        "phoneNumber"=> $phoneNumber,
        "email"=> $email,
        "amount"=> 315,
        "amountWithoutTax"=> 315,
        "clientTransactionId"=> $clientTransactionID,
        "currency"=> "USD",
        "storeId"=> $storeId,
        "optionalParameter"=> "Concepto o motivo de cobro",
        "order"=> array(
            "billTo"=> array(
            	"billToId"=> 12,
                "address1"=> "Colorado Springs",
                "address2"=> "Denver",
                "country"=> "EC",
                "state"=> "Azuay",
                "locality"=> "Cuenca",
                "firstName"=> $arrayName[0],
                "lastName"=> $arrayName[1],
                "phoneNumber"=> "+".$phoneNumber,
                "email"=> $email,
                "postalCode"=> "010202",
                "ipAddress"=> "127.0.0.1"
            ),
            "lineItems"=> array(
                array(
                    "productName"=> "Producto o Servicio entregado",
                    "unitPrice"=> 315,
                    "quantity"=> 1,
                    "totalAmount"=> 115,
                    "taxAmount"=> 0,
                    "productSKU"=> "SKU-4242.0001",
                    "productDescription"=> "DETALLE PRODUCTO"
                )
            )
        )    
    );
    $bodyJSON = json_encode($data);

    //realizar solicitud http POST
    $result=curlPost($url, $headers,$bodyJSON);
   

     //Mostrar Resultado en Pantalla
     echo "<h1>🧩 Prueba de Transaccion con tokenizacion</h1> <br>";
     echo "🔗 POST: <pre>".$url."</pre>";  
     echo "📦 Cuerpo Solicitud : <pre>".json_encode($data,JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )."</pre>";   
     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 src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
    </head>    
    <body>
        <h1>Prueba de Transaccion con tokenizacion</h1>
        <div><a>Respuesta : <strong id="result"></strong></a></div>       

        <script>
            //funcion que encripta en AES 256 CBC sin vector de inicializacion
            function encrypted_aes(optionalParameter4) {
                var key = CryptoJS.enc.Utf8.parse('your_coding_password');
                var iv = CryptoJS.enc.Utf8.parse('');
                var encrypted = CryptoJS.AES.encrypt(optionalParameter4, key,{ iv: iv });
                var result_aes = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
                return result_aes;
            }        

            //token de tarjeta obtenido de url de respuesta "ctoken"
            const cardToken = "ctoken_user";
            //datos del titular obtenidos de la confirmacion de la transaccion
            const documentId = "1234567890";
            const phoneNumber = "593999999999";
            const email = "aloy@mail.com";
            //Nombre del titular
            const userName="Elisabeth Sobeck";
            //ejecutar funcion de encriptacion para obtener cardHolder
            const cardHolder=encrypted_aes(userName) ;
            //separar nombre en un arreglo
            const arrayName = userName.split(" ");
            //Genera Dato Unico por transaccion 
            const clientTransactionID = Date.now();

            

            $(document).ready(function() {
                $.ajax({
                    url: "https://pay.payphonetodoesposible.com/api/transaction/web",
                    type: "POST",
                    headers: {
                    "Content-Type": "application/json",
                    "Authorization": "Bearer your_token"
                    },
                    data: JSON.stringify({ 
                        "cardHolder": cardHolder,
                        "cardToken": cardToken,
                        "documentId": documentId,
                        "phoneNumber": phoneNumber,
                        "email": email,
                        "amount": 200,
                        "amountWithoutTax": 200,
                        "clientTransactionId": clientTransactionID,
                        "currency": "USD",
                        "storeId": "your_storeId",
                        "optionalParameter": "Concepto o motivo de cobro",
                        "order": {
                            "billTo": {
                                "address1": "Colorado Springs",
                                "address2": "Denver",
                                "country": "EC",
                                "state": "Azuay",
                                "locality": "Cuenca",
                                "firstName": arrayName[0],
                                "lastName": arrayName[1],
                                "phoneNumber": "+"+phoneNumber,
                                "email": email,
                                "postalCode": "010202",
                                "ipAddress": "127.0.0.1"
                            },
                            "lineItems": [
                                {
                                    "productName": "Producto o Servicio entregado",
                                    "unitPrice": 200,
                                    "quantity": 1,
                                    "totalAmount": 200,
                                    "taxAmount": 0,
                                    "productSKU": "SKU-4242.0001",
                                    "productDescription": "DETALLE PRODUCTO"
                                }
                            ]
                        }
                    }),
                    success: function(response) {
                        $("#result").html(
                            "<pre>" + JSON.stringify(response, null, 2) + "</pre>"
                        );
                    },
                    error: function(error) {
                        $("#result").html(
                            "Error en la solicitud : <pre>" + JSON.stringify(error, null, 2) + "</pre>"
                        );
                    }
                });
            });
        </script>    
    </body>
</html>

<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Tokenizacion con Fetch</title>            
        <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
    </head>    
    <body>
        <h1>Transaccion con Tokenizacion con Fetch</h1>  
        <div><a>Cuerpo : <pre id="data"></pre></a></div>
        <div><a>Respuesta : </a></div>
        <script>
             //funcion que encripta en AES 256 CBC sin vector de inicializacion
            function encrypted_aes(optionalParameter4) {
                var key = CryptoJS.enc.Utf8.parse('your_coding_password');
                var iv = CryptoJS.enc.Utf8.parse('');
                var encrypted = CryptoJS.AES.encrypt(optionalParameter4, key,{ iv: iv });
                var result_aes = encrypted.ciphertext.toString(CryptoJS.enc.Base64);
                return result_aes;
            }        

            //token de tarjeta obtenido de url de respuesta "ctoken"
            const cardToken = "ctoken_user";
            //datos del titular obtenidos de la confirmacion de la transaccion
            const documentId = "1234567890";
            const phoneNumber = "593999999999";
            const email = "aloy@mail.com";
            //Nombre del titular
            const userName="Elisabeth Sobeck";
            //ejecutar funcion de encriptacion para obtener cardHolder
            const cardHolder=encrypted_aes(userName) ;
            //separar nombre en un arreglo
            const arrayName = userName.split(" ");
            //Genera Dato Unico por transaccion 
            const clientTransactionID = Date.now();

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

            const bodyJSON = { 
                "cardHolder": cardHolder,
                "cardToken": cardToken,
                "documentId": documentId,
                "phoneNumber": phoneNumber,
                "email": email,
                "amount": 200,
                "amountWithoutTax": 200,
                "clientTransactionId": clientTransactionID,
                "currency": "USD",
                "storeId": "your_storeId",
                "optionalParameter": "Concepto o motivo de cobro",
                "order": {
                    "billTo": {
                        "address1": "Colorado Springs",
                        "address2": "Denver",
                        "country": "EC",
                        "state": "Azuay",
                        "locality": "Cuenca",
                        "firstName": arrayName[0],
                        "lastName": arrayName[1],
                        "phoneNumber": "+"+phoneNumber,
                        "email": email,
                        "postalCode": "010202",
                        "ipAddress": "127.0.0.1"
                    },
                    "lineItems": [
                        {
                            "productName": "Producto o Servicio entregado",
                            "unitPrice": 200,
                            "quantity": 1,
                            "totalAmount": 200,
                            "taxAmount": 0,
                            "productSKU": "SKU-4242.0001",
                            "productDescription": "DETALLE PRODUCTO"
                        }
                    ]
                }
            };
            document.getElementById("data").innerHTML=JSON.stringify(bodyJSON, null, 2);

            const  url = "https://pay.payphonetodoesposible.com/api/transaction/web";

            fetch(url, {
                method: "POST",
                headers: headers,
                body: JSON.stringify(bodyJSON)
            })
            .then((res) => res.json())
            .catch((error) => {
                // Creamos las etiquetas <a>
                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) => {

                // 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>     
    </body>
</html>

¡Y eso es todo! Si has llegado a este punto, ¡felicidades! Tu integración está completada. En la siguiente sección, te explicaremos cómo realizar pruebas y pasar a producción.

🔰Pruebas y paso a producción

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

↩️Reverso de Transacciones