Checkout Transparente

O Checkout Transparente é um framework com customização facilitada (Cores, fontes e outras informações), baseado nas melhores praticas de mercado para conversão. O mesmo utiliza o Gateway de Pagamentos e tem o certificado de segurança PCI-DSS.

Clique e veja a Demonstração

A instalação da biblioteca de Checkout Transparente Gateway depende da instalação do script abaixo:

Fluxos

Legenda

Tokenização

Trata-se de um processo pelo qual um dado sigiloso, como é o caso do número de um cartão de crédito, é substituído por símbolos afim de manter os dados seguros.

O checkout transparente irá usar a publicApiKey para fazer as chamadas de tokenização automaticamente, assim mantendo os dados do cartão do usuário seguros.

Criação de pagamento

A seguir será possível ver as chamadas que irão criar e capturar uma transação de pagamento.

A chamada createTransaction pode fazer a captura automaticamente se for passado o parametro autoCapture: true, caso o contrario é preciso fazer as duas chamadas.

Cancelamento de pagamento

Caso haja necessidade de um cancelamento, este pode ser feito de forma simples pela chamada a seguir.

Detalhamento de pagamento

Existem duas formas de se manter informado sobre um pagamento pela 4all, estes são:

1. Ao criar um novo pagamento, você pode adicionar um postback ao mesmo, isso fará com que a URL informada para o postback receba uma requisição sempre que o pagamento tiver uma mudança de status.

2. Outra possibilidade é usar a chamada getTransactionDetails que irá retornar todos os detalhes do pagamento.

Implementação

1 - Adicionar o script na página HTML

Para adicionar o script é necessário inserir o código antes do fechamendo da tag <body> no HTML.

  <script src="https://checkout.gateway.homolog.4all.com/index.js?v=1"></script> 

2 - Adicionar o CSS na página HTML

Para adicionar o CSS é necessário inserir o código antes do fechamendo da tag <head> no HTML.

  <link type="text/css" rel="stylesheet" href="https://checkout.gateway.homolog.4all.com/main.css?v=1"/> 

3 - Iniciando lib de checkout transparente

HTML

  <form action="https://www.seusite.com.br/createPayment.php" method="post" id='form'>
      <div id="payment-area"></div>
  </form>

Javascript

  window.onload = function() {
    FourAllTransparentCheckout({
        
        publicApiKey: '0123456789ABCDEF01...',
        
        element: document.getElementById('payment-area'),
        form: document.getElementById('form'),
        
        primaryColor: '#ff0000',
        primaryFont: 'Arial, sans-serif',

        submitBorder: '15px',
        titleBorder: '15px',

        requireAddress: false,
        
        customer: {
            fullName: 'John Doe',
            emailAddress: 'john@doe.com.br',  
            cpf: '03003003003',
            phoneNumber: '5551999995555',
            birthday: '1990-10-10'
        },

        payment: {
            amount: 56900,
            subtotal: 54900,
            shipping: 20000,
            installments: 12,
            interestRules: [
                {
                    min: 2,
                    max: 3,
                    percentual: 20
                },
                {
                    min: 4,
                    max: 8,
                    percentual: 40
                }
            ],
        },

        onLoad: function() {
            // Callback opcional
        },

        onError: function() {
            // Callback opcional
        },

        performPayment: function() {
            // Callback opcional
        }

    });
  }

Callbacks

Parâmetros aceitos

Observações:

• Caso o objeto customer for nulo ou falso, o checkout irá gerar os formulários para dados de usuário.
• Se o parâmetro requireAddress for true, o formulário irá exigir dados de endereço.
• No checkout transparente se utilizado o parâmetro interestRules, o valor final da multiplicação das parcelas pode ter divergência na última casa decimal, em relação ao valor total, devido ao arredondamento aplicado no frontend, porém o valor final da compra não será alterado no adquirente.

4 - Pagamento

O processo de pagamento é feito pelo usuarío através interface gerada e, ao submeter o pagamento, o evento submit do formulário é disparado e os dados do formulário são enviados normalmente através do método POST do formulário. Após isso, os dados poderão ser acessados no backend do integrador, e é necessário fazer a chamada para a API createTransaction do Gateway de pagamentos enviando os dados necessários para a chamada de pagamentos.