Sabias que...

Inicia tu integración hoy, y termínala hoy, así de simple es

Visita payphone.app

Cajita de pagos Payphone

¿Qué es la cajita de pagos de Payphone?

La Cajita de Pagos de Payphone brinda a tus clientes la flexibilidad de pagar como prefieran. Aceptamos tarjetas de crédito, débito y saldo Payphone en una solución única, segura y confiable. ¡Simplifica tus procesos de pago y aumenta tus ventas de forma efectiva!

Sigue nuestro tutorial y, en pocos minutos, tendrás tu pasarela de pago activa y lista para usar. La Cajita utiliza HTML y JavaScript, permitiéndote recibir pagos con tarjetas Visa y MasterCard, así como con saldo Payphone.

¡Facilita las transacciones y mejora la experiencia de tus usuarios con Payphone!

¿Cómo recibir pagos con Payphone?

Impulsa tus ventas con Payphone, solo debes seguir estos sencillos pasos:

  1. Agrega nuestro código en tu sitio web.
  2. Configura la transacción: Especifica el monto, impuestos y datos del cliente.
  3. Espera a que el cliente realice el pago en nuestra plataforma
  4. Consulta el resultado de la transacción

Configuración de ambiente

¡Comencemos a integrar PayPhone a tu plataforma!

Sigue los sientes pasos:

Requisitos:

  • Cuenta de Payphone Business: Necesitas una cuenta activa en Payphone Business para recibir los pagos realizados a través de la CAJITA DE PAGOS. Puedes comenzar el registro haciendo clic aquí.
  • Una vez tengas activa la cuenta, debes crear un usuario de tipo “desarrollador“

Crear usuario desarrollador

  • Inicia sesión en tu cuenta de Payphone Business con tu RUC, correo y contraseña.
  • Dirígete a la sección «Usuarios» y selecciona «Crear Usuario».
  • Completa el formulario ingresando todos los datos requeridos y asegúrate de seleccionar el rol «Desarrollador».

Con el usuario desarrollador creado, estarás listo para iniciar la implementación.

Payphone Developer

Configurar el ambiente de desarrollo en Payphone te permite gestionar y supervisar todas las transacciones realizadas a través de la plataforma de manera eficiente. Sigue estos pasos para comenzar:

1. Iniciar sesión en Payphone Developer

Ingresa a la plataforma https://appdeveloper.payphonetodoesposible.com/ e inicia sesión con las credenciales de tu usuario desarrollador (Ruc, correo y contraseña).

Developer

2. Crear una Aplicación en Payphone:

Las aplicaciones de desarrollo de Payphone te permiten configurar parámetros de conexión, usuarios de prueba y gestionar tu entorno (pruebas y producción). Además, te proporcionan las credenciales necesarias para la autenticación, como el token y el StoreID.

Inicia la Creación de la Aplicación
Para comenzar, haz clic en el botón “+ Agregar” ubicado en la parte superior de la página.

Completa el Formulario de Creación Se abrirá un formulario en el que deberás ingresar la información de tu aplicación. A continuación, se detallan los campos que debes completar:

  • Nombre: Define un nombre que identifique claramente tu aplicación.
  • Descripción: Añade una breve descripción de la funcionalidad o propósito de tu aplicación.
  • Categoría: Selecciona la categoría que mejor corresponda a tu perfil de negocio.
  • Plataforma de Desarrollo: Elige la plataforma donde está desarrollada tu aplicación. Si no aparece la opción exacta, selecciona la más similar.
  • Tipo de Aplicación: Para integrar el botón de pagos, asegúrate de seleccionar el tipo WEB.
  • Dominio Web: Introduce la URL de tu sitio web. Es importante solo el dominio registrado puede acceder al botón de pago de Payphone. Si intentas abrir la «cajita de pagos» desde otro dominio, el acceso será bloqueado.
  • URL de Respuesta: Proporciona la URL a la que se redirigirá al usuario una vez finalizada la transacción. En esta URL se adjuntarán los parámetros necesarios para obtener el detalle completo de la transacción realizada.

Después de completar todos los campos, presiona el botón Guardar.

Obtener Credenciales de Autenticación (Token, StoreID)

Una vez creada tu aplicación, obtendrás las credenciales necesarias para acceder a nuestras APIs.

  • Dirígete al menú superior y selecciona la pestaña Credenciales.
  • Podrás ver el Token y el botón que te lleva al listado de tiendas, donde encontrarás tu StoreID. Ambos cuentan con un botón para copiarlos fácilmente.

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 etiqueta script en tu página web
    • Así mismo haz referencia al archivo css de la siguiente forma:
<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 debes insertar de igual forma en la cabecera:
				
					      
        window.addEventListener('DOMContentLoaded',()=&gt;{
            ppb = new PPaymentButtonBox({                            
                token: 'ACA TU TOKEN',
    
                amount: 180, // monto total de venta
                amountWithoutTax: 180, //monto total que no cobra iva
                amountWithTax:0, //monto total que si cobra iva
                tax: 0,//monto del iva
                service: 0,//Si existe monto por servicio
                tip:0,//si existe monto por propina
    
                reference:"Motivo de pago", //Referencia de pago
                clientTransactionId: 'ID-UNICO', ////id unico. debe cambiar para cada transaccion   
            }).render('pp-button');
        })

Parametros en la petición

Los datos de transacción los usas para detallar los montos a cobra, la moneda, datos del cliente y referencias que necesites enviar para el pago :

Nombre Descripción Tipo de dato Opcional
amount
Valor total de la factura a cobrar, es la suma de amountWithTax, amountWithoutTax, Tax, service y tip.
Int
amountWithoutTax
Valor que no graba impuesto.
Int
X - solo en caso de que se cobre valores con Iva, es obligatorio si no se cobran valores con Iva
amountWithTax
Valor que si graba impuesto, sin el impuesto incluido.
Int
X - solo en caso de que se cobre valores sin Iva, es obligatorio si se cobran valores con Iva
tax
Valor del impuesto.
Int
X - solo en caso de que se cobre valores sin Iva, es obligatorio si se cobran valores con Iva
service
Valor del servicio.
Int
X
tip
Valor de la propina.
Int
X
currency
Moneda a cobrar. /ej USD
String
X
clientTransactionId
Identificador de transacción, debes generarlo, es un identificador único.
String
storeId
Identificador de sucursalr que realiza el cobro, este parámetro se puede obtener en el apartado "Solicitud de compañia" de la página de PayPhone Developer, en el botón lista.
String
X
reference
Referencia del pago que puedes enviar.
String
X
phoneNumber
Número de Teléfono del cliente, si no lo envías el botón lo solicitará al cliente.
String
X
email
Correo electrónico del cliente, si no lo envías el botón lo solicitará al cliente.
String
X
documentId
Número de identificación del cliente, si no lo envías el botón lo solicitará al cliente.
String
X
  • 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>

Los valores a cobrar son enteros y se deben multiplicar por 100, por ejemplo $1 dólar = 100. A continuación puedes ver un ejemplo de cobrar $1 dólar con impuestos.

amount: 112,

tax: 12,

amountWithTax: 100,

Para cobrar $1 dólar sin impuestos, los valores serían los siguientes:

amount: 100,
amountWithoutTax: 100,

Al final tu código debe estar estructurado de la siguiente forma:

Una vez terminada la configuración tu página debe mostrar la cajita de pagos de la siguiente forma:

Obtener respuesta de transacción

Para consultar el estado de la transacción, debes obtener los identificadores entregados a tu URL de respuesta (configurada en tu página de Payphone Developer), esta web es invocada por Payphone en una llamada Servidor – Servidor, enviando los parámetros ID de transacción y ClientTransactionID. Con esos parámetros debes llamar a nuestro servicio web CONFIRM para obtener los datos de respuesta de la transacción.

El método confirma al servicio Payphone que recibiste la respuesta del botón de pagos y así mismo consulta el resultado de la transacción. 

Debes hacer una llamada POST a la siguiente dirección:  

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

En el json de la petición debes enviar el id y el clientTransactionId obtenidos en tu url de respuesta de la siguiente forma:

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

Por último debes adjuntar el Token de autenticación en la cabecera de la llamada. Debe ser una cabecera «Authorization» y el contenido debe ser «Bearer TUTOKEN»

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

Nombre Descripción
statusCode
Código de estado de la transacción. 2=Cancelado.03=Aprobada
transactionStatus
Estado de la transacción.
clientTransactionId
Identificador de transacción que tu enviaste en la petición.
authorizationCode
Código de autorización bancario.
transactionId
Identificador de transacción asignado por PayPhone.
email
El correo electrónico empleado por el usuario para el pago.
phoneNumber
Número de teléfono empleado por el usuario para el pago.
document
Número de cédula empleado por el usuario para el pago.
amount
Monto total pagado.
cardType
Tipo de tarjeta empleada, puede ser crédito o débito.
cardBrandCode
Código de la marca de la tarjeta.
cardBrand
Marca de la tarjeta.
bin
Primeros 6 dígitos de la tarjeta empleada.
lastDigits
Últimos dígitos de la tarjeta empleada.
deferredCode
Código de diferido empleado por el usuario. Aquí puedes conocer más de los diferidos.
deferredMessage
Mensaje del diferido.
deferred
Variable boleana que indica si se uso un diferido o no.
message
En caso de error se muestra el error en este parámetro. Puedes consultar el catálogo de errores haciendo click aquí.
messageCode
Código de mensaje.
currency
Moneda empleada para el pago.
optionalParameter1
Parámetro opcional

A continuación te detallo el ejemplo de llamada al servicio web en PHP:

<?php
//Obtener parametros de la URL enviados por PayPhone
$transaccion = $_GET[«id»];
$client = $_GET[«clientTransactionId»];

//Preparar JSON de llamada
$data_array = array(
«id»=> (int)$transaccion,
«clientTxId»=>$client );

$data = json_encode($data_array);

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

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt_array($curl, array(
CURLOPT_HTTPHEADER => array(
«Authorization: Bearer TOKEN», ‘Content-Type:application/json’
),
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);
echo $result;

?>

Y ¡Listo!, Eso es todo, si llegaste a este punto, felicidades, tu integración está completada, en la siguiente sección te contaremos como hacer pruebas y pasar a producción.

Probar transacciones y empezar a cobrar con cajita de pagos Payphone

Como ya te hemos comentado en Payphone todo el control lo tienes tú, y eres tú quien decide cómo ejecutar las pruebas y pasar a producción. No necesitas ningún proceso de certificación y puedes publicar tu mismo sin problema. Acá te damos una guía.

Tu aplicación creada en la página de Payphone Developer cuenta con dos ambientes pre establecidos que son «PRUEBAS» y «PRODUCCIÓN«. Cuando ingresas en la configuración de tu aplicación desde nuestro sitio de Developers puedes seleccionar el ambiente que necesites.

En pruebas todas tus transacciones serán aprobadas pero no se conectaran las transacciones a ningún procesador bancario, por lo que puedes usar tus tarjetas y no se realizará ningún cobro, o cualquier Visa o Mastercard valida.

En ambiente de producción el comportamiento es el mismo, pero si se realiza la conexión bancaria por lo que las transacciones ya son reales y cuentas con tu botón de pago activo.