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:
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:
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:
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:
For more reference about the library please go to the Openpay.js section.
Using reward points (Optional)
Optionally, we can accept payments using reward points, if the card supports them.
For this we add a modal dialog, which will allow the user to confirm the use of reward 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 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 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 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, description, etc.. that not are presents in the example form, are data of your aplication an should be obtain before of the payment form.
In the amount field, a string with decimal point format could be used.
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).
You can simulate different results using the test cards
Implement Notifications to know the status of payments in real time