Everyone likes to receive payments, this is why we start with a tutorial to see how to do it.
This tutorial uses the Openpay.js library to send the card information directly to Openpay. Using this library, besides being the easiest way to save a card, it minimizes the scope of a PCI Compliance certification.
To make a charge to a card we will do the following:
Steps:
- Antifraud system implementation to generate “device_session_id”
- Create a token of debit or credit card using Openpay.js
- Send charge information to your server
- Send a charge request to Openpay
- Openpay will sent a charge request to issuing bank and will answer
Creating Forms
We need to create a form to get the card information, saying the cards supported and the charge will be through Openpay.
Code of the form.
You can download the complete html here
<form action="#" method="POST" id="payment-form"> <input type="hidden" name="token_id" id="token_id"> <div class="pymnt-itm card active"> <h2>Credit or debit card</h2> <div class="pymnt-cntnt"> <div class="card-expl"> <div class="credit"><h4>Credit card</h4></div> <div class="debit"><h4>Debit card</h4></div> </div> <div class="sctn-row"> <div class="sctn-col l"> <label>Nombre del titular</label><input type="text" name="holder" placeholder="Como aparece en la tarjeta" autocomplete="off" data-openpay-card="holder_name"> </div> <div class="sctn-col"> <label>Número de tarjeta</label><input type="text" name="card" autocomplete="off" data-openpay-card="card_number"></div> </div> <div class="sctn-row"> <div class="sctn-col l"> <label>Fecha de expiración</label> <div class="sctn-col half l"><input type="text" name="month" placeholder="Mes" data-openpay-card="expiration_month"></div> <div class="sctn-col half l"><input type="text" name="year" placeholder="Año" data-openpay-card="expiration_year"></div> </div> <div class="sctn-col cvv"><label>Código de seguridad</label> <div class="sctn-col half l"><input type="text" name="cvv" placeholder="3 dígitos" autocomplete="off" data-openpay-card="cvv2"></div> </div> </div> <div class="openpay"><div class="logo">Transacciones realizadas vía:</div> <div class="shield">Tus pagos se realizan de forma segura con encriptación de 256 bits</div> </div> <div class="sctn-row"> <a class="button rght" id="pay-button">Pagar</a> </div> </div> </div></form>It’s very important that the fields used to enter the card information have the data_openpay_card attribute because this allows the Openpay library to find the information.
Note that the attribute name isn’t being used to store the card information , this is because when you submit the form to your server the card info doesn’t travel in the request because it’s only used to create the token.
In the previous example form don’t include the fields “amount” and “description” but should be included in the server submit.
Implementing antifraud system (Step 1)
Import libraries to generate device id as follows:
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script><script type='text/javascript' src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script></head>This way you can generate the device_session_id string:
<script type="text/javascript"> $(document).ready(function() { OpenPay.setId('mzdtln0bmtms6o3kck8f'); OpenPay.setApiKey('pk_f0660ad5a39f4912872e24a7a660370c'); var deviceSessionId = OpenPay.deviceData.setup("payment-form", "deviceIdHiddenFieldName"); });</script>Parameter payment-form, must store the form id which contains charge information to send. Say to he library this form contains the hidden field with the device_session_id value.
Paramter deviceIdHiddenFieldName, needs the hidden field name than will store device_session_id. This field is important if you will need to recover the fiel value then send it with submit action.
Tokenizing and sending data (Steps 2 and 3)
Once we created our form, we will set up the send button to create a token using the Openpay.js library.
First add the Openpay.js and JQuery files to the head:
<head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script></head>Now let’s set the merchant-id and the public-key to the Openpay library:
<script type="text/javascript"> $(document).ready(function() { OpenPay.setId('mzdtln0bmtms6o3kck8f'); OpenPay.setApiKey('pk_f0660ad5a39f4912872e24a7a660370c'); OpenPay.setSandboxMode(true); });</script>Finally we listen the clic event for “pay” button and change the submit action to make the card “tokenization”:
$('#pay-button').on('click', function(event) { event.preventDefault(); $("#pay-button").prop( "disabled", true); OpenPay.token.extractFormAndCreate('payment-form', success_callbak, error_callbak); });As you can see we are passing as a parameter the name of the form created, this is so the library gets the card information and makes the request to Openpay.
If everything works well, the method success_callback will be called to set the token id value (token_id) and the data will be sent to the server:
var success_callbak = function(response) { var token_id = response.data.id; $('#token_id').val(token_id); $('#payment-form').submit();};If there is a problem in the request, an alert will show the error:
var error_callbak = function(response) { var desc = response.data.description != undefined ? response.data.description : response.message; alert("ERROR [" + response.status + "] " + desc); $("#pay-button").prop("disabled", false);};For more reference about the library please go to the Openpay.js section.
Create a charge (Step 4 and 5)
Now you only have to make the charge from your server, for this we’ll create an Openpay instance with the merchant-id and private-key parameters and then use the form values to make the charge:
Ready!! We have created a card charge.
Notes:
- The fields amount, currency, description, etc.. that not are presents in the example form, are data of your aplication an should be obtain before of the payment form.
- If you want to know how to do this process in a different language, please go to the libraries section.
- The full HTML code is here. (The page does not work completely, you must download and make the POST page implementation on your server).
- You can simulate different results using the test cards
- Implement Notifications to know the status of payments in real time
