Did you know that...

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

Visit payphone.app

Express Checkout Payphone

What is Express Checkout?

If you want to receive payments on your website in a simple, fast and easy way, our Express Checkout allows you to do it, follow our tutorial and in a few minutes you will have your payment button active and functional.

Express Checkout is the fastest way to integrate the Payphone payment button, using HTML and Javascript code which allows you to receive Visa and Mastercard credit and debit card payments, as well as gift cards and Payphone balance from your customers using our app.

Express Checkout Flow

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

  1. Add our code to your website.
  2. Prepare the transaction to be paid, indicating amount, taxes, customer details, etc.
  3. Wait for the customer to make the payment on our platform.
  4. Consult the result of the transaction through our confirmation service.

Environment configuration

To implement the payment button, you must meet certain requirements, which we divide into two categories: Commercial Requirements y Development Requirements.

Business Requirements:

  • The establishment that is to receive the payments must be registered with Payphone Business. To start the registration you can do click here.
  • With the shop active and ready to transact, you must create a user of type "developer"which we will explain below.

Development Requirements:

  • You must configure on our developer website "Payphone Developer". your development environment where you can obtain all your authentication tokens with which you identify yourself to Payphone services.

Create developer user

Log in to your page Payphone Businessand log in with your ruc, email and password, (if you don't have access, the company administrator can log in and create your user) and go to the "Users". then select "Create User":

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

Enter all the developer's details in the form, don't forget that in the "Roles". you must enter "Developer". (The administrator must provide the e-mail address and password entered.)

With this process in place, the user developer can start the implementation.

Payphone Developer

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

1. Log in as a developer

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

Developer

2. Create Payphone Application:

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

To create your application click on the "+"at the top. If you are upgrading your express checkout to a new version we recommend you to create a new application.

A form will open where you have to enter the fields of your application, and mainly complete them:

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

  • Web domainThe url of your website that will connect to the Payphone button. ONLY THE WEB DOMAIN HAS ACCESS TO THE PAYPAL BUTTON, if you do not open the Express checkout from your web domain, it will not give you access.
  • Response URL: This is the url where the status of the transaction will be notified.

Press Save

Get Authentication Token

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

Prepare transaction

Integrating the button into your website is very easy, just add two scripts and an html tag to make the button appear.

  • The first script must be added in the header of your file and you must put your application identifier after "appID=". You can find the application identifier in the configuration of your application in the Payphone Developer page.

<script> src="https://pay.payphonetodoesposible.com/api/button/js?appId=TUIDDEAPLICACION«></script>

  • The second script is the one that will allow you to control the actions of request and response of the button, you must insert it in the same way in the header:
				
					
        window.onload = function() {
            payphone.Button({
            
            //token obtenido desde la consola de developer
            token: "TU-TOKEN-DE-AUTENTICACION",
        
            //PARÁMETROS DE CONFIGURACIÓN
            btnHorizontal: true,
            btnCard: true,

            createOrder: function(actions){
            //Se ingresan los datos de la transaccion ej. monto, impuestos, etc
            
            return actions.prepare({
                        
                            amount: 100,
                            amountWithoutTax: 100,
                            currency: "USD",
                            clientTransactionId: "identificador-único",
                            lang:"es"
                            
                        }).then(function(paramlog){
                            console.log(paramlog);
                            return paramlog;
                        }).catch(function(paramlog2){
                            console.log(paramlog2);
                            return paramlog2;
                        });
                    },

                    onComplete: function(model, actions){
                    }
                }).render("#pp-button");
            }

Express Checkout settings

In our Express Checkout you can configure graphical and behavioural aspects of the button:

  • btnHorizontalIf this parameter is set to true the button layout will be displayed horizontally, if false it will be displayed vertically.
  • btnCardIf this parameter is set to true, the Visa and Mastercard buttons will be displayed for direct payment without the need of the Payphone app.

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 to be collected, is the sum of amountWithTax, amountWithoutTax, Tax, service and tip.
Int
amountWithoutTax
Value not taxed.
Int
X - only in case VAT is charged, mandatory if no VAT is charged
amountWithTax
Taxable value, excluding tax.
Int
X - only in case values are charged without VAT, mandatory if values are charged with VAT.
tax
Value of the tax.
Int
X - only in case 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 to be collected /e.g. USD
String
X
clientTransactionId
Transaction identifier, you must generate it, it is a unique identifier.
String
storeId
Identifier of the branch that performs the collection, this parameter can be obtained in the "Company request" section of the PayPhone Developer page, in the list button.
String
X
reference
Payment reference you can send.
String
X
phoneNumber
Customer's phone number, if you don't send it the button will ask the customer for it.
String
X
email
Customer's email address, if you do not send it the button will request it from the customer.
String
X
documentId
Customer ID number, if you do not send it the button will request it from 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 collected are integers and must be multiplied by 100, for example $1 dollar = 100. Below you can see an example of collecting $1 dollar with tax.

amount: 112,

tax: 12,

amountWithTax: 100,

In order to collect $1 dollar without tax, the values would be as follows:

amount: 100,
amountWithoutTax: 100,

The payment button provides you with certain response data so that you can process the outcome of the transaction and take action accordingly:

    • statusCode: Transaction status code. 2=Canceled.03=Approved
    • transactionStatus: Transaction status.

With the statusCode and transactionStatus you can show your customer whether the payment was approved or rejected. The other parameters for reconciliation, transaction and authorisation number we recommend you to manage them in your response URL.

With this configuration, your Express Checkout is ready and your customers can pay. You only need to configure your response URL.

Confirm transaction

To check the status of the transaction, you must create a file in 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 Payphone service that you have received the response from the payment button and also checks the result of the transaction. You must make a POST call to the following address:  https://pay.payphonetodoesposible.com/api/button/V2/Confirm with the ID parameter and ClientTransactionID. Don't forget to attach your authentication token in the header.

The response parameters you will receive are as follows:

Name Description
statusCode
Transaction status code. 2=Canceled.03=Approved
transactionStatus
Transaction status.
clientTransactionId
Transaction identifier that you sent in the request.
authorizationCode
Bank authorisation 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 marking.
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 the deferrals.
deferredMessage
Deferred message.
deferred
Boolean variable indicating whether a deferral is used or not.
message
In case of an error, the error is displayed in this parameter. You can consult the error catalogue by clicking here.
messageCode
Message code.
currency
Currency used for payment.
optionalParameter1
Optional parameter

Here 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 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;
?>

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

Testing and production

As we have already mentioned, you have full control over Payphone, and it is you who decides how to run the tests and go into 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 "TESTS" y "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 behaviour is the same, but if the bank connection is made, the transactions are already real and you have your payment button active.

With your application in production the process is complete, congratulations on integrating your Express Checkout.