Javascript Tokenization

Credit card tokenization is the first step to make in an implementation, in this module you’ll learn how to do this process

As we have reviewed in the last module about tokenization flow, the first step in the charge flow is credit card tokenization. It is very importante to do this process in the application front-end, this way the tokenization will be directly from the customer to Sr. Pago; avoiding unnecessary sensitive data manipulation.

To achieve this Sr Pago provides a javascript library.

Pre-requisites

Register the application in Sr Pago platforms.

Proceso

1. Import the dependencies, in this case they will be Sr Pago libraries and jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://js.srpago.com/v1/srpago.min.js"></script>
<script type="text/javascript" src=“https://js.srpago.com/v1/srpago.encryption.min.js"></script>

2. Create the form that will gather the information, for the tokenization process you’ll need at least credit card number, CC holder name, CVV, expiration month and year, nevertheless, it’s important to know that in the checkout process you may need other information for your internal process, such as shipping address, contact email, phone, etc.

In this case the form just includes the minimal requirements.

    <dl>
        <dt>Número de tarjeta</dt>
        <dd><input type="text" name="number" maxlength="16"  value=""  class="card-number"  data-card="number" placeholder="Número de tarjeta"/></dd>
        <dt>Nombre de tarjetahabiente</dt>
        <dd><input type="text" name="holder_name" value=""  class="card-holder-name"  data-card="holder_name"  placeholder="Tarjetahabiente"/></dd>
        <dt>Fecha de expiración MM/YY</dt>
        <dd>
            <input type="text" name="month" maxlength="2" size="2" class="card-exp-month"  data-card="exp_month" value=""/>
            <input type="text" name="year" maxlength="2" size="2"  class="card-exp-year"  data-card="exp_year" value=""/>
        </dd>
        <dt>CVV</dt>
        <dd>
            <input type="password" name="cvv" size="4" data-card="cvv" class="card-cvv"  value=""/>
        </dd>
    </dl>
<form action=“<!— Acción a la que te vas a dirigir para realizar el cobro —>“ method="POST" id="card-payment-form">
    <input type="hidden" name="tokenInput" id="tokenInput" />
    <input type="button" id="card-payment-form-button" value="Pagar ahora"/>
    <hr/><label id=“response_message"></label>
</form>

3. Once the form is in place, it’s important to set the logic to create the token and submit the form

<script type="text/javascript">
    $( document ).ready(function() {
        SrPago.setLiveMode(false);
        SrPago.setPublishableKey(“/*Llave pública de la aplicación */“);
        $('#card-payment-form-button').click(function(event) {
            var onSuccessHandler = function(result){
                $("#response_message").html("Con este token procesará el pago desde su Servidor " + result.token);
                $("#tokenInput").val(result.token);
                $("#card-payment-form").submit();
            };
            var onFailHandler = function(error){
                $("#response_message").html("Error " + error.code + ": " + error.message);
            };
            var card = {
                number: $('.card-number').val(),
                holder_name: $('.card-holder-name').val(),
                cvv: $('.card-cvv').val(),
                exp_month: $('.card-exp-month').val(),
                exp_year: $('.card-exp-year').val()
            };        SrPago.token.create(card,onSuccessHandler,onFailHandler);
            return false;
        });
    });
</script>

This is how the tokenization process ends, it is important to state that there is a hidden input in the form named tokenInput, this input will be the one that will carry the token to the backend to continue with the charge process.

In the next sections we will review how to use this token.

Note: The tokenization process returns a token tok_xxxx, this token can be used only once and in a short amount of time.

Additional resources

You can download our demo Tokenization JS demo Click here