EVO Pay Integration

This tutorial describes how to integrate Evo Pay for credit card tokenization and perform sales via API. The process includes configuring Evo Pay on the frontend, capturing the card token, and completing the sale through the sales API.

Step 1: Configuring Evo Pay

Before you begin, load the Evo Pay script to enable card tokenization.

1. Add the Evo Pay script to your HTML:

Include the <script> tag in the <head> of your HTML to load the Evo Pay script.

2. Creating the component to capture card data:

Add the <evo-cartao> component in the body of the page. This component will be responsible for capturing the card data.

3. Configuring the Component in JS:

Define the evo-cartao component and configure the necessary data (gateway, card brands, translations) for it to function correctly.

4. Configuring the Gateway `evoCartao.gateway`

This code configures the Evo Pay payment gateway. It uses data provided by the Evo API, which may include information about the public key (publicKey), fraud prevention settings, and other properties necessary for payment processing.

Data Source: The mentioned URL (https://evo-integracao-api.w12app.com.br/api/v1/configuration/gateway) provides this information.

5. Configuring Translations `(evoCartao.traducoes)`

This configuration is used to translate the fields of the payment form, such as "Card Number", "Cardholder Name", etc. This ensures that the form labels are presented in the correct language for the end user.

Data Source: The translation data is obtained from a specific API (https://evo-integracao-api.w12app.com.br/api/v1/configuration/card-translation), where translations for each payment card field are provided.

Step 2: Using the Generated Token

When the card is successfully tokenized, the event 'eventoTokenGerado' will be triggered, and you will receive an object with the generated token. This token will be used to complete the sale in Evo.

Step 3: Completing the Sale

With the token generated by Evo Pay, you can complete the sale via the sales API.

Example of a POST call to the sales endpoint:

Summary of Flows

Card Tokenization: Use Evo Pay to capture card data and generate a token. This occurs when clicking the "Save" button.

Completing the Sale: After obtaining the token, use the sales API to register the sale, passing the customer, service, and payment data, including the generated token.

Responses: The return of the eventoTokenGerado or eventoOcorreuErro event will inform whether the tokenization was successful or if there was an error.

This flow ensures that you can perform sales securely and easily, using Evo Pay to tokenize cards and record transactions.

Step 1: Configuring Evo Pay#

1. Add the Evo Pay script to your HTML:#

2. Creating the component to capture card data:#

3. Configuring the Component in JS:#

4. Configuring the Gateway evoCartao.gateway#

5. Configuring Translations (evoCartao.traducoes)#

Step 2: Using the Generated Token#

Step 3: Completing the Sale#

Example of a POST call to the sales endpoint:#

Summary of Flows#