Did you know that...

Start your integration today, and finish it today, it's as simple as that.

Visit payphone.app

Payment box Payphone

What is the payment box of Payphone?

The Payphone payment box is the definitive solution to receive payments with credit card, debit card, Payphone balance and even cash payments on your website. Follow our tutorial and in a few minutes you will have your payment gateway active and functional.

Our little box works using HTML and JavaScript code which will allow you to receive Visa and MasterCard credit and debit card payments, as well as gift cards, Payphone balance and cash.

How to receive payments with Payphone?

To receive payments with our gateway just follow these simple steps:

  1. Add our code to your website.
  2. Prepare the transaction, indicating the amount, taxes, customer data, etc.
  3. Wait for the customer to make the payment on our platform.
  4. See the result of the transaction

Environment configuration

To implement the payment box you must follow the following steps:

Requirements:

  • First you need to have an account Payphone Business where you will receive the payments executed by the cashier. To start the registration you can click here.
  • Once you have activated the account, you must create a user of type "developer"

Create developer user

Enter your page Payphone Business, and log in with the ruc, email and password, (if you do not have access, the administrator of the company can enter and create your user). Go to the "Users" section and then select "Create User":

Click on "Users" followed by "Create user".

Enter all the data in the form, don't forget that in the "Roles" field you must enter "Developer".

With this process ready, the user developer can start the implementation.

Payphone Developer

Configuring the development environment allows you to have full control over the transactions made through Payphone. Please follow the steps below:

1. Log in to Payphone Developer

Go to https://appdeveloper.payphonetodoesposible.com/ and log in with your developer user credentials (Ruc, email and password).

Developer

2. Create Application Payphone:

The development applications Payphone allows you to configure your test environment, connection parameters or test users, and helps you to obtain your authentication credentials such as the token.

To create your application click on the "+" at the top.

A form will open where you must enter the fields of your application, and complete the data.

First you must fill in the informative data, if your platform is not shown you can select any, remember that your type of application must be of web type WEB.

  • Web domain: The url of your website that will connect to the Payphone button. ONLY THE WEB DOMAIN HAS ACCESS TO THE PAYMENT BOX, if you do not open the payment box from your web domain, it will not give you access.
  • Response Url: It is the url where the transaction response will be notified.

Press Save

Obtain authentication token

With the application configured you must click the top menu on the credentials tab, and you will have the button to copy your token...

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.

  • Agrega las siguiente etiqueta script en tu página web
				
					type='module' src='https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js'
  • Also refer to the css file as follows:
				
					Link rel='stylesheet' href='https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css'
  • 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',()=>{
        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');
    })

Parameters in the request

You use the transaction data to detail the amounts to be charged, the currency, customer data and references you need to send for payment:

Name Description Data type Optional
amount
Total value of the invoice receivable, is the sum of amountWithTax, amountWithoutTax, Tax, service and tip.
Int
amountWithoutTax
Value not taxed.
Int
X - only if VAT is charged, it is mandatory if no VAT is charged
amountWithTax
Taxable value, without tax included.
Int
X - only if values are charged without VAT, mandatory if values are charged with VAT.
tax
Value of the tax.
Int
X - only if values are charged without VAT, mandatory if values are charged with VAT.
service
Value of the service.
Int
X
tip
Value of the tip.
Int
X
currency
Currency receivable /e.g. USD
String
X
clientTransactionId
Transaction identifier, you must generate it, it is a unique identifier.
String
storeId
This parameter can be obtained in the "Company Request" section of the PayPhone Developer page, in the list button.
String
X
reference
Payment reference that you can send.
String
X
phoneNumber
Customer's phone number, if you don't send it, the button will request it to the customer.
String
X
email
Customer's email, if you do not send it the button will request it to the customer.
String
X
documentId
Customer identification number, if you do not send it the button will request it to the customer.
String
X
  • The third element you must add is a DIV tag that you must place in the section where you want the payment button to appear.
				
					<div id="pp-button"></div>

The values to be charged are integers and must be multiplied by 100, for example $1 dollar = 100. Below you can see an example of charging $1 dollar with tax.

amount: 112,

tax: 12,

amountWithTax: 100,

To collect $1 dollar without taxes, the values would be as follows:

amount: 100,
amountWithoutTax: 100,

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

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
Transaction status code. 2=Canceled.03=Approved
transactionStatus
Transaction status.
clientTransactionId
Transaction identifier that you sent in the request.
authorizationCode
Bank authorization code.
transactionId
Transaction identifier assigned by PayPhone.
email
The e-mail address used by the user for payment.
phoneNumber
Telephone number used by the user for payment.
document
ID number used by the user for payment.
amount
Total amount paid.
cardType
Type of card used, either credit or debit.
cardBrandCode
Card brand code.
cardBrand
Card brand.
bin
First 6 digits of the card used.
lastDigits
Last digits of the card used.
deferredCode
Deferral code used by the user. Here you can learn more about deferrals.
deferredMessage
Deferred message.
deferred
Boolean variable indicating whether a deferral was used or not.
message
In case of error, the error is displayed in this parameter. You can consult the error catalog by clicking here.
messageCode
Message code.
currency
Currency used for payment.
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;

?>

That's it, if you have reached this point, congratulations, your integration is complete, in the next section we will tell you how to test and move to production.

Test transactions and start collecting with a cash drawer Payphone

As we have already told you in Payphone all the control is yours, and you are the one who decides how to run the tests and go to production. You don't need any certification process and you can publish yourself without any problem. Here we give you a guide.

Your application created on the Payphone Developer site has two pre-established environments which are "TESTING" and "PRODUCTION". When you enter the configuration of your application from our Developers site you can select the environment you need.

In testing all your transactions will be approved but no transactions will be connected to any bank processor, so you can use your cards and no charge will be made, or any valid Visa or Mastercard.

In production environment the behavior is the same, but if the bank connection is made, the transactions are already real and you have your payment button active.