Boton de pago
Cajita de pagos | RecomendadoBotón de pago por redirecciónTokenizaciónSplit de Pagos
Plugins
WoocommercePrestashop
APIs
Links de PagoAPI SalePagos MasivosWebViewNotificación ExternaAPI UserConsulta por LotesPre-registro de comercios
Soporte
visita payphone.app
  • 🔹📎 ¿Qué es Webview de Payphone?

  • 🔹🛡️ Proceso de Autorización

  • 🔹🏁 Obtener Código QR de tienda

  • 🔹🛠️ Implementación de Webview

  • 🔹🧾 Notificación de Transacciones

  • 🔹🔂 Flujo del consumidor

  • 🔹🔰 Entorno de Producción

Webview Payphone

📎¿Qué es Webview de Payphone?

Webview de Payphone es una funcionalidad dentro de la aplicación de Payphone que permite a los comercios integrar sus páginas web directamente en la interfaz de la aplicación móvil. Esto permite a los usuarios interactuar con el comercio a través de una interfaz personalizada sin salir de la aplicación Payphone. Los usuarios pueden ver productos, realizar pagos y recibir notificaciones de transacciones de manera sencilla, todo dentro de un entorno controlado.

🔄Flujo de la Webview Payphone

El flujo básico del uso de la funcionalidad Webview en Payphone es el siguiente:

  1. Inicio: El usuario abre la aplicación Payphone en su dispositivo.
  2. Escaneo de QR: El usuario escanea el código QR proporcionado por la tienda.
  3. Verificación de Webview: La aplicación Payphone verifica si el comercio tiene habilitada la funcionalidad Webview.
    • Webview está habilitado (SI): ✔️
      • Carga de Webview: Se carga la página web del comercio dentro de la Webview de la aplicación Payphone.
      • Interacción del usuario: El usuario navega e interactúa con la página web del comercio.
      • Solicitud de pago: La página web muestra los montos a pagar y solicita al usuario que confirme el pago a través de la aplicación Payphone.
      • Proceso de cobro en Payphone: La aplicación Payphone procesa el pago con los montos indicados por la página web.
      • 📄 Resultado de la transacción:
        • ✅Transacción aprobada:
          • Se muestra un recibo al usuario en la aplicación Payphone.
          • Se envía un detalle de la transacción al webhook del comercio.
          • Confirmación del Webhook:
            • El webhook del comercio debe responder con una confirmación de recepción o un mensaje de error.
            • El comercio continúa con sus procesos internos para transacciones aprobadas.
        • ❌Transacción Cancelada o Rechazada:
          • Se muestra un mensaje de cancelación o rechazo al usuario en la aplicación Payphone.
          • No se envía información al webhook del comercio
    • WebView no habilitado (NO): 🚫
      • Proceso de Autopago: La aplicación Payphone inicia el proceso de autopago estándar para el comercio.

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

  1. Seguridad: La URL del comercio debe tener un certificado SSL (HTTPS).
  2. Imágenes ligeras: Las imágenes en la página web deben estar optimizadas para dispositivos móviles.
  3. Diseño adaptable: La pagina web debe ser responsiva para acoplarse a las pantallas de celulares.
  4. Datos clave: Los datos del método onComplete(Id, amount, name, currency, token) son obligatorios.
  5. Permiso necesario: El servicio requiere de una autorización previa para poder ser utilizado.
  6. Entorno de Producción Exclusivo: La integración de WebView con Payphone Personal solo es funcional en el entorno de producción.
  7. Pruebas en Entorno Controlado: Realizar pruebas exhaustivas en un entorno de producción controlado es esencial para garantizar la estabilidad y el correcto funcionamiento de la integración.

🛡️Proceso de Autorización para Webview

El acceso al servicio de Webview 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: Webview
  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.
✅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 Webview.
  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.

🏁¿Cómo Obtener el Código QR de la Tienda?

En la plataforma Payphone Business, los comercios pueden crear tiendas y obtener códigos QR únicos para cada una.

🏪 Paso 1: Crear Tiendas

Para crear tiendas en Payphone, sigue estos pasos:

  1. Inicia sesión con el administrador en la plataforma Payphone Business.
  2. Dirígete al menú de "Tiendas".
  3. Selecciona la opción "Crear tienda".
  4. Completa los campos requeridos
  5. Selecciona "Guardar" 💾 para aplicar los cambios.
🔗 Paso 2: Asignación de Tiendas a Usuarios

Para asignar o vincular tiendas a usuarios, sigue estos pasos:

  1. Accede al menú de Usuarios.
  2. Selecciona el usuario deseado y haz clic en el icono de "Editar" ✏️ en la columna "Acciones".
  3. En la sección "Seleccionar Tienda", marca las casillas correspondientes a las tiendas a las que el usuario tendrá acceso.
  4. Haz clic en el botón "Guardar" 💾 para confirmar los cambios.
🏁 Paso 3: Obtener Código QR

Para obtener el código QR de una de tus tiendas en Payphone Business, sigue estos pasos:

  1. Inicia sesión en Payphone Business. Se te pedirá seleccionar la tienda para la cual deseas obtener el código QR.
  2. Dirígete al menú "Ver código QR".
  3. Se mostrará el código QR de la tienda seleccionada, junto con las opciones para descargarlo o imprimirlo.
  4. Si necesitas obtener el código QR de otra tienda, puedes cambiar la tienda desde el icono de usuario en la esquina superior derecha, y seleccionando la opción "Cambiar de Tienda"

🛠️Guía de Implementación: Webview Payphone

🔁 Flujo General de Integración
  1. Escanear QR: Al escanear el código QR de la tienda, la aplicación Payphone invoca la función interna para obtener la información de la tienda y verificar si Webview está habilitado.
  2. Verificación del Comercio: El comercio debe tener habilitado el permiso para usar Webview y configurada una URL segura (https) que interactúe con Payphone.
  3. Autenticación del Comercio: Al cargar la Webview, la pagina web del comercio debe autenticarse con Payphone mediante un token mediante la función onPageLoad(token).
  4. Presentación de pagina web: Al recibir el storeId mediante la función setAddData(Data), el comercio muestra la página web correspondiente que permitir la interacción del usuario con la tienda.
  5. Solicitud de Pago: La pagina web en la Webview se comunica con Payphone utilizando la función onComplete(Id,amount,name,currency,token) para transmitir los detalles de la transacción y completar el pago.
  6. Proceso de cobro en Payphone: La aplicación Payphone procesa el pago con los montos indicados por la página web
  7. Notificacion de la transacción: Se envía el detalle de la transacción aprobada al webhook del comercio.
🔑 Obtención del Token de Autenticación

Para obtener el token necesario para la autenticación, debes hacer una llamada POST a la siguiente URL:

🔗 Endpoint

http://pay.payphonetodoesposible.com/token

🧾Cabeceras Requeridas:

  • Content-Type: application/x-www-form-urlencoded (Indica el formato de los datos enviados en el cuerpo de la solicitud ).
  • Accept-Language: es .

📦 Estructura del Cuerpo de la Solicitud:

El cuerpo de la solicitud debe ser un conjunto de pares clave-valor que incluya:

  1. client_id: "Identificador de aplicacion"
  2. client_secret: "Contraseña secreta de la aplicacion"
  3. company_code: "Identificador del comercio RUC/Ci registrado en Payphone"
  4. grant_type: "client_credentials"

⚠️ Importante: Credenciales de Autenticación


Para comenzar a utilizar Webview Payphone , es fundamental que configures tu ambiente de desarrollo.

En esta sección encontrarás todos los pasos necesarios para obtener las credenciales necesarias (client_id, client_secret) y realizar la integración correctamente.

‍Asegúrate de seguir todos los pasos para crear una aplicación tipo API antes de continuar.

Clic sobre el botón.


Configuración de Ambiente y Obtención de Credenciales



📬Respuesta de Solicitud POST:

{
    "access_token": "your_token",
    "token_type": "bearer",
    "expires_in": 31535999999,
    "refresh_token": "36284aec748545cf8b283d6eafdf7bf8",
    ".issued": "Mon, 17 Mar 2025 16:38:32 GMT",
    ".expires": "Sun, 18 Jul 3024 16:38:32 GMT"
}

El campo más importante es access_token, el cual debe ser entregado a la función onPageLoad(token) para la autenticación.

🧱Ejemplos de solicitud POST a Token

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

PHP
JQUERY
FETCH
<?php
    //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);
        //Respuesta en formato JSON
        $curl_response = curl_exec($curl);
        //Finaliza solicitud curl: POST
        curl_close($curl);
        return json_decode($curl_response);
    }

    //Preparar credenciales para la solicitud
    $client_id = "JFafK1Z4o666g4GT9i9w";
    $key_secret = "ilIr2d333f2c87QhdYm4bw";
    $ruc_ci = "0123456789001";
    //URL para solicitud POST
    $url="https://pay.payphonetodoesposible.com/token";

    //Preparar cabecera para la solicitud
    $headers[] = 'Accept-language: es' ;
    $headers[] = 'Content-Type: application/x-www-form-urlencoded' ;//TIPO DE APLICACION 
    
    //Preparar Body para solicitud
    $key_value = array(
        "client_id" => $client_id,
        "client_secret" => $key_secret,
        "company_code" => $ruc_ci, 
        "grant_type" => "client_credentials"
    );
    $data = http_build_query($key_value);
     
    //realizar solicitud http POST
    $result=curlPost($url, $headers,$data);


    //Mostrar Resultado en Pantalla
    echo "<h1>Obtener Token Webview-Payphone</h1>";
    echo "Cuerpo Solicitud : <pre>".json_encode($key_value,JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )."</pre>";
    echo "Respuesta : <pre>".json_encode($result,JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT )."</pre>";
    if(isset($result->access_token)){        
        echo "Token : <label>".$result->access_token."</label>";
    }
?>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Obtener Token</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>   
    </head>    
    <body>
        <h1>Obtener Token Webview-Payphone</h1>
        <div>
            <label>Cuerpo Solicitud : </label><pre id="body"></pre>
            <label>Respuesta : </label><div id="result"></div>
        </div>       

        <script>
            
            //Preparar credenciales para la solicitud
            const client_id = "JFafK1Z4o666g4GT9i9w";
            const key_secret = "ilIr2d333f2c87QhdYm4bw";
            const ruc_ci = "0123456789001";

            //URL para solicitud POST
            const url_api="https://pay.payphonetodoesposible.com/token";

            //Preparar cabecera para la solicitud
            const headers_api = {
                "Accept-language": "es" ,
                "Content-Type": "application/x-www-form-urlencoded" //TIPO DE APLICACION 
            } ;
            
            //Preparar Body para solicitud
            const key_value = {
                "client_id" : client_id,
                "client_secret" : key_secret,
                "company_code" : ruc_ci, 
                "grant_type" : "client_credentials"
            };
            const data_api = new URLSearchParams(key_value);

            // Mostrar en pantalla datos relevantes            
            document.getElementById("body").innerHTML=JSON.stringify(key_value, null, 2);

            //Solicitud http POST
            $(document).ready(function() {
                $.ajax({
                    url: url_api,
                    type: "POST",
                    headers: headers_api,
                    data: data_api.toString(),
                    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>Obtener Token</title>
    </head>    
    <body>
        <h1>Obtener Token Webview-Payphone</h1>
        <div>
            <label>Cuerpo Solicitud : </label><pre id="body"></pre>
            <label>Respuesta : </label>
        </div>       

        <script>
            
            //Preparar credenciales para la solicitud
            const client_id = "JFafK1Z4o666g4GT9i9w";
            const key_secret = "ilIr2d333f2c87QhdYm4bw";
            const ruc_ci = "0123456789001";
            
            //URL para solicitud POST
            const url_api="https://pay.payphonetodoesposible.com/token";

            //Preparar cabecera para la solicitud
            const headers_api = {
                "Accept-language": "es" ,
                "Content-Type": "application/x-www-form-urlencoded" //TIPO DE APLICACION 
            } ;
            
            //Preparar Body para solicitud
            const key_value = {
                "client_id" : client_id,
                "client_secret" : key_secret,
                "company_code" : ruc_ci, 
                "grant_type" : "client_credentials"
            };
            const data_api = new URLSearchParams(key_value);

            // Mostrar en pantalla datos relevantes            
            document.getElementById("body").innerHTML=JSON.stringify(key_value, null, 2);

            //Solicitud http POST
            fetch(url_api, {
                method: "POST",
                headers: headers_api,
                body: data_api.toString()
            })
            .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>
⚙️Funciones de Webview Payphone
🔸Función onPageLoad 🔑

Una vez obtenido el token, la pagina web se comunica con la Webview del aplicativo PayPhone mediante la funcion onPageLoad(token) para comprobar la autenticación y permitir la carga completa de la Webview.

window.interface.onPageLoad(access_token);
🔸Función setAppData 🛍️

Una vez validado el token, el aplicativo Payphone proporciona el storeId a la función setAppData(data) que debe encuentrarse dentro de la página web.

window.setAppData = function(data) {
    if (typeof data === "string" || data instanceof String) {
        this.objetStore = JSON.parse(data);
    } else {
        this.objetStore = data;
    }
    objetStore.storeId; 
};
🔸Función onComplete 💸

Cuando ya se tiene listos los valores a cobrar se lo debe comunicar al app de Payphone desde la página web en la Webview llamando a la funcion onComplete(Id, amount, reference, currency, token) para pasar los detalles de la transacción.

    window.interface.onComplete(
      id,
      amount, // entero
      reference,
      currency, // ISO Code
      token
    );  

Los parametos se describen a continuacion.

  1. id: Identificador asignado por el comercio a cada transacción para su seguimiento.
  2. amount: Valor total a cobrar. Debe expresarse como Entero.
  3. reference: Descripción o detalle del cobro
  4. currency: Código de moneda ISO 4217. (ej:USD)
  5. token: Token de Autenticación, mismo que se creo inicialmente.

*Valores Monetarios:

Todos los valores monetarios deben expresarse en enteros. Es decir, se multiplica el valor en dólares por 100. Por ejemplo:

$1 dólar = 100
$1.50 dólares = 150
$10 dólares = 1000
$12.68 dólares = 1268

🔸Función close 🚪

Esta Función te permite cerrar el webview.

window.interface.close();

🧱Ejemplo básico de pagina para Webview - Payphone:

Radio input
Text Input
style.css
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">    
        <title>Webview Payphone</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript" >            
            const token="YOUR_TOKEN";         
            
            $(document).ready(function()
            {        
                window.interface.onPageLoad(token);
            }); 

        </script>
    </head>
    <body>
        <div  class="container">
            <h1 id="store_name" class="title_wp"></h1>
            <form id="formid" class="form_wp">
                <div id="formStoreProducts" class="StoreProducts_wp">
                </div>
                <input type="button" id="pagar" value="Pagar" class="buttom_wp">
                <input type="button" id="btn_salir" value="Salir" class="buttom_wp">
            </form>
        </div>
        <script type="text/javascript" >
            const stores = [
                {
                    name: "Vending Machine 1 4 - Pre Autorizaciones",
                    store_id: "841f0678-xy48-40a9-b009-a8431f22dcb3",
                    products: [
                        { id: "sku123", name: "Refrescos", price: 130 },
                        { id: "sku124", name: "Patatas", price: 150 },
                        { id: "sku125", name: "Chicles", price: 170 },
                        { id: "sku126", name: "Bocadillos", price: 190 }
                    ]
                },
                {
                    name: "Vending Machine 2 Pruebas Dm",
                    store_id: "53dd95e0-s6h4-4eca-9f54-0c332vf40fae",
                    products: [
                        { id: "sku127", name: "Jugos", price: 140 },
                        { id: "sku128", name: "Galletas", price: 160 },
                        { id: "sku129", name: "Chocolates", price: 180 },
                        { id: "sku130", name: "Sandwiches", price: 200 }
                    ]
                }
            ];

            window.setAppData = function (data) {
                let objetStoreQR = "";
                if (typeof data === "string" || data instanceof String) {
                    objetStoreQR = JSON.parse(data);
                } else {
                    objetStoreQR = data;
                }
                fillPage(objetStoreQR.storeId);
            };

            function fillPage(storeId) {
                const selectedStore = stores.find(x => x.store_id == storeId);

                $("#store_name").text(selectedStore.name);
                const storeProducts = selectedStore.products;
                productStore(storeProducts);
            };

            function productStore(products) {
                const formProducts = $("#formStoreProducts");
                formProducts.empty(); 

                products.forEach(product => {
                    const productDiv = $(
                        '<div class="product_wp">'+
                            '<input type="radio" id="'+product.id+'" name="producto" value="'+product.id+'" class="radio_wp">'+
                            '<label for="'+product.id+'" class="label_wp">'+product.name+'- <strong>'+parseFloat(product.price/100).toFixed(2)+'</strong></label>'+
                        '</div>'
                    );
                    formProducts.append(productDiv);
                });
            };

            pay = function (product) {
                window.interface.onComplete(
                    product.id,
                    product.price, //entero
                    product.name,
                    "USD", //ISO Code eje. USD
                    token
                );
            };

            $("#pagar").click(function () {
                const selectedProductId = $("input[name='producto']:checked").val();
                if (selectedProductId) {
                    const selectedStore = stores.find(store => store.products.some(product => product.id === selectedProductId));
                    const selectedProduct = selectedStore.products.find(product => product.id === selectedProductId);
                    pay(selectedProduct);
                } else {
                    alert("Selecciona un producto por favor!!!");
                }
            });

            $("#btn_salir").click(function () {
                window.interface.close();
            });
            /*#######################################################################################*/
            //let data = { "storeId": "641f0678-dc28-40a9-b009-a8431e22dcb3" };
            //window.setAppData(JSON.stringify(data));
        </script>
    </body>
</html>
📋 Descripción del código de ejemplo

Este código HTML describe una página web que simula un pago para una máquina expendedora mediante Payphone, utilizando JavaScript y jQuery. A continuación, se explica en detalle:


📄Estructura HTML:

🏗️Cabecera (<head>):

  1. Se define la codificación de caracteres como UTF-8.
  2. <head>: Contiene metadatos e incluye recursos externos.
  3. Se incluye un título de la página.
  4. Vincula una hoja de estilo externa llamada style.css para el diseño de la página.
  5. Incluye la biblioteca jQuery para facilitar la manipulación del DOM y el manejo de eventos.
  6. <script type="text/javascript"> ... </script>: Incluye un bloque de código JavaScript, que es utilizado para autenticación o interacción con la webview Payphone.

🛒Cuerpo (<body>):

  1. Dentro de un contenedor, se muestra el nombre de la tienda, un formulario con productos, y dos botones: "Pagar" y "Salir".
  2. <script type="text/javascript"> ... </script>: Incluye un bloque de código JavaScript, que es utilizado para la interacción entre la pagina web con la webview Payphone.

⚙️Funcionalidades en JavaScript:

  1. Carga de la página: Cuando el documento está completamente cargado ($(document).ready(...)), se invoca la función window.interface.onPageLoad(token), pasando el token como parámetro, lo cual inicializa la autenticación con la webview de la aplicación móvil de Payphone.
  2. Variables y Tiendas: Se define un arreglo stores que contiene las tiendas disponibles, cada una con un nombre y un listado de productos (cada producto tiene un ID, nombre y precio).
  3. Función setAppData: Esta función es llamada con los datos de la tienda, se encarga de parsear esos datos y cargar la información correspondiente de la tienda de la cual se escaneo el codigo QR.
  4. Función fillPage(storeId): Función que busca la tienda correspondiente en el array stores. Actualiza el texto del elemento store_name con el nombre de la tienda y llama a la función productStore para mostrar los productos.
  5. Función productStore(products): Función que recibe un array de productos. Limpia el contenedor formStoreProducts y luego itera sobre los productos para crear elementos HTML que representan cada producto (un div con un radio y una label con el nombre y precio). Estos elementos se añaden al contenedor.
  6. Función pay(product): Función que llama a window.interface.onComplete para iniciar el proceso de pago. Pasa el id del producto, el price (como entero), el name del producto, la moneda (USD) y el token.
  7. Pagar: $("#pagar").click(...): Manejador de eventos para el botón "Pagar". Obtiene el valor del radio button seleccionado (el id del producto). Si se selecciona un producto, busca la tienda y el producto correspondiente y llama a la función pay. Si no se selecciona ningún producto, muestra una alerta.
  8. Salir: $("#btn_salir").click(...): Manejador de eventos para el botón "Salir". Llama a window.interface.close() para cerrar la WebView.
  9. 🧪Inicialización con datos de ejemplo: Al final del script, se establece un codigo comentado de ejemplo de datos que se pasan a window.setAppData, simulando la carga inicial de información sobre una tienda específica por parte de la webview . Esto lo realizara directamente la interfaz de webview al momento de escanear el código QR, pero se puede usar para pruebas netamente web, para visualizarlo antes de abrirlo directamente en la webview de Payphone.

🏁 Demostración de Implementación: Código QR de Ejemplo

Para visualizar el ejemplo de integracion de webview, escanea este código QR utilizando tu aplicación Payphone Personal.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">    
        <title>Webview Payphone</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css" media="all" />
        <script type="text/javascript" >            
            const token="your_token";         
            
            $(document).ready(function()
            {        
                window.interface.onPageLoad(token);
            }); 

        </script>
    </head>
    <body>
        <div  class="container">
            <h1 id="store_name" class="title_wp">..Cargando..</h1>
            <form id="formid" class="form_wp">
                <div id="formStoreProducts" class="StoreProducts_wp">
                    <label class="label_valor_wp">Ingresa el valor a pagar</label>
                    <input type="number" id="numero" name="numero" min="0.25" step="any" class="input_valor_wp" placeholder="0.00" required > 
                </div>
                <input type="button" id="pagar" value="Pagar" class="buttom_wp">
                <input type="button" id="btn_salir" value="Salir" class="buttom_wp">
            </form>
        </div>
        <script type="text/javascript" >
            const stores = [
                {
                    name: "Vending Machine 1 4 - Pre Autorizaciones",
                    store_id: "641f0678-dc28-40a9-b009-a8431e22dcb3"
                },
                {
                    name: "Vending Machine 2 Tranvia Cuenca",
                    store_id: "73dd95e0-e2a3-4eca-9f54-0c332ac40fae"
                }
            ];

            window.setAppData = function (data) {
                let objetStoreQR = "";
                if (typeof data === "string" || data instanceof String) {
                    objetStoreQR = JSON.parse(data);
                } else {
                    objetStoreQR = data;
                }
                fillPage(objetStoreQR.storeId);
            };

            function fillPage(storeId) {
                const selectedStore = stores.find(x => x.store_id == storeId);

                $("#store_name").text(selectedStore.name);
            };


            pay = function (amount) {
                const  traxID =Date.now();
                window.interface.onComplete(
                    traxID,
                    amount, 
                    "Vending Machine",
                    "USD", //ISO Code eje. USD
                    token
                );
            };

            $("#pagar").click(function () {
                let amount = document.getElementById('numero').value;
                if (isNaN(amount) || amount > 0 || !Number.parseFloat(Number(amount))) {
                    pay(parseFloat(amount).toFixed(2)*100);
                } else {
                    alert('Por favor, ingresa un número entero mayor que 0.');
                }
            });

            $("#btn_salir").click(function () {
                window.interface.close();
            });
            /*#######################################################################################*/
            let data = { "storeId": "73dd95e0-e2a3-4eca-9f54-0c332ac40fae" };
            window.setAppData(JSON.stringify(data));
        </script>
    </body>
</html>
📋 Descripción del código de ejemplo

Este código HTML crea una página web para una interfaz de pago simplificada, diseñada para ser utilizada dentro de una WebView (un componente que muestra páginas web dentro de aplicaciones móviles).
Permite a los usuarios ingresar un monto y realizar un pago a través del app de Payphone, utilizando un token de acceso obtenido del backend.
A continuación, se explica en detalle:.

📄Estructura HTML:

🏗️Cabecera (<head>):

  1. Metaetiqueta de codificación de caracteres (<meta charset="UTF-8">) para asegurar que los caracteres especiales se visualicen correctamente.
  2. <head>: Contiene metadatos e incluye recursos externos.
  3. Título de la página (<title>Webview Payphone</title>), que aparece en la pestaña del navegador.
  4. Enlace a un archivo de hojas de estilo externo (<link href="style.css" rel="stylesheet" type="text/css" media="all" />) para dar formato a la página.
  5. Incorporación de jQuery mediante un <script> que carga la librería de jQuery desde una CDN.
  6. Script JavaScript que inicializa un proceso en cuanto la página se carga, utilizando un token generado en el servidor (const token="your_token";).

🛒Cuerpo (<body>):

  1. Título de la tienda (<h1 id="store_name" class="title_wp">..Cargando..</h1>), inicialmente muestra "Cargando..." hasta que se cargue la tienda.
  2. Formulario de pago: Un campo de entrada para ingresar el valor a pagar, un botón para proceder al pago, un botón para salir de la webview.
  3. <script type="text/javascript"> ... </script>: Incluye un bloque de código JavaScript, que es utilizado para la interacción entre la pagina web con la webview Payphone.

⚙️Funcionalidades en JavaScript:

  1. Carga de la página: Cuando el documento está completamente cargado ($(document).ready(...)), se invoca la función window.interface.onPageLoad(token), pasando el token como parámetro, lo cual inicializa la autenticación con la webview de la aplicación móvil de Payphone.
  2. Definición de tiendas: Se define un array stores que contiene información sobre tiendas (nombre, ID).
  3. Función setAppData: Función que recibe datos JSON que contiene el storeId y llama a fillPage para actualizar el nombre de la tienda en la página. Esta funciona es llamada por el webview al escanear el codigo QR.
  4. Relleno de la página: La función fillPage(storeId) busca la tienda seleccionada a partir de su store_id y actualiza el nombre de la tienda.
  5. Función pay: Función que genera un traxID (identificador) y llama a window.interface.onComplete para iniciar el proceso de pago, pasando el traxID, el monto, una descricpion o referencia, la moneda (USD) y el token.
  6. Pagar: $("#pagar").click(...) Manejador de eventos para el botón "Pagar". Obtiene el monto del campo de entrada, valida que sea un número mayor que 0, y llama a la función pay si es válido.
  7. Salir: $("#btn_salir").click(...): Manejador de eventos para el botón "Salir". Llama a window.interface.close() para cerrar la WebView.
  8. Inicialización con datos de ejemplo: Al final del script, se establece un codigo comentado de ejemplo de datos que se pasan a window.setAppData, simulando la carga inicial de información sobre una tienda específica por parte de la webview . Esto lo realizara directamente la interfaz de webview al momento de escanear el código QR, pero se puede usar para pruebas netamente web, para visualizarlo antes de abrirlo directamente en la webview de Payphone.

🏁Demostración de Implementación: Código QR de Ejemplo

Para visualizar el ejemplo de integracion de webview, escanea este código QR utilizando tu aplicación Payphone Personal.

body {
    font-family: Arial, sans-serif;
    margin: 5px;
}
.container {
    margin: 3% 5%;
    text-align: center;
    width: 94%;
}
.title_wp{
    margin: 60px 0 15px 0;
}
.form_wp{
    width: 50%;
    margin: auto;
}
.StoreProducts_wp{
    padding: 20px 0;
}
.buttom_wp{
    width: 47%;
    align-items: center;
    padding: 8px 16px;
    font-size: 20px;
    cursor: pointer;  
    border-radius: 10px;
    background-color: #ff6400;
    color: white;
    border: none;  
    text-transform: uppercase;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.buttom_wp:hover {
  opacity: 0.8;
  font-weight: normal;
  background-color: #3e0b87;
}

.product_wp{
    overflow: hidden;
}
input[type='radio']{
    width: 2.7em; 
    height: 2.7em; 
    border-radius: 25px; 
    top: 0px; 
    left: 0px; 
    position: relative; 
    content: ''; 
    visibility: visible; 
    border: 2px solid white; 
    float: left;
}
  
input[type='radio']:checked:after { 
    width: 1.3em; 
    height: 1.3em; 
    border-radius: 25px; 
    top: 7px; 
    left: 7px; 
    position: relative; 
    background-color: #ff6400; 
    content: ''; 
    display: inline-block; 
    visibility: visible; 
    border: 2px solid #ff6400;
}

.label_wp{
    float: right;    
    font-size: 20px;
}

.label_valor_wp{
    font-size: 20px;
}
.input_valor_wp{
    margin: 10px 0;
    padding: 10px 10px;
    font-size: 20px;
}

@media (max-width:768px)  {
    .form_wp{
        width: 70%;
    }
}
@media (max-width:568px)  {
    .form_wp{
        width: 80%;
    }    
}
@media (max-width:320px)  {
    .form_wp{
        width: 90%;
    }
    .container {
        margin: 3% 1%;
        width: 98%;
    }
    .buttom_wp{
        width: 49%;
    }    
    .input_valor_wp {
        padding: 10px 3px;
        width: 100%;
    }
}
@media (max-width:240px)  {
    .form_wp{
        width: 95%;
    }
    .buttom_wp{
        width: 98%;
        margin-bottom: 10px;
    }
}
⚠️Recordatorio:

📩 Solicitud de Habilitación de la Funcionalidad WebView:

Una vez que la página web esté lista, deberás solicitar a Payphone la habilitación de la funcionalidad WebView para tu tienda específica.

  • ✉️ Envía un correo electrónico a tu contacto de soporte de Payphone o al canal de soporte designado como se menciona en la sección de Proceso de Autorización
  • 🏪 En tu comunicación, incluye el RUC/CI, el nombre de la tienda, y la URL completa de la página web que deseas cargar en la WebView.

🧾Notificación de Transacciones (Webhook)

Una vez que el usuario ha interactuado con la WebView de Payphone y se ha procesado el pago, Payphone envía una notificación externa a tu servidor para informarte sobre la transacción. Esta notificación es crucial para que tu sistema pueda realizar las acciones necesarias, como actualizar inventarios, preparar pedidos o activar servicios.


🗂️¿Cómo funciona la Notificación Externa?

  • Payphone envía un JSON con los detalles del pago a un Webhook que has configurado en tu servidor.
  • Tu servidor debe recibir esta notificación y responder con otro JSON para confirmar la recepción.

Servicio de Notificación Externa:

Para obtener una explicación detallada sobre el proceso de Notificación Externa, consulte nuestra documentación.


GUIA DE NOTIFICACION EXTERNA


⚠️Consideraciones:

  • Solo se notifican las transacciones aprobadas.
  • La comunicación debe ser a través de HTTPS con un certificado SSL válido.
  • Debes solicitar una autorización previa para utilizar este servicio.
  • El método a recibir la notificación debe llamarse "NotificacionPago".

La notificación externa permite automatizar procesos clave en tu negocio después de cada pago.

🔂Flujo del consumidor

A continuación, se detalla el flujo de interacción entre el consumidor, la aplicación Payphone Personal, y el comercio, a través de un proceso optimizado y simplificado para realizar pagos y obtener productos o servicios.

1. Escaneo del Código QR por el Consumidor:🏁

El proceso comienza cuando el consumidor abre la aplicación Payphone Personal en su dispositivo móvil.

  • Desde la app, selecciona la opción de Escanear QR, lo que le permite capturar el código QR exclusivo de la tienda de Payphone Business.
  • Este código QR está configurado para redirigir al consumidor a una página web personalizada para ese comercio en específico.
2. Redirección a la Página Web del Comercio: 🌐

Una vez escaneado el código QR, la aplicación Payphone carga dentro de una webview la página web del comercio, que ha sido previamente configurada para ese establecimiento. Esta página puede variar según el tipo de negocio y los productos o servicios que ofrezca.

La página web configurada puede ser para seleccionar productos de un catálogo, introducir valores para una compra personalizada (como un servicio), o cualquier otro tipo de interacción que el comercio haya configurado.

3. Selección de Opciones por el Consumidor: 🛒

El consumidor interactúa con la página web cargada dentro de la aplicación, donde puede seleccionar productos, servicios o incluso ingresar un valor para realizar su compra. Dependiendo del negocio, este paso puede implicar elegir artículos de un menú, seleccionar características de un producto, o insertar una cantidad a pagar.

Ejemplo de interacción:

  • En un comercio de vending, el consumidor selecciona el producto que desea comprar.
  • En un restaurante, el consumidor elige su platillo.
  • En una tienda de servicios, el consumidor puede ingresar un monto a pagar por un servicio específico.
4. Confirmación del Monto a Pagar: 💰

Una vez que el consumidor ha seleccionado las opciones que desea, la aplicación de Payphone muestra un desglose con el monto total a pagar, que ha sido calculado y enviado por la página web del comercio.

El consumidor debe revisar y confirmar que el monto que se muestra en la aplicación Payphone es correcto antes de proceder con el pago.

5. Selección del Método de Pago: 💳

Después de confirmar los detalles del pago, el consumidor selecciona uno de los métodos de pago disponibles en la aplicación de Payphone.
Las opciones de pago pueden incluir:

  • Tarjetas de crédito o débito previamente registradas en la aplicación.
  • Saldo disponible en la cuenta Payphone del consumidor.
  • Otras opciones de pago que Payphone ofrezca en la región (GiftCard).
6. Recepción del Recibo de Pago: 🧾

Una vez que la transacción ha sido aprobada y el pago procesado exitosamente, el consumidor recibe un recibo de pago digital dentro de la aplicación Payphone.

Este recibo incluye toda la información relevante de la transacción, como el monto, la fecha, el método de pago y un número de referencia, brindando al consumidor un comprobante oficial de su compra.

7. Notificación al Comercio y Proceso de Entrega: 📡

Simultáneamente con la emisión del recibo, Payphone envía una notificación a través de un webhook al sistema del comercio, el cual contiene todos los detalles de la transacción. Este webhook permite que el comercio tome las acciones necesarias para procesar el pedido del consumidor.

Dependiendo del tipo de comercio, este paso puede variar:

  • Vending Machines (Máquinas Expendedoras): El saldo del consumidor es acreditado en el sistema de la máquina expendedora, habilitando la elección del producto.
  • Máquinas Expendedoras de Café: El sistema reconoce el pago y comienza a preparar la bebida solicitada.
  • Restaurantes: El sistema de la cocina recibe la notificación para comenzar la preparación de la orden.

En todos los casos, el comercio puede proceder con la entrega del producto o servicio solicitado de manera automática, optimizando la experiencia tanto para el consumidor como para el establecimiento.

¡Y eso es todo! Si has llegado a este punto, ¡felicidades! Tu integración está completada.

🔰 Consideraciones sobre el Entorno de Producción

🖥️ Solo Entorno de PRODUCCIÓN:

Al integrar la aplicación Payphone Personal a través de WebView para realizar transacciones directas, es crucial tener en cuenta que esta integración está diseñada para operar exclusivamente en el entorno de producción. Esto significa que todas las pruebas y la funcionalidad completa de la integración solo estarán disponibles en un entorno de producción real.


🧪 Importancia de las Pruebas en un Entorno de Producción Controlado

Debido a esta dependencia del entorno de producción, se recomienda encarecidamente que cualquier prueba necesaria se lleve a cabo en un entorno de producción controlado.


Un entorno de producción controlado permite simular escenarios reales de transacciones sin afectar las operaciones en vivo. Esto asegura que la integración funcione correctamente y que se puedan identificar y resolver posibles problemas antes de la implementación completa.


📓 Información detallada

Consulta la guía detallada sobre nuestros entornos, con ejemplos, recomendaciones técnicas y configuraciones paso a paso:


📑Guia Entorno de Pruebas y Produccion


Videos tutorialesPolíticas de privacidadTérminos y condiciones
Copyright © 2024 Payphone | Todos los derechos reservados | Términos y condiciones