# Virtual Store's Payment Page

The merchant's payment page must contain the Carat Portal's script. Below are the URL's for download:

**URL for Production environment:**
<br/>
https://<URLPOSTMANPROD/>/js/esitefpayment-1.0.min.js

**URL for Homologation environment:**
<br/>
https://<URLPOSTMAN/>/js/esitefpayment-1.0.min.js

## Fields with card data

The card fields must contain the classes specified below:

| Parameter                                              | Description                                                                                                                                                                                                                                                              |     Format     | Mandatory |
| ------------------------------------------------------ |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| :------------: | :-------: |
| `esitef-cardnumber`                                    | Customer's card number (PAN).                                                                                                                                                                                                                                            | <u><</u> 19 N  |    YES    |
| `esitef-cardexpirydate`                                | Card expiry date in `MMYY` format.                                                                                                                                                                                                                                       |     = 4 N      |    YES    |
| `esitef-cardexpirymonth`<br/>& `esitef-cardexpiryyear` | Card expiry month and year, in `MM` and `YY` format, respectively. These fields can be sent instead of `esitef-cardexpirydate`. If all these fields are sent at the same time, the split date (`esitef-cardexpirymonth` and `esitef-cardexpiryyear`) will have priority. |     = 2 N      |    YES    |
| `esitef-cardsecuritycode`                              | Card security code.                                                                                                                                                                                                                                                      |  <u><</u> 5 N  |    YES    |
| `esitef-cardholder`                                    | Card holder name. <FISERV noTags>Only mandatory for payments with e-Rede, GetNet WS and VR (SmartNet).</FISERV>                                                                                                                                                          | <u><</u> 30 AN |   COND.   |

## Calling Carat Portal's script

When the customer fills the card data and clicks "pay", the merchant's page must call the `esitefDoPayment` JavaScript function, passing as argument a request with the following fields:

| Parameter                            | Description                                                                                                                                                                                                                                 |     Format     | Mandatory |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------: | :-------: |
| `nit`                                | Transaction identification in Carat Portal. The field `nit` received by the transaction creation service.                                                                                                                                   |    = 64 AN     |    YES    |
| `payToken`                           | The field `pay_token` received by the transaction creation service. This token can only be used once.                                                                                                                                       |    = 66 AN     |    YES    |
| `merchantId`                         | Merchant code on Carat Portal. The production and certification codes will be different.                                                                                                                                                    | <u><</u> 15 AN |    YES    |
| `locale`                             | Language of the messages returned in validation errors (`onInvalid` callback). It can receive the following values: <br/>`pt` - Portuguese <br/> `en` - English <br/> `es` - Spanish <br/> If the locale is not sent, `pt` will be used.    |     = 2 A      |    NO     |
| `isCardSecurityCode`<br/> `Optional` | Defines if the card security code will be validated as a mandatory or optional field. Send `true` if it's an optional field. If this field is not sent, the value `false` will be used (mandatory security code).                           | <u><</u> 5 T/F |    NO     |
| `onSuccess`                          | Callback function the will be called after a successful payment on Carat Portal. This function receives as argument the payment response described in [Success and failure callbacks response.](#success-and-failure-callbacks-response)    |       F        |    YES    |
| `onFailure`                          | Callback function the will be called after an unsuccessful payment on Carat Portal. This function receives as argument the payment response described in [Success and failure callbacks response.](#success-and-failure-callbacks-response) |       F        |    YES    |
| `onInvalid`                          | Callback function that will be called after a JavaScript validation error. This function receives as argument the error list described in [Validation error callback response](#validation-error-callback-response)                         |       F        |    YES    |

## Success and failure callbacks response

The `onSuccess` and `onFailure` callback functions receive as argument an object containing information related to the payment. Below are the descriptions of these fields:

| Parameter            | Description                                                                                                                                                          |      Format      |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------: |
| `code`               | Carat Portal response code. Any code different from `0` (zero) means failure. For further information, refer to the [Response codes.](codigos-da-api#response-codes) |   <u><</u> 4 N   |
| `message`            | Carat Portal response message.                                                                                                                                       | <u><</u> 500 AN  |
| **payment**          |
| `authorizer_code`    | Authorizer response code.                                                                                                                                            |  <u><</u> 10 AN  |
| `authorizer_message` | Authorizer response message.                                                                                                                                         | <u><</u> 500 AN  |
| `status`             | Status of the payment transaction on Carat Portal.                                                                                                                   |      = 3 AN      |
| `nit`                | Identifier of the payment transaction on Carat Portal.                                                                                                               |     = 64 AN      |
| `order_id`           | Order code sent by the merchant on the creation of the transaction.                                                                                                  |  <u><</u> 40 AN  |
| `customer_receipt`   | Customer's receipt.                                                                                                                                                  | <u><</u> 4000 AN |
| `authorizer_id`      | Code of the authorizer used on the transaction.                                                                                                                      |   <u><</u> 4 N   |

## Validation error callback response

The `onInvalid` callback function receives as argument a list of error objects, containing the fields below:

| Parameter | Description                 |     Format      |
| --------- | --------------------------- | :-------------: |
| `field`   | Name of the field in error. | <u><</u> 30 AN  |
| `cause`   | Error message.              | <u><</u> 100 AN |

## Example

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

To use this example, don't forget to define the variable `{{url}}` to the value<br/> **<URLPOSTMAN/>**

<!--DOCUSAURUS_CODE_TABS-->
<!--HTML-->

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script
      type="text/javascript"
      src="https://{{url}}/js/esitefpayment-1.0.min.js"
    ></script>
    <script>
      function myPay() {
          var request = {
              onSuccess: function(response) {
                  console.log(response.code);
                  console.log(response.message);
                  console.log(response.payment.authorizer_code);
                  console.log(response.payment.authorizer_message);
                  console.log(response.payment.status);
                  console.log(response.payment.nit);
                  console.log(response.payment.order_id);
                  console.log(response.payment.customer_receipt);
                  console.log(response.payment.authorizer_id);
              },
              onFailure: function(response) {
                  console.log(response.code);
                  console.log(response.message);
                  console.log(response.payment.authorizer_code);
                  console.log(response.payment.authorizer_message);
                  console.log(response.payment.status);
                  console.log(response.payment.nit);
                  console.log(response.payment.order_id);
                  console.log(response.payment.authorizer_id);
              },
              onInvalid: function(errors) {
                  for (var i = 0; i < errors.length; i++) {
                      console.log(errors[i].field);
                      console.log(errors[i].cause);
                  }
              },
              nit: ‘1234567890123456789012345678901234567890123456789012345678901234',
              payToken: ‘123456789012345678901234567890123456789012345678901234567890123456',
              merchantId: 'xxxxxxxx',
              locale: 'pt',
              isCardSecurityCodeOptional: false
          };
          esitefDoPayment(request);
      }
    </script>
  </head>

  <body>
    <form method="POST">
      <input type="text" class="esitef-cardnumber" />
      <input type="text" class="esitef-cardexpirymonth" />
      <input type="text" class="esitef-cardexpiryyear" />
      <input type="text" class="esitef-cardsecuritycode" />
      <input type="button" onclick="myPay()" />
    </form>
  </body>
</html>
```

<!--END_DOCUSAURUS_CODE_TABS-->