Cajita de pagos Payphone

¿Qué es la cajita de pagos de Payphone?

La cajita de pagos de Payphone es la solución definitiva para recibir pagos con tarjeta de crédito, débito, saldo Payphone e inclusive pagos en efectivo en tu página web. Sigue nuestro tutorial y en pocos minutos tendrás activo y funcional tu pasarela de pago.

Nuestra cajita funciona usando código HTML y JavaScript el cual te permitirá recibir pagos con tarjetas de crédito y débito Visa y MasterCard , además de tarjetas de regalo, saldo Payphone y dinero en efectivo.

¿Cómo recibir pagos con Payphone?

Para recibir pagos con nuestro gateway solo debes seguir estos sencillos pasos:

Agrega nuestro código en tu sitio web.
Prepara la transacción, indicando el monto, impuestos, datos del cliente, etc
Espera a que el cliente realice el pago en nuestra plataforma
Consulta el resultado de la transacción

Configuración de ambiente

Para implementar la cajita de pagos debes seguir los sientes pasos:

Requisitos:

Primero es necesario que tengas una cuenta Payphone Business donde recibirás los pagos ejecutados por la cajita. Para iniciar el registro puedes hacer click aquí.
Una vez tengas activa la cuenta, debes crear un usuario de tipo “desarrollador“

Crear usuario desarrollador

Ingresa en tu página Payphone Business, e inicia sesión con el ruc, correo y contraseña, (si no tienes acceso, el administrador de la empresa puede entrar y crear tu usuario). Dirígete a la sección de «Usuarios» a continuación selecciona «Crear Usuario»:

Ingresa todos los datos en el formulario, no olvides que en el campo «Roles» debes ingresar «Desarrollador».

Con este proceso listo, el usuario desarrollador puede iniciar la implementación.

Payphone Developer

Configurar el ambiente de desarrollo te permite tener un control total sobre las transacciones efectuadas a través de Payphone. Por favor sigue los siguientes pasos:

1. Iniciar sesión en Payphone Developer

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

2. Crear Aplicación Payphone:

Las aplicaciones de desarrollo Payphone te permiten configurar tu ambiente de pruebas, parámetros de conexión o usuarios de test, y te ayuda a obtener tus credenciales de autenticación como el token.

Para crear tu aplicación haz click en el “+” de la parte superior.

Se abrirá un formulario donde debes ingresar los campos de tu aplicación, y completar los datos.

Primero debes llenar los datos informativos, si tu plataforma no se muestra puedes seleccionar cualquiera, recuerda que tu tipo de aplicación debe ser de tipo web WEB.

Dominio web: La url de tu página web que se conectará al botón de Payphone. SOLO EL DOMINIO WEB TIENE ACCESO A LA CAJITA DE PAGO, si no abres la cajita de pagos desde tu dominio web, no te dará acceso.
Url de respuesta: Es la url donde se notificará la respuesta de la transacción.

Presiona Guardar

Obtener Token de autenticación

Con la aplicación configurada debes hacer click el menú superior en la pestaña credenciales, y tendrás el botón para copiar tu token..

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

				
					type='module' src='https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js'

Así mismo haz referencia al archivo css de la siguiente forma:

				
					Link rel='stylesheet' href='https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css'

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:"Prueba Cajita de Pagos Payphone", //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.

Sabias que...