Insertar cajita de pagos payphone
Insertar la cajita de pagos en tu sitio web es muy sencillo, debes agregar dos scripts, una fuente CSS y un tag html para que la cajita de pagos aparezca.
Agrega las siguiente etiquetas en la cabecera en tu página web
- La referencia a la hoja de estilos CSS: payphone-payment-box.css
- La referencia el SDK JavaScript: payphone-payment-box.js
<head>
<link rel="stylesheet" href="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css">
<script type="module" src="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js"></script>
</head>
- El segundo script es el que te permitirá controlar las acciones de petición y configuración de la cajita, lo puedes insertar en el cuerpo o en la cabecera de tu pagina.
<script>
window.addEventListener('DOMContentLoaded',()=>{
ppb = new PPaymentButtonBox({
token: 'ACA TU TOKEN', //credenciales de acceso, se genera en payphone developer
//Identificador único asignado por el comercio a cada transacción para su seguimiento.
clientTransactionId: 'ID_UNICO_X_TRANSACCION-001',
amount: 215, // Valor total de la factura a cobrar
amountWithoutTax: 100, //Monto que no está sujeto a impuestos.
amountWithTax:100, //Monto que incluye el valor sujeto a impuestos, excluyendo el propio impuesto.
tax: 15, //Monto del impuesto aplicado a la transacción.
service: 0, //Monto asociado al servicio proporcionado.
tip:0, //Monto de la propina otorgada por el cliente.
currency: "USD", //Código de moneda ISO 4217. (ej:USD)
storeId:"TU_STOREID", //Identificador único asignado a la transacción para su seguimiento.
reference:"Pago por venta Fact#001" //Motivo o referencia específica del pago.
}).render('pp-button');
})
</script>
- El tercer elemento que debes agregar es una etiqueta DIV que debes ubicar en la sección donde quieras que aparezca el botón de pago.
<div id="pp-button"></div>
Importante:
Recuerda que campo amount (valor a cobrar) debe ser la suma de los campos amountWithTax, amountWithoutTax, tax, service y tip.
amount = amountWithoutTax + amountWithTax + tax + service + tip
Aunque los montos individuales son opcionales, al menos uno debe estar presente para respaldar el amount
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
Configuración básica de montos a cobrar
$1 dólar con impuestos.
amount = 115
amountWithTax = 100
tax = 15
$1 dólar sin impuestos.
amount = 100
amountWithoutTax = 100
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, la moneda, datos del cliente y otros campos que necesites enviar.
Credencial que se genera en la configuración de payphone developer.
Valor total de la factura a cobrar, es la suma de amountWithTax, amountWithoutTax, Tax, service y tip.
Monto que no está sujeto a impuestos.
Monto que incluye el valor sujeto a impuestos, excluyendo el propio impuesto.
Monto del impuesto aplicado a la transacción.
Monto asociado al servicio proporcionado.
Monto de la propina otorgada por el cliente.
Código de moneda ISO 4217. (ej:USD)
Identificador único asignado por el comercio a cada transacción para su seguimiento. Máximo 50 caracteres
Identificador de la sucursal que efectúa el cobro (se obtiene en payphone developer).
Motivo o referencia específica del pago. Máximo 100 caracteres
Número de teléfono del titular; se solicitará si no se proporciona.
Formato: Símbolo(+) + Código País + numero telefónico.
Ej. +593984111222
Correo electrónico del titular; se solicitará si no se proporciona.
Número de identificación del titular; se solicitará si no se proporciona.
Tipo de identificación:
*Cédula: 1
*RUC: 2
*Pasaporte: 3
Por defecto 1.
Idioma de Formulario:
inglés (en),
español (es).
Por defecto en español.
El método por defecto a mostrar:
*Tarjeta = "card"
*Payphone = "payphone"
latitud en formato decimal: -1.831239
longitud en formato decimal: -78.183406
Advertencia:
Al utilizar los campos phoneNumber, email y documentId en las solicitudes a los servicios de payphone, es crucial que se ingresen los datos del titular de la tarjeta para cada transacción individual.
No se permite el uso de datos "quemados" o estáticos, ya que esto puede resultar en el rechazo de sus transacciones y el bloqueo de sus usuarios. El uso de datos falsos o repetitivos puede generar sospechas de fraude.
Payphone se compromete a proteger la seguridad y privacidad de los datos, por lo que es fundamental cumplir con esta política para garantizar un proceso de pago seguro y confiable.
Al final tu código debe estar estructurado de la siguiente forma:
<!DOCTYPE html>
<html lang="es">
<head>
<script src="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js" type="module" ></script>
<link href="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css" rel="stylesheet" >
</head>
<body>
<script>
window.addEventListener('DOMContentLoaded',()=>{
ppb = new PPaymentButtonBox({
token: 'ACA TU TOKEN',
clientTransactionId: 'ID_UNICO_X_TRANSACCION-001',
amount: 215,
amountWithoutTax: 100,
amountWithTax:100,
tax: 15,
currency: "USD",
storeId:"TU_STOREID",
reference:"Pago por venta Fact#001"
}).render('pp-button');
})
</script>
<div id="pp-button"></div>
</body>
</html>
Una vez terminada la configuración de tu página con los campos requeridos se mostrara la cajita de pagos de la siguiente forma:
Consideraciones: Es importante tener en cuenta que el servicio de cajita de pago tienen una ventana de tiempo de 10 minutos para ser utilizados. Pasado este lapso, el formulario expirará y será necesario generar uno nuevo.
Nota: Para garantizar la autorización de pagos, es esencial que redirijas al usuario al formulario de pago desde tu dominio web configurado en el entorno de desarrollo. Si la redirección se realiza desde otro dominio o si la identidad del sitio se oculta, la autorización será denegada.
Este mensaje se mostrará si tu plataforma no cumple con esta condición.
