To receive payments with BBVA, Scotia, Santander, Banorte, Banorte Por Ti and Azteca Points, we explain in this guide the way 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:
- 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
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
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:
This way you can generate the device_session_id string:
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
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.
First add the Openpay.js and JQuery files to the
Now let’s set the
merchant-id and the
public-key to the Openpay library:
Finally we listen the clic event for "pay" button and change the submit action to make the card "tokenization":
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:
If there is a problem in the request, an alert will show the error:
Using reward banking points
Optionally, we can accept payments using reward banking points, if the card supports them.
For this we add a modal dialog, which will allow the user to confirm the use of reward banking points for the charge. In this case, we will use a modal from the Bootstrap library:
Now with the modal HTML code, we modify the function success_callback we previously defined, so it shows the modal dialog if the card supports reward banking points:
Now we will attach events to the modal's buttons in order to change the value of the hidden field use_card_points, and then send the payment request to the server:
- If the charge uses reward banking points, the server response may contain a message to be shown to the customer. In this case, it is required to display it in the purchase ticket. See the API definition for more details.
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
private-key parameters and then use the form values to make the charge:
Ready!! We have created a card charge.
If there is an error we will receive an exception which we must capture and handle, for more information consult the errors section
- You must use the card 4242424242424242 to simulate the charge with Banking Points
- The fields amount, 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 integration 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)..
- Make sure your integration meets version compatibility requirements see details
- You can simulate different results using the cards Testing
- Implement the Notifications to know the status of payments in real time