Sabias que...

Con Payphone tu integración es inmediata, todo el proceso lo controlas tú.

¿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:

  1. Agrega nuestro código en tu sitio web.
  2. Prepara la transacción, indicando el monto, impuestos, datos del cliente, etc
  3. Espera a que el cliente realice el pago en nuestra plataforma
  4. 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»:

Presiona en «Usuarios» seguido de «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).

Developer

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 siguientes etiquetas en tu sitio web, primero el script:

<script 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({                            
        //Confiuguraciones de pago
        //Token obtenido desde la consola de developer
            token: 'ACA TU TOKEN',

        // Monto a cobrar: Debe cumplir la siguiente regla 
        // Amount = amountWithoutTax + AmountWithTax + AmountWithTax + Tax + service + tip
        // Todos los valores se multiplican por 100, es decir $1 = 100, $15.67 = 1567

        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

        //storeId:"", Identificador de la sucursal que cobra. Puedes obtener este campo desde la consola de Payphone Developer. Si lo envias se cobra con la sucursal indicada, si no lo envias se cobra con la sucursal matriz.

        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:

				
					 (int)$transaccion,
"clientTxId"=&gt;$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 =&gt; array(
"Authorization: Bearer TU TOKEN DE AUTENTICACIÓN", "Content-Type:application/json"),
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);

//En la variable result obtienes todos los parámetros de respuesta
echo $result;
?&gt;
				
			

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.