🛠️Guía de Implementación: Webview Payphone
🔁 Flujo General de Integración
- 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.
- 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.
- 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)
. - 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. - 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. - Proceso de cobro en Payphone: La aplicación Payphone procesa el pago con los montos indicados por la página web
- 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:
client_id:
"Identificador de aplicacion"
client_secret:
"Contraseña secreta de la aplicacion"
company_code:
"Identificador del comercio RUC/Ci registrado en Payphone"
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.
📬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
//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.
id:
Identificador asignado por el comercio a cada transacción para su seguimiento.amount:
Valor total a cobrar. Debe expresarse como Entero.reference:
Descripción o detalle del cobrocurrency:
Código de moneda ISO 4217. (ej:USD)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:
<!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>
):
- Se define la codificación de caracteres como UTF-8.
<head>
: Contiene metadatos e incluye recursos externos.- Se incluye un título de la página.
- Vincula una hoja de estilo externa llamada
style.css
para el diseño de la página. - Incluye la biblioteca jQuery para facilitar la manipulación del DOM y el manejo de eventos.
<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>
):
- Dentro de un contenedor, se muestra el nombre de la tienda, un formulario con productos, y dos botones: "Pagar" y "Salir".
<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:
- 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. - 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). - 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. 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.- 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. 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.- 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. - Salir:
$("#btn_salir").click(...)
: Manejador de eventos para el botón "Salir". Llama a window.interface.close()
para cerrar la WebView. - 🧪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>
):
- Metaetiqueta de codificación de caracteres (
<meta charset="UTF-8">
) para asegurar que los caracteres especiales se visualicen correctamente. <head>
: Contiene metadatos e incluye recursos externos.- Título de la página (
<title>Webview Payphone</title>
), que aparece en la pestaña del navegador. - 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. - Incorporación de jQuery mediante un
<script>
que carga la librería de jQuery desde una CDN. - 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>
):
- Título de la tienda (
<h1 id="store_name" class="title_wp">..Cargando..</h1>
), inicialmente muestra "Cargando..." hasta que se cargue la tienda. - 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.
<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:
- 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. - Definición de tiendas: Se define un array
stores
que contiene información sobre tiendas (nombre, ID). - 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. - 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. - 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. - 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. - Salir:
$("#btn_salir").click(...)
: Manejador de eventos para el botón "Salir". Llama a window.interface.close()
para cerrar la WebView. - 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.