Integrar Checkout iPag em página HTML

Integrar Checkout iPag em página HTML

Autor: Lucas de Lacerda

Objetivo: Orientar o leitor sobre os passos para integrar um botão para pagamento em nosso checkout, na página HTML.

Requisitos: 

• Conhecimento básico em HTML.
• Uma página em HTML com código acessível.
• Acesso ao painel iPag em Produção e Sandbox.
• Ao menos uma Adquirente configurada  (BIN, CIELO, GETNET, IPAG/ZOOP, E-REDE, STONE...). 

Atenção: Leia atentamente todos os passos, em caso de dúvidas, encaminhe um e-mail para suporte@ipag.com.br com a sua dúvida para obter orientações.

Os arquivos utilizados estão anexados ao final do artigo.

1 – Acesse o site https://docs.ipag.com.br e clique na guia Checkout iPag.

E copie o código que será inserido NA SUA PÁGINA HTML.

2 – Vamos analisar o código:

• O código é um Form básico, e sua action pode variar entre dois endereços: Produção e Sandbox (ambiente de testes do iPag). Solicite o cadastro caso ainda não tenha e faça testes em Sandbox. Assim que todos os testes estiverem corretos, solicite a url de produção para suporte@ipag.com.br
• O segundo valor obrigatório a ser alterado é o LOGIN_IPAG. Assim que obtiver acesso ao Sandbox, acesse Minha Conta para obter o seu LOGIN_IPAG, lembrando que este é o login utilizado para acessar o painel.
• Este é o valor que será enviado para o checkout no pagamento. Note que este campo está com o tipo “Hidden”, altere-o para o tipo “Text”, e faça os devidos tratamentos (Validação do tipo double, máscaras, somente números. Existem várias formas via javascript para te ajudar nessa parte).
• NOME_PRODUTO é a descrição que aparecerá no checkout. Para doações, por exemplo, um valor válido e recomendado seria “Doação para Instituição X”.
• Neste campo, apenas envie o mesmo valor do item 3.
• Este é um botão PADRÃO que submeterá o form. É possível trocá-lo por qualquer outra opção que cumpra a mesma função, um Button, um input com type “Submit” com css personalizado, etc.

  3- Vamos inserir um código de exemplo em uma página:Nossa página básica será este exemplo: 
 Em nosso códigoCom o código do Checkout do iPag. 

Em nossa página ficará assim:

 

Agora devemos alterar alguns valores.  Vamos manter nossa página em teste, portanto não alteraremos a tag <Form>.

 

Abaixo, o Código do Form comentado com cada campo que deve ser alterado.

 

 

 

CÓDIGOS ADICIONAIS PARA VALIDAÇÃO E MÁSCARA.

 

Em nosso exemplo vamos utilizar o jQuery para mascarar o campo e enviar o formulário. Você pode adicionar as validações que achar necessário.

 

Abaixo, as bibliotecas jQuery importadas (dentro da tag Head). 

 

E o Script que faz a validação.

 

 

 

 

Nossa página deverá ficar assim com o código pronto:

 

 

 

Após estas configurações, ao clicar em Doar você deverá ser redirecionado para a tela de checkout do iPag:

 

 

 

Agora, basta Finalizar o Pedido com um dos métodos de pagamento.

 

Em nosso exemplo vamos finalizar com Cartão de Crédito Visa:

 

 

 

Se a transação aparecer em seu painel do iPag, está tudo correto e você já poderá solicitar ao suporte@ipag.com.br a url de Produção:

 

 

Após o pagamento:

 

Transação no Painel do iPag.

Glossário:

-Checkout: É a tela onde são efetuados os pagamentos, onde é selecionado o método de pagamento e dos dados para pagamento. 

-HTML: É uma das linguagens que utilizamos para desenvolver websites. O acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em português Linguagem de Marcação de Hipertexto. O HTML é a liguagem base da internet.

-Sandbox: Do inglês "Caixa de Areia", é um ambiente para efetuar testes. Ele imita o ambiente padrão, porém permite ao cliente efetuar transações e experienciar o funcionamento sem necessidade de se preocupar com transações efetivas.

-URL: É um endereço virtual com um caminho que indica onde está o que o usuário procura, e pode ser tanto um arquivo, como uma máquina, uma página, um site, uma pasta etc. Url também pode ser o link ou endereço de um site.

-Css: O Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet que adotam para o seu desenvolvimento linguagens de marcação (como XML, HTML e XHTML)

-Tag: São estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página. Há uma tendência nos dias atuais para se usar as tags apenas como delimitadores de estilo e/ou conteúdo, tanto em HTML quanto em XML

-Jquery: É uma biblioteca de funções JavaScript que interage com o HTML, desenvolvida para simplificar os scripts interpretados no navegador do cliente. 

-Script: Conjunto de instruções para que uma função seja executada em determinado aplicativo.
 

Dúvidas ou Sugestões? Envie um e-mail para suporte@ipag.com.br