Tokenizecard JS

O tokenizecard.js é um JavaScript desenvolvido pelo Pagar.me que você pode incluir na sua página de checkout, não interferindo em nada no visual da loja. Desta forma, toda vez que um comprador clicar no botão para finalizar o pedido, antes mesmo que o seu sistema monte a requisição para o Pagar.me, o nosso JavaScript captura os dados do cartão, manda direto para a nossa API e a nossa API devolve um token deste cartão.

O tokenizecard.js segue o seguinte fluxo:

🚧

Liberação de Domínio

Para utilizar o tokenizecard.js é necessário cadastrar o domínio que fará a requisição para a Pagar.me. A liberação do domínio pode ser feita via dashboard nas configurações de conta.

Integração com tokenizecard.js

Passo 1:
Na tag <form> insira o atributo data-pagarmecheckout-form para que o script identifique de onde serão extraídos os dados.

<form action="{{url de sua action}}" method="POST" data-pagarmecheckout-form>
   </form>

Passo 2:
Coloque nos campos <input> do seu formulário os atributos "data-pagarmecheckout-element" correspondentes a cada um dos campos do cartão, conforme HTML abaixo. Estes serão capturados pelo script para a geração do token na submissão do formulário.

<form action="{{url de sua action}}" method="POST" data-pagarmecheckout-form>
    <input type="text" name="holder-name" data-pagarmecheckout-element="holder_name">
    <input type="text" name="card-number" data-pagarmecheckout-element="number">
    <span  data-pagarmecheckout-element="brand"></span>
    <input type="text" name="card-exp-month" data-pagarmecheckout-element="exp_month">
    <input type="text" name="card-exp-year" data-pagarmecheckout-element="exp_year">
    <input type="text" name="cvv" data-pagarmecheckout-element="cvv">
    <input type="text" name="buyer-name">
    <button type="submit">Enviar</button>
</form>

<form action="{{url de sua action}}" data-pagarmecheckout-form>
    holder_name:<input data-pagarmecheckout-element="holder_name-0"><br>
    number:<input data-pagarmecheckout-element="number-0"> <span data-pagarmecheckout-element="brand-0"></span><br>
    exp_month:<input data-pagarmecheckout-element="exp_month-0"><br>
    exp_year:<input data-pagarmecheckout-element="exp_year-0"><br>
    cvv:<input data-pagarmecheckout-element="cvv-0"><br>

    <br><br>

    holder_name 1:<input data-pagarmecheckout-element="holder_name-1"><br>
    number 1:<input data-pagarmecheckout-element="number-1"> <span data-pagarmecheckout-element="brand-1"></span><br>
    exp_month 1:<input  data-pagarmecheckout-element="exp_month-1"><br>
    exp_year 1:<input data-pagarmecheckout-element="exp_year-1"><br>
    cvv 1:<input data-pagarmecheckout-element="cvv-1"><br>

    <input name="user-info x"><br>
    <input name="user-info y"><br>
    <input name="user-info z"><br>

    <button type="submit">Enviar</button>
</form>

Quando o formulário for submetido, o script vai gerar o token e retorná-lo de duas maneiras:

1. Através do atributo "pagarmetoken" no POST realizado.
2. Inserindo um novo campo com o atributo "name=pagarmetoken" contendo o token gerado.

No caso de multimeios, para cada um dos formulários é feita uma requisição e no final é gerado um campo com o atributo "pagarmetoken-x".

👍

Campos adicionais podem ser inseridos

Quaisquer outros campos podem ser adicionados ao mesmo formulário, sem o atributodata-pagarmecheckout-element, e estes serão enviados normalmente ao seu servidor, sem a intervenção do script, como por exemplo, buyer-name.

📘

A bandeira do cartão é opcional

Não é obrigatório enviar a bandeira do cartão. Se ela não for enviada, o nosso sistema irá detectá-la automaticamente.

🚧

Formatos válidos para data de expiração

O campo referente a data da expiração do cartão pode ser informado de duas formas:

• Em campo único, marcado como "exp_date" (O formato esperado é MM-YY ou MM-YYYY)
• Em dois campos, "exp_month" e "exp_year".

Passo 3
Deve ser inserido no final da sua página uma tag <script> com o tokenizecard.js e o atributo data-pagarmecheckout-app-id contendo sua Chave Pública.

<script src="https://checkout.pagar.me/v1/tokenizecard.js"
        data-pagarmecheckout-app-id="{{sua chave pública}}">
    </script>

❗️

NÃO UTILIZE A SECRET_KEY DO LOJISTA

A autenticação deste endpoint deverá ser feita exclusivamente enviando a public_key do lojista no parâmetro appId na query string. A secret_key de sua loja não deverá ser armazenada na página, tão pouco ser enviada na requisição.

Passo 4:
Depois de inserir o script é preciso iniciar a detecção dos campos com a chamada da função PagarmeCheckout.init(). O métodoinit() pode receber 02 funções de callback:

• success(data), para execução de qualquer lógica de validação customizada.
• fail(error), para tratamento de erros.

Quando a função de callback success é chamada recebe por parâmetro um objeto data, que é um JSON com o token gerado e os demais campos adicionais não mapeados com data-pagarmecheckout-element. Já a função fail recebe por parâmetro os detalhes do erro ocorrido.

<script>
        function success(data) {
            return true;
        };
    
        function fail(error) {
            console.error(error);
        };
    
        PagarmeCheckout.init(success,fail)
    </script>

🚧

Chamada da função init

É essencial que a chamada da função esteja no startup da aplicação. Recomendamos que a chamada seja feita no root da aplicação(index.html) porém ela pode ser feita também no init do seu framework/lib

🚧

Inclua o atributo "name" nos campos não mapeados

É importante que todos os campos adicionais não mapeados possuam o atributo name, pois ele será utilizado para definir o objeto JSON de retorno.

❗️

CAMPO MAPEADOS DEVEM ESTAR NO DOM

Todos os elementos mapeados pelo atributo data-pagarmecheckout-element devem estar no DOM (Document Object Model) quando a função PagarmeCheckout.init() for chamada.

❗️

ABORTANDO O ENVIO DO PEDIDO

Você pode impedir o envio dos dados para os servidores da Pagar.me retornando o valor false na função success.