Tokenization Javascript

 
 
With the Tokenization Javascript you can create a form that allows you to capture the credit card data from your clients on your website, securely and without the need to store the data on your system. The javascript will connect directly with the PayU system, which will tokenize the data and return the token assigned to the credit card on file.

You can develop functionalities as One click buy or register different credit cards for each client. Once you implement the Javascript and register client’s credit cards, you will be able to generate payments with the purchase data. If you want to know more about the PayU’s options to generate payments with tokenization, you can visit the tokenization SDK page or the Tokenization API page according to your integration mode.

You can implement the Tokenization Javascript following these steps:
Tokenization Javascript
 
 
01. Instance statement: in order to start using PayU.js, you must add the following tag in your web page:
<script type="text/javascript" src="https://gateway.payulatam.com/ppp-web-gateway/javascript/PayU.js"></script>
 
02. General settings: You must make the following settings in order to be able to make the connection.
With the following configuration you change the url for one that accepts development environment (Required):
payU.setURL('https://api.payulatam.com/payments-api/4.0/service');
 
You must configure the public key through the instruction (Required):
To know more about your Public Key visit PayU’s Administrative Module in 'Technical information' section.
payU.setPublicKey('PUBLIC KEY');
 
You must configure the account with which you want to use PayU.js using the following line (Required):
To know more about your account ID visit the PayU’s Administrative Module
payU.setAccountID('YOUR ACCOUNT NUMBER');
 
The ID of the div used to display the franchise, the optional text is displayed so the client selects his franchise.
payU.setListBoxID('YOUR LIST BOX ID', 'optional text');
 
You must use the following method to get the active payment methods:
payU.getPaymentMethods();
 
You can set the language in which the information is displayed, the default is Spanish language ('es'), but it can be changed to English 'en' or Portuguese 'pt'
payU.setLanguage("en"); //If the language changes to English
 
03. Get credit card information: To run the Tokenization process, you must use the payU.setCardDetails method. This method converts sensitive data of the card into a token, which will be used to execute the transaction processing without needing to pass sensitive cardholder data through your server.
payU.setCardDetails(
	{
		number:'4111111111111111',
		name_card:'NAME CARD',
		payer_id:'PAYER_ID', 
		exp_month:10,
		exp_year:2015,
		method:'VISA'
	}
);
 
The setCardDetails method the credit card data are filled, in the example a JSON object is passed, but you can use other methods, such as jQuery:
  1. number: The card’s number as a string without separators. (Required) Example.'4242424242424242'.
  2. exp_month: The number that represents the month of expiration. (Required) Example: 10
  3. exp_year: A four-digit number representing the card’s expiry year. (Required)
  4. name_card: the name on the card. (Required)
  5. payer_id: The payer id assigned by the shop. (Required)
  6. cvv: The card’s security code: Example: ‘123’'
  7. document: The payer’s identification number.
 
04. Creating the credit card token: The creation of a token is made through payU.createToken.
payU.createToken(responseHandler);
 
Where the responseHandler parameter is a function defined to handle the response.
function responseHandler(response)
{
	if (response.error) {
		// Error messages are displayed.
		$(".create-errors").text(response.error);
	}
	else {
		// The token is obtained and can be saved or sent to any payment.
		var token = response.token;
		var payer_id = response.payer_id;
		var document = response.document;
		var name = response.name;
	}
}
 
The create token function may also receive a second parameter, a form where you can enter the data without the need to use the setCardDetails method:
jQuery(function($)
{
	$(‘#create-form’).submit(function(event)
	{
		var $form = $(this);
		payU.createToken(responseHandler, $form);
		return false;
	});
});
 
05. Validate: These are the validations you can perform with the Javascript.
Credit card validation: The credit card validation is done through the payU.validateNumber function, the function ignores spaces and other punctuation marks that are entered. As a response, the method returns 'true' if the card is valid, otherwise the return value is 'false'.
payU.validateCard ('4242424242424242')
payU.validateCard ('4242-42424242-4242')
payU.validateCard ('4242 4242 4242 4242')
payU.validateCard ('4242-1111-1111-1111')
payU.validateCard ('12345678')
 
Validation of the credit card’s expiry date: Validation of the of a card’s expiration date, is done through payU.validateExpiry, which does a review of the provided year and month and generates an alert if the date is invalid.
payU.validateExpiry('2020','02') // True
 
Validation of the credit card’s franchise or type: Validation of the credit card’s franchise or type is done through the payU.cardPaymentMethod function. Potential franchisees are VISA, MASTERCARD, AMEX, DINERS, DISCOVER and, if the card’s number is not identified, the value for the field will be returned UNKNOWN.
payU.cardPaymentMethod ('4242-4242-4242-4242') // "VISA"
payU.cardPaymentMethod ('378282246310005') // "AMEX"
payU.cardPaymentMethod ('1234') // "Unknown"
 
 
Possible errors: The system returns multiple error messages when faults occur or the when the information is incomplete. Below is the list of possible messages:

Posts Developers might see

Code Error Message Description
0 This franchise is not available for use. The configured account does not have the indicated means of payment. You must contact the operational support team to request activation of said payment means to your account.
4 Payer’s is not configured Id payer_id field was not sent.
6 An unexpected error has occurred with PayU.js. This may be due to connectivity problems, please try again. If you still have problems, please let us know. Connection errors. You can verify that the service is working properly and send the request again.
7 Your initial configuration is incorrect. Configurable data are incorrect.
9 Unknown credit card type. The card type is not known, you must sent / select the franchise.
12 The public key used is invalid Verify that the public key is equal to the one stated in the Administrative Block.
13 Your public key is not configured. Verify that the public key is equal to the one stated in the Administrative Block.
14 Your Account ID Is not configured. Verify that the account number is correct.
15 The DIV franchise is not configured. Check that you have a DIV to show franchises.
16 The account identifier used is invalid. Verify that the account number is correct.
17 You must use an account ID and a public key that are valid. Verify that you are correctly using payU.setAccountID() and payU.setPublicKey()
18 Verify that you are sending the required parameters in Java Script (Name, Franchise, credit card’s number and expiry date). The card has required parameters that are not being sent.
19 You don’t have a credit card to tokenize as an active means of payment ( Check that you are using payU.getPaymentMethods()) Verify that you are using the payU.getPaymentMethods() function, or that your shop/account have payment methods with which you can perform tokenization.

Posts your Clients can see

Code Error Message Description
1 Verify that all your credit card data are correct. Verify that all your credit card data are correct.
2 The document must have between 5 and 30 digits. The document optional field does not have the required digits.
3 Check that the expiration date is valid. Check the digits in the expiration date are valid.
5 You must select a payment method. Payment method not defined.
10 The credit card does not belong to the selected franchise. The credit card and the franchise does not match.
 
 
The tokenization JavaScript it is available for Chrome, Firefox, Safari, Opera and Internet Explorer 10 or further.
If you want to develop the tokenization JavaScript in your website, you can download the following example. Remember that the tokenization JavaScript allows you to register your client’s credit cards. If you want to make collections, you must use the Tokenization API or SDK.
 
Download example from GitHub