Payment box Payphone

What is the payment box of Payphone?

The Payment Box at Payphone gives your customers the flexibility to pay the way they prefer. We accept credit, debit and charge cards Payphone in a unique, secure and reliable solution. Simplify your payment processes and increase your sales effectively!

Follow our tutorial and, in a few minutes, you will have your payment gateway active and ready to use. La Cajita uses HTML and JavaScript, allowing you to receive payments with Visa and MasterCard cards, as well as with Payphone.

Facilitate transactions and improve your users' experience with Payphone!

How to receive payments with Payphone?

Boost your sales with Payphone, just follow these simple steps:

Add our code to your website.
Configures the transaction: Specifies the amount, tax and customer data.
Wait for the customer to make the payment on our platform.
See the result of the transaction

Environment configuration

Let's start integrating PayPhone to your platform!

Follow the steps below:

Requirements:

Payphone Business Account: You need an active Payphone Business account to receive payments made through the PAYMENT BOX. You can start the registration by clicking here.

Once you have activated the account, you must create a user of type "developer"

Create developer user

Log in to your Payphone Business account with your RUC, email and password.
Go to the "Users" section and select "Create User".

Complete the form by entering all the required data and make sure to select the "Developer" role.

With the developer user created, you are ready to start the implementation.

Payphone Developer

Setting up the development environment at Payphone allows you to manage and monitor all transactions made through the platform efficiently. Follow these steps to get started:

1. Log in to Payphone Developer

Enter the platform https://appdeveloper.payphonetodoesposible.com/ and log in with the credentials of your developer user (Ruc, email and password).

2. Create an Application at Payphone:

The development applications of Payphone allow you to configure connection parameters, test users and manage your environment(test and production). In addition, they provide you with the necessary credentials for authentication, such as token and StoreID.

Start Creating the Application
To begin, click on the "+ Add" button located at the top of the page.

Complete the Creation Form A form will open in which you must enter your application information. Below are the fields you must complete:

Name: Define a name that clearly identifies your application.
Description: Add a brief description of the functionality or purpose of your application.
Category: Select the category that best matches your business profile.
Development Platform: Choose the platform where your application is developed. If the exact option does not appear, select the most similar one.
Application Type: To integrate the payment button, be sure to select the WEB type.
Web Domain: Enter the URL of your website. It is important that only the registered domain can access the payment button of Payphone. If you try to open the "payment box" from another domain, access will be blocked.
Response URL: Provides the URL to which the user will be redirected once the transaction is completed. This URL will contain the necessary parameters to obtain the complete details of the transaction.

After completing all the fields, press the Save button.

Obtain Authentication Credentials (Token, StoreID)

Once your application is created, you will get the necessary credentials to access our APIs.

Go to the top menu and select the Credentials tab.
You will see the token and the button that takes you to the list of stores, where you will find your StoreID. Both have a button to copy them easily.

Insert payment box Payphone

Inserting the payment box in your website is very simple, you must add two scripts, a CSS source and an html tag for the payment box to appear.

- Add the following script tags to your web page
- Also refer to the css file as follows:

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

The second script is the one that will allow you to control the actions of request and configuration of the little box, you must insert it in the same way in the header:

				
					      
        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 :

Name	Description	Data type	Optional
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,

At the end your code should be structured as follows:

Once the configuration is finished your page should display the payment box as follows:

Obtain transaction response

To check the status of the transaction, you must obtain the identifiers delivered to your response URL (configured in your Payphone Developer page), this web is invoked by Payphone in a Server - Server call, sending the transaction ID and ClientTransactionID parameters. With those parameters you must call our CONFIRM web service to get the transaction response data.

The method confirms to the service Payphone that you have received the response from the payment button and also consults the result of the transaction.

You must make a POST call to the following address:

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

In the json of the request you must send the id and the clientTransactionId obtained in your response url as follows:

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

Finally you must attach the authentication token in the call header. It must be an "Authorization" header and the content must be "Bearer TUTOKEN".

Once the call is successful you will get a JSON with the following parameters:

Name	Description
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	Bank authorization code.
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	Total amount paid.
cardType	Tipo de tarjeta empleada, puede ser crédito o débito.
cardBrandCode	Card brand code.
cardBrand	Card brand.
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	Deferred message.
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	Message code.
currency	Moneda empleada para el pago.
optionalParameter1	Optional parameter

The following is an example of a PHP web service call:

<?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.

Test transactions and start collecting with a cash drawer 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.

Did you know that...