Online merchant payment page with 3DS authentication.

After completing the transaction creation step, the merchant's page should be displayed to the user. On this page, integrated with JavaScript payment and 3DS 2.0 authentication, it is crucial to include two files on the checkout page: a JS script and a CSS style sheet. These two files are essential to ensure that the 3DS 2.0 authentication payment functions correctly. In addition to these files, it is necessary to add an HTML tag to the payment page (this HTML tag will be used in the event of a 3DS method flow).

Below are the URLs for download:

Script JS#

Below are the homologation and production URLs for download:

URL for Production environment:

https://esitef.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

URL for Homologation environment:

https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js

CSS style sheet#

Below are the homologation and production URLs for download:

URL for Production environment:

https://esitef.softwareexpress.com.br/css/v2/threeds.css

URL para ambiente de Homologação:

https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css

Tag div#

Below is the mandatory div tag for the operation of the 3DS method.

<div id="divThreeDsMethodData"></div>

The card fields must contain the specified classes below:

Parameter	Description	Format	Required
`esitef-cardnumber`	Buyer's card number (PAN).	< 19 N	YES
`esitef-cardexpirydate`	Card expiration date in `MMYY` format.	= 4 N	YES
`esitef-cardexpirymonth` & `esitef-cardexpiryyear`	Card expiration month and year, in `MM` and `YY` formats respectively. These fields can be sent instead of `esitef-cardexpirydate`. If all are sent simultaneously, the separated date (`esitef-cardexpirymonth` and `esitef-cardexpiryyear`) will take precedence.	= 2 N	YES
`esitef-cardsecuritycode`	Card security code.	< 5 N	YES
`esitef-cardholder`	Cardholder name. Mandatory only for e-Rede, GetNet WS, and VR AN (SmartNet) payments.	< 30 AN	COND.

Two functions must be called during the checkout:

startThreeDsCall details : This function should be called through an event after the final card input; it initiates 3DS and, depending on the BIN, may trigger the 3DS method call if necessary.

esitefDoPaymentCall details : This function should be called through an event after filling in all the necessary data for the checkout completion. This call will initiate the 3DS authentication; the issuer may request a challenge to be performed by the buyer. In this case, a modal will open with the respective challenge. In this scenario, the merchant should redirect the end of the request to a processing screen and await the response from the status notification.

Below is an example of a page integrated with Carat's JavaScript payment:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coleta de dados de cartão via JS</title>

    <script type="text/javascript"
            src="https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js"></script>
    <script type="text/javascript"
            src="https://esitef-homologacao.softwareexpress.com.br/lojateste/loja/js/lib/jquery.min.js"></script>
    <script type="text/javascript"
            src="https://esitef-homologacao.softwareexpress.com.br/lojateste/loja/js/lib/jquery.payment.js"></script>
    <script type="text/javascript"
            src="https://esitef-homologacao.softwareexpress.com.br/lojateste/loja/js/lib/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/style.css">
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/payment.css">
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/payment-credit.css"/>
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/error.css">
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/authentication.css">
    <link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css"/>


    <script type="text/javascript">
        $(document).ready(function() {
            /* limpa cartao da consulta bin */
            $("#card-number").val('');
            $("#bin-card-expiration-month").val('');
            $("#bin-card-expiration-year").val('');
            $("#bin-security-code").val('');

            $(".payment-checked-number").hide();
            $(".payment-error-number").hide();
            $(".bin-payment-checked-due").hide();
            $(".bin-payment-error-due").hide();
            $(".bin-payment-checked-security-code").hide();
            $(".bin-payment-error-security-code").hide();
            $(".payment-checked-holdername").hide();
            $(".payment-error-holdername").hide();

            $("#card-number").removeClass('has-error-input');
            $('#card-number').payment('restrictNumeric');

            /* inicializacao das restricoes dos campos */
            $('#bin-card-expiration-year').payment('restrictNumeric');
            $('#bin-card-expiration-month').payment('restrictNumeric');
            $('#bin-security-code').payment('restrictNumeric');
            $("#bin-security-code").payment('formatCardCVC');

            $("#card-number").on('blur', function() {
               result = isFieldSizeValid($(this).val(), 16, null);
               updateIconSignAndInput("#card-number", ".payment-checked-number", ".payment-error-number", (result));
    
                if(result){
                  threedMethod();
                }
    
                enableConfirmButton(result);
            });
    
            $('#bin-security-code').on('blur', function() {
                result = isFieldSizeValid($(this).val(), 3, null);
                updateIconSignAndInput("#bin-security-code", ".bin-payment-checked-security-code", ".bin-payment-error-security-code", result);
            });
    
            $('#bin-security-code').on('keyup', function() {
                result = isFieldSizeValid($(this).val(), 3, null);
                updateIconSignAndInput("#bin-security-code", ".bin-payment-checked-security-code", ".bin-payment-error-security-code", result);

                $(this).removeClass("has-error-input");

                 /* Mostra o check verdinho e muda o foco pro proximo campo */
                if ($(this).val().length == 4) {
                    updateIconSignAndInput("#bin-security-code", ".bin-payment-checked-security-code", ".bin-payment-error-security-code", true);
                }

                enableConfirmButton(result);
            });
    
            $('#bin-card-expiration-month').on('keyup', function() {

                var cleanedValue = $(this).val().replace(/[^0-9]+/g, '');

                $(this).val(cleanedValue);

                if ($(this).val().length == 2) {
                    $("#bin-card-expiration-year").focus();
                }

                enableConfirmButton(result);
            });
    
            $("#bin-card-expiration-month").on('blur', function() {
                result = isFieldSizeValid($(this).val(), 2, null);
                resultMonth = isValidMonth($(this).val());
                updateIconSignAndInput("#bin-card-expiration-month", ".bin-payment-checked-due", ".bin-payment-error-due", (result && resultMonth));

                /* caso especial para data de vencimento */
                if (!isFieldSizeValid($("#bin-card-expiration-year").val(), 2, null)) {
                    $(".bin-payment-checked-due").hide();
                    $(".bin-payment-error-due").show();
                }

                enableConfirmButton(result);
            });
    
            $('#bin-card-expiration-year').on('keyup', function() {

                var cleanedValue = $(this).val().replace(/[^0-9]+/g, '');

                $(this).val(cleanedValue);

                result = isFieldSizeValid($(this).val(), 2, null);

                updateIconSignAndInput("#bin-card-expiration-year", ".bin-payment-checked-due", ".bin-payment-error-due", result);

                enableConfirmButton(result);
            });
    
            $('#bin-card-expiration-year').on('blur', function() {
                result = isFieldSizeValid($(this).val(), 2, null);
                updateIconSignAndInput("#bin-card-expiration-year", ".bin-payment-checked-due", ".bin-payment-error-due", result);

                /* caso especial para data de vencimento */
                if (!isValidMonth($("#bin-card-expiration-month").val()) || !isFieldSizeValid($("#bin-card-expiration-month").val(), 2, null)) {
                    $(".bin-payment-checked-due").hide();
                    $(".bin-payment-error-due").show();
                }

                enableConfirmButton(result);
            });

            $("#card-holdername").on('blur', function() {
                result = isFieldSizeValid($(this).val(), 1, null);
                updateIconSignAndInput("#card-holdername", ".payment-checked-holdername", ".payment-error-holdername", (result));

                enableConfirmButton(result);
            });
        });

        function enableConfirmButton(result){
            if (result && isAllFieldsOK()) {
                $(".step-confirm").prop("disabled", false);
            } else {
                $(".step-confirm").prop("disabled", true);
            }
        }

        function updateIconSignAndInput(inputSelector, iconSelectorOK, iconSelectorError, validation) {

            if (validation) {
                $(iconSelectorOK).show();
                $(iconSelectorError).hide();
                $(inputSelector).removeClass("has-error-input");
            } else {
                $(iconSelectorOK).hide();
                $(iconSelectorError).show();
                $(inputSelector).addClass("has-error-input");
            }
        }

       function resetIconSignAndInput(inputSelector, iconSelectorOK, iconSelectorError, validation) {
           $(iconSelectorOK).hide();
           $(iconSelectorError).hide();
           $(inputSelector).removeClass("has-error-input");
       }

       function isFieldSizeValid(value, minSize, maxSize) {

            if (value.length >= minSize) {
                /* verifica se maxSize foi passado nao nulo */
                if (maxSize) {
                    if (value.length <= maxSize) {
                        return true;
                    } else {
                        return false;
                    }
                }
                return true;
            }
            return false;
       }

       function isValidMonth(value) {
            if (value <= 12 && value > 0) {
                return true;
            }
            return false;
        }

        function isAllFieldsOK() {

            if ($("#card-number").is(":visible")
                    && !$(".payment-checked-number").is(":visible")) {
                return false;
            }


            if ($("#bin-card-expiration-year").is(":visible")
                    && !$(".bin-payment-checked-due").is(":visible")) {
                return false;
            }

            if ($("#bin-security-code").is(":visible")
                    && !$(".bin-payment-checked-security-code").is(":visible")) {
                return false;
            }


            if ($("#card-expiration-year").is(":visible")
                    && $("#card-expiration-year").val().length < 2) {
                return false;
            }

            if ($("#card-expiration-month").is(":visible")
                    && $("#card-expiration-month").val().length < 2) {
                return false;
            }

            if ($("#security-code").is(":visible")
                    && $("#security-code").val().length < 3) {
                return false;
            }

            if ($("#card-holdername").is(":visible")
                && $("#card-holdername").val().length == 0) {
                return false;
            }

            return true;
        }

        function findGetParameter(parameterName) {
            var result = null,
                tmp = [];
            var items = location.search.substr(1).split("&");
            for (var index = 0; index < items.length; index++) {
                tmp = items[index].split("=");
                if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
            }
            return result;
        }

        function myPay() {
           var request = {
              onSuccess: function(response) {
                 var responseValue = JSON.stringify(response);
                 localStorage.setItem('resultSuccess', responseValue);

                 if (response.payment.status == 'PPC') {
                    window.location = 'loja-pag-pendente-3ds-mpi.html?nit='+ findGetParameter('nit');                    
                 } else {
                     window.location = 'loja-sucesso-3ds-mpi.html';
                 }
              },
              onProcessing: function() {
                 window.location = 'loja-pag-pendente-3ds-mpi.html?nit='+ findGetParameter('nit');
              },
              onFailure: function(response) {
                  var responseValue = JSON.stringify(response);
                  localStorage.setItem('resultFailure', responseValue);

                  window.location = 'loja-fracasso-js.html';
              },
              onInvalid: function(response) {
                 var message = response[0].field + ' ' + response[0].cause;
                 for (var i = 1; i < response.length; i++) {
                     message += ', ' + response[i].field + ' ' + response[i].cause;
                 }
                 document.getElementById('resultInvalid').innerHTML = message;
              },
              nit: findGetParameter('nit'),
              payToken: findGetParameter('payToken'),
              merchantId: findGetParameter('merchantId'),
              authenticate: 'true'
           };

          esitefDoPayment(request);
        }


        function threedMethod() {
           var request = {
              onSuccess: function(response) {
                 var responseValue = JSON.stringify(response);
              },
              onFailure: function(response) {
                  var responseValue = JSON.stringify(response);
                  console.log("Error 3ds method: "+ responseValue);
              },
              onInvalid: function(response) {
                 var message = response[0].field + ' ' + response[0].cause;
                 for (var i = 1; i < response.length; i++) {
                     message += ', ' + response[i].field + ' ' + response[i].cause;
                 }
                 document.getElementById('resultInvalid').innerHTML = message;
              },
              nit: findGetParameter('nit'),
              payToken: findGetParameter('payToken'),
              merchantId: findGetParameter('merchantId'),
              authorizerId: findGetParameter('authorizerId')
           };

          startThreeDs(request);
        }
    
    </script>
</head>
<body>
<form id="pagamentoForm" name="pagamentoForm" method="POST">
    <div class="row">
        <div class="payment-input col-md-12 col-sm-12 col-xs-12" id="payment-input-card" style="">

            <div class="payment-input-box payment-input-box-pf col-md-offset-2 col-sm-offset-1 col-md-10 col-sm-10 col-xs-12">

                <div class="row">

                    <div class="input-title col-md-12 col-sm-12">

                        <span class="glyphicon glyphicon-credit-card input-title-icon col-md-1 col-sm-1 col-xs-1"></span>

                        <span class="input-title-value">Informe os dados do seu cartão</span>

                    </div>

                </div>

                <div class="input-box-left col-md-6 col-sm-7 col-xs-12 ">

                    <div class="row" id="cardnumber-box">

                        <div class="input-card-number col-md-11 col-sm-11 col-xs-12">

                            <label for="card-number" class="col-md-12 col-sm-12 col-xs-12 input-label">
                                Número do Cartão *
                            </label>

                            <div class="col-md-7 col-sm-7 col-xs-10 box-card-number">
                                <input type="tel" id="card-number" maxlength="19" autocomplete="off"
                                       placeholder="••••   ••••   ••••   ••••"
                                       class="form-control col-md-5 col-sm-5 col-xs-5 esitef-cardnumber">
                            </div>

                            <span class="glyphicon glyphicon-ok col-md-1 col-sm-1 col-xs-1 payment-checked payment-checked-number"
                                  style="display: block;"></span>

                            <span class="fa fa-exclamation col-md-1 col-sm-1 col-xs-1 payment-error payment-error-number"
                                  style="display: none;"></span>

                        </div>

                    </div>
                    <div id="box-dados-extra-cartao">
                        <div class="row">
                            <div id="input-bin-due-date-security-code"
                                 class="input-bin-due-date-security-code col-md-6 col-sm-6 col-xs-12">

                                <label for="bin-card-expiration-month"
                                       class="col-md-12 col-sm-12 col-xs-12 input-label input-label-due">Data de
                                    Validade&nbsp;<span data-toggle="tooltip" data-placement="top" title=""
                                                        data-original-title="A data de validade está localizada na frente do seu cartão. Informe o mês e o ano (MM/AA).">[?]</span>

                                </label>

                                <div class="col-md-4 col-sm-5 col-xs-5 box-due-date">
                                    <input type="tel" class="form-control esitef-cardexpirymonth" autocomplete="off"
                                           id="bin-card-expiration-month" placeholder="••" maxlength="2">
                                </div>

                                <span class="col-md-1 col-sm-1  col-xs-2 bar-due">/</span>

                                <div class="col-md-4 col-sm-5 col-xs-5 box-due-date">
                                    <input type="tel" class="form-control esitef-cardexpiryyear" autocomplete="off"
                                           id="bin-card-expiration-year" placeholder="••" maxlength="2">
                                </div>

                                <span id="bin-payment-checked-due"
                                      class="glyphicon glyphicon-ok col-md-1 col-sm-1 col-xs-1 payment-checked bin-payment-checked-due"
                                      style="display: block;"></span>

                                <span id="bin-date-checked-error"
                                      class="fa fa-exclamation col-md-1 col-sm-1  col-xs-1 payment-error bin-payment-error-due"
                                      style="display: none;"></span>
                            </div>

                            <div id="input-bin-security-code"
                                 class="input-bin-security-code col-md-6 col-sm-6 col-xs-12">

                                <label for="bin-security-code"
                                       class="col-md-12 col-sm-12 col-xs-12 input-label input-bin-label-security-code">Código
                                    de segurança
                                    <span id="bin-security-code-tooltip" data-toggle="tooltip" data-placement="top"
                                          title=""
                                          data-original-title="<div><p style='font-weight: bold; margin: 0 0 0 1rem;'>Código de segurança</p><div style='display: flex; text-align: center; align-items: center;'><img src='/images/v2/tooltip-security-in.png' class='img-responsive'/><p>Número de <span style='color:red;' >3 a 4 dígitos </span> no verso do cartão</p></div></div>"> [?] </span>
                                </label>

                                <div class="box-bin-security-code col-md-4 col-sm-5 col-xs-11">

                                    <input type="tel"
                                           class="col-md-5 col-sm-5 col-xs-5 form-control esitef-cardsecuritycode"
                                           id="bin-security-code" maxlength="5" autocomplete="off" placeholder="•••">
                                </div>

                                <span id="bin-security-code-checked-ok"
                                      class="glyphicon glyphicon-ok col-md-1 col-sm-1 col-xs-1 payment-checked bin-payment-checked-security-code"
                                      style="display: block;"></span>

                                <span id="bin-security-code-checked-error"
                                      class="fa fa-exclamation col-md-1 col-sm-1 col-xs-1 payment-error bin-payment-error-security-code"
                                      style="display: none;"></span>

                            </div>

                        </div>
                    </div>
                    <div class="row" id="cardholdername-box">

                        <div class="input-card-holdername col-md-11 col-sm-11 col-xs-12">

                            <label for="card-holdername" class="col-md-12 col-sm-12 col-xs-12 input-label">
                                Nome(com está no cartão) *
                            </label>

                            <div class="col-md-7 col-sm-7 col-xs-10 box-card-holdername">
                                <input type="tel" id="card-holdername" autocomplete="off"
                                       class="form-control col-md-5 col-sm-5 col-xs-5 esitef-cardholder">
                            </div>

                            <span class="glyphicon glyphicon-ok col-md-1 col-sm-1 col-xs-1 payment-checked payment-checked-holdername"
                                  style="display: block;"></span>

                            <span class="fa fa-exclamation col-md-1 col-sm-1 col-xs-1 payment-error payment-error-holdername"
                                  style="display: none;"></span>

                        </div>

                    </div>
                </div>
                <div class="input-box-right col-md-4 col-sm-5 col-xs-12">

                    <div class="row visible-xs col-xs-12">
                        <div class="cod-xs-12 site-seguro-dados-cartao">
                            <img src="/images/v2/site-seguro-icon.png"
                                 class="site-seguro-dados-cartao-card-icon img-responsive" alt="SITE 100% SEGURO">
                            <span>SITE 100% SEGURO</span>
                        </div>
                    </div>

                    <div class="col-md-12 col-sm-12 col-xs-12 step-button-submit payment-button-submit ">
                        <button type="button" id="step-confirm" onclick="myPay()"
                                class="step-confirm btn btn-success col-md-12 col-sm-12 col-xs-12 btn-loader"
                                disabled="">
                            CONFIRMAR PAGAMENTO
                            <span class="glyphicon glyphicon-menu-right step-confirm-icon step-confirm-icon-payment"
                                  aria-hidden="true"></span>
                        </button>
                        <div class="col-md-12 col-sm-12  col-xs-12 next-step-container">
                            <span class="next-step">
                                Próximo Passo:
                            </span>
                            <span id="nextStepValue" class="next-step-value">
                                &nbsp;
                                Validação de Pagamento
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>
<p id="resultInvalid" style="color:red"></p>
<div id="divThreeDsMethodData">
</div>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true">
</div>
</body>
</html>

Key points of the implementation example above:

Import of the JS for 3DS authentication:

<script type="text/javascript" src="https://esitef-homologacao.softwareexpress.com.br/js/esitefauthenticatepayment-1.0.min.js"></script>

Import of the css for 3DS authentication:

<link rel="stylesheet" href="https://esitef-homologacao.softwareexpress.com.br/css/v2/threeds.css" />

Call to the startThreeDs function. Learn more. (The call is inside the threedMethod function) when filling the card-number field with a length of 16:

    $("#card-number").on('blur', function() {
        result = isFieldSizeValid($(this).val(), 16, null);
        updateIconSignAndInput("#card-number", ".payment-checked-number", ".payment-error-number", (result));
    
        if(result){
            threedMethod();
        }
    
        enableConfirmButton(result);
    });

Implementation of the request creation and startThreeDs function call:

function threedMethod() {
   var request = {
      onSuccess: function(response) {
         var responseValue = JSON.stringify(response);
      },
      onFailure: function(response) {
          var responseValue = JSON.stringify(response);
          console.log("Error 3ds method: "+ responseValue);
      },
      onInvalid: function(response) {
         var message = response[0].field + ' ' + response[0].cause;
         for (var i = 1; i < response.length; i++) {
             message += ', ' + response[i].field + ' ' + response[i].cause;
         }
         document.getElementById('resultInvalid').innerHTML = message;
      },
      nit: findGetParameter('nit'),
      payToken: findGetParameter('payToken'),
      merchantId: findGetParameter('merchantId'),
      authorizerId: findGetParameter('authorizerId')
   };

  startThreeDs(request);
}

Implementation of the request creation and esitefDoPayment function call:

function myPay() {
   var request = {
      onSuccess: function(response) {
         var responseValue = JSON.stringify(response);
         localStorage.setItem('resultSuccess', responseValue);

         if (response.payment.status == 'PPC') {
            window.location = 'loja-pag-pendente-3ds-mpi.html?nit='+ findGetParameter('nit');                    
         } else {
             window.location = 'loja-sucesso-3ds-mpi.html';
         }
      },
      onProcessing: function() {
         window.location = 'loja-pag-pendente-3ds-mpi.html?nit='+ findGetParameter('nit');
      },
      onFailure: function(response) {
          var responseValue = JSON.stringify(response);
          localStorage.setItem('resultFailure', responseValue);

          window.location = 'loja-fracasso-js.html';
      },
      onInvalid: function(response) {
         var message = response[0].field + ' ' + response[0].cause;
         for (var i = 1; i < response.length; i++) {
             message += ', ' + response[i].field + ' ' + response[i].cause;
         }
         document.getElementById('resultInvalid').innerHTML = message;
      },
      nit: findGetParameter('nit'),
      payToken: findGetParameter('payToken'),
      merchantId: findGetParameter('merchantId'),
      authenticate: 'true'
   };

  esitefDoPayment(request);
}

Implementation of the div with id="divThreeDsMethodData" for the execution of the 3DS method:

  <div id ="divThreeDsMethodData"></div>

Home

Script JS#

CSS style sheet#

Tag div#