Iniciar: pagamento simples

3 etapas são necessárias para integrar um formulário de pagamento no site do Estabelecimento Comercial:

  • A inicialização do formulário embutido
  • A exibição do formulário embutido
  • A verificação do status da transação no final do pagamento.

O layout seguinte apresenta as interações entre as diferentes partes (formulário embutido, servidor do Estabelecimento Comercial, plataforma de pagamento) para cada uma destas etapas:

1. Inicializar o formulário

Antes de exibir um novo formulário de pagamento no site de e-commerce, você deve inicializar o formulário gerando um token de formulário (ou formToken) que vai sintetizar todas as opções relacionadas ao pagamento.

Para criar un formToken, é preciso chamar o Web Service REST Charge/CreatePayment a partir do seu servidor:

Etapa Descrição
1 Chamada do Web Service REST Charge/CreatePayment nos servidores do vendedor.
2 Recebimento do resultado que contém o formToken.

2. Exibir o formulário

Para exibir um formulário de pagamento, você deve incluir nossa biblioteca JavaScript na página de pagamento do site de e-commerce. O formToken deverá ser adicionado ao código de integração. Será usado pela biblioteca JavaScript para exibir o formulário a partir do formToken definido na etapa anterior:

Etapa Descrição
3 Download da biblioteca JavaScript. Solicitação realizada no navegador do comprador.
4 Recuperação do JavaScript, e exibição da página contendo o formulário de pagamento.

Para um site usando um framework Javascript (Angular, React, Vue.js, …), a abordagem é um pouco diferente: ver checkout em uma página ou SPC (Single Page Checkout )

Depois de exibir o formulário, o comprador pode acessar seus dados bancários. Se o pagamento for recusado, o comprador permanecerá no site do vendedor. Se o pagamento for aceito, as informações da transação serão enviadas para o servidor do vendedor.

3. Verificar o status da transação

Quando a transação é aceita ou o número máximo de tentativas é atingido, o cliente JavaScript faz um POST do formulário de pagamento. Ele se comporta exatamente como um formulário HTML clássico. Você recupera as informações de pagamento nas configurações do POST enviadas ao seu servidor.

Etapa Descrição
5 O comprador clicou no botão “pagar”: apresentação do formulário a partir do navegador do comprador para nossos servidores. Esta chamada é realizada automaticamente pelo nosso cliente JavaScript.
6 Uma vez que a transação foi tratada, chamamos a partir de nossos servidores uma URL que você determinou. O objeto Transaction completo será enviado para que você possa atualizar seu sistema de informação antes da volta ao navegador. É o IPN (Instant Payment Notification).
7 Nossos servidores enviam novamente o resultado do pagamento para o cliente JavaScript.
8 O cliente JavaScript POSTa o formulário de pagamento nos seus servidores.

Para os sites dinâmicos (que utilizam AngularJS, React ou Vue.js), também é possível recuperar as informações de pagamento em JavaScript: Aplicativo de página única da Web

Processar a IPN permite atualizar seu sistema de informações de uma maneira mais segura, além de garantir que você não perca nenhum pagamento caso o comprador perca a conexão com a Internet. Para mais informações, consulte o artigo sobre IPN: IPN: Apresentação

Vamos lá!

Após essa introdução teórica, vamos falar sobre a prática: Criar um formToken