Botão de Pagamentos
A integração rápida, robusta e segura
Através dos botões de pagamento da IOPAY você pode integrar o seu website ou loja em minutos, através de um código HTML simples que deve ser inserido na sua página.
O botão de pagamentos da IO permite que você obtenha uma integração simples, rápida e segura. A página de pagamento customizada com o seu logo será aberta de forma segura e automática dentro do seu site, garantindo maior conversão das vendas.
Todas as nossas integrações estão em conformidade com as entidades reguladoras de meios de pagamento e seguem o mais alto grau de segurança desse mercado.
Através do botão de pagamento da IOPAY você será capaz de receber pagamentos nas seguintes modalidades:
O guia abaixo lhe orientará sobre aspectos importantes e como integrar o botão de pagamento IOPAY em seu projeto.
Setup
Para utilizar o botão de pagamento da IOPAY você deve:
Possuir uma conta de vendedor na IOPAY (saiba como obter).
Habilitar a sua conta para recebimento por botões de pagamento (entre em contato com integracao@iopay.com.br). Você receberá informações extras como o io_seller_id.
Inserir o
<form>
abaixo em seu HTML
Código do Botão de Pagamento
Após seguir as orientações da seção 'Setup' acima, copie e cole o código abaixo na sua página.
O código abaixo é responsável por renderizar o botão de pagamentos vinculando ele à sua conta de vendedor na IOPAY
Repare que a única mudança para diferenciar o ambiente de produção e testes (sandbox) é o prefixo da URI utilizada: sandbox.checkout.iopay.dev [testes]
checkout.iopay.dev [produção]
Você pode utilizar um botão com estilos CSS personalizados, contudo lembre-se de inseri-lo dentro do form e adicionar o atributo onclick="iopay()"
, conforme demonstrado ac
Parâmetros
Abaixo relação de parâmetros esperados pelo formulário. Cada pagamento pode conter um ou mais itens, que representam produtos ou serviços que estão sendo vendidos.
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Esse parâmetro especifica qual o tipo de integração em uso. Valor aceito para botão de pagamentos: | Sim |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Identifica a conta de vendedor cadastrada na IOPAY. Este parâmetro deve ser do tipo email, exemplo: | Sim |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Neste parâmetro você pode informar o identificador único do pedido da sua loja, como por exemplo o ID do pedido atual. Este campo pode conter uma cadeia de até 64 caracteres. Exemplo de reference_id: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este parâmetro é utilizado para informar os nomes dos itens que estão sendo vendidos.
Para adicionar mais de um item, basta inserir mais um parâmetro | Sim |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar o identificador único desse produto ou serviço na sua loja ou site, conforme o exemplo abaixo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Parâmetro utilizado para informar o preço individual de cada produto ou serviço comercializado,
Este parâmetro aceita valores numéricos do tipo float. Dessa forma, para informar o valor de R$199,00 deve-se informar | Sim |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Parâmetro utilizado para informar a quantidade de cada produto comercializado. Apenas números inteiros são aceitos. O exemplo abaixo indica que o cliente está adquirindo 3 Produto 1 e 1 Produto 2. | Sim |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Esse parâmetro é utilizado para informar o peso individual de determinado produto. O valor desse parâmetro é baseado no tipo numérico float representado em Kg, ou seja, para informar 200g, use: 0.2 | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Define a moeda utilizada nessa venda. Até o momento o único valor aceito pela IO para esse parâmetro é | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este campo é opcional e representa o primeiro nome do cliente que iniciou a compra. Você pode usá-lo para enviar o nome do cliente, evitando assim que o cliente precise preencher novamente ao acessar o formulário de pagamento | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este campo é opcional e representa o último nome/sobrenome do cliente que iniciou a compra. Ao usar esse parâmetro na sua integração você melhor a experiência de compra do seu cliente, evitando assim que o cliente precise preencher novamente ao acessar o formulário de pagamento | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este campo é opcional e representa o CPF do cliente que iniciou a compra.
Ao usar esse parâmetro na sua integração você melhora a experiência de compra do seu cliente, evitando assim que o cliente precise preencher novamente ao acessar o formulário de pagamento
Este parâmetro permite que você envie o CPF com pontos e traços, conforme o padrão: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este parâmetro é utilizado para informar o número de telefone com DDD do seu cliente.
Ao usar esse parâmetro na sua integração você melhor a experiência de compra do seu cliente, evitando assim que o cliente precise preencher novamente ao acessar o formulário de pagamento
Este parâmetro permite que você envie o DDD entre parêntesis, conforme o padrão: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar a primeira linha do endereço do cliente. Exemplo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar o número do endereço do seu cliente. Exemplo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar o complemento do endereço do seu cliente. Exemplo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar a cidade à partir do endereço do seu cliente. Exemplo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar a unidade federativa/estado a partir do endereço do seu cliente.
Ao usar esse parâmetro na sua integração você melhor a experiência de compra do seu cliente, evitando assim que o cliente precise preencher novamente ao acessar o formulário de pagamento
Esse parâmetro deve ser composto pela sigla do estado com 2 letras. Exemplo: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Utilize esse parâmetro para informar o país de origem do seu cliente.
Atualmente o único valor aceito para esse parâmetro pela IOPAY é | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Se informado, esse parâmetro é utilizado para fornecer o endereço completo no formulário de pagamento, evitando assim que o seu cliente precise preencher todos os campos
O formato para esse valor deve ser | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Parâmetro utilizado para informar o e-mail do cliente comprador. Ao integrar e enviar esse parâmetro (opcional), você melhora a experiência de compra do seu cliente, pois o valor desse campo virá preenchido no formulário de pagamento.
O formato de dados aceito segue o padrão e-mail, por exemplo | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este parâmetro, se usado, informa a descrição da compra na fatura do cliente.
Você pode usá-lo para facilitar a identificação pelo seu cliente da compra efetuada na fatura do cartão.
Exemplo de uso: | Não |
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Este parâmetro define a URL da sua loja, que será usada para redirecionar o seu cliente após sucesso na geração do pagamento
Exemplo de uso: A URL receberá parâmetros GET informando o ID da Transação (transaction_id) e o Status (status), o usuário será redirecionado ao Fechar a tela de pagamento. Exemplo: https://site.com/transaction_result?transaction_id=xx&status=pending ATENÇÃO: Não utilize essa rota para confirmar o pagamento na sua base de dados. Para confirmação utilize o serviço de WebHooks da IOPAY. | Não |
Possíveis 'status' retornados na URL:
pending : pendente, comum para pagamentos por boleto
succeeded : pago com sucesso
pre_authorized : apenas pré-autorizado, ainda estão em análise antifraude
PARÂMETRO | DESCRIÇÃO | OBRIGATÓRIO |
| Parâmetro obrigatório, utilizado para informar o montante total dessa venda através de um tipo numérico float.
Por exemplo, se a somatória de preços dos produtos + custo de frete para envio é de R$485,70, deve-se utilizar | Sim |
Antifraude
Para prevenir ações suspeitas de fraude, insira o script de monitoramento do comportamento do usuário no rodapé do seu site.
Ao inserir esse trecho de código estaremos monitorando o comportamento do usuário em seu site; É altamente recomendável que este script seja carregado globalmente (em todo site).
Não se preocupe com o desempenho da sua página
Este será o ultimo script a ser carregado em sua página, sem afetar a performance e experiência do usuário; Para que isso ocorra, recomendamos que este script seja inserido, globalmente, antes do fechamento da tag </body> ou </footer> no corpo do site.
Não faça nenhuma alteração na estrutura deste script
Este script foi cuidadosamente desenvolvido para monitorar as ações do usuário, e lhe proteger de possíveis fraudes, sem afetar o desempenho do seu site. Não altere a estrutura do script, apenas atribua os valores necessários para configura-lo (Vide o tópico abaixo "Configure o script de monitoramento")
Configure o script de monitoramento
As informações solicitadas para configuração do script de monitoramento podem ser obtidas na sua Conta Digital em: Conta Digital > Pagamentos Online
LINHA SCRIPT | PROPRIEDADE | TIPO | DESCRIÇÃO |
3 | window.iopayAntifraudPublicKey | string | Conta Digital > Pagamentos Online > Chave Pública Antifraude Sua Chave Pública para utilização do sistema antifraude; |
4 | window.iopaySecurityPlan | string | Conta Digital > Pagamentos Online > Plano Antifraude Seu plano antifraude contratado junto a IOPAY:
|
Verifique com atenção a configuração do script
window.iopaySecurityPlan: apenas os valores exibidos na descrição são permitidos; Certifique-se de que o tipo do plano foi indicado corretamente para que o script de monitoramento funcione.
Notificações & WebHooks
Webhooks (também conhecidos como HTTP Callbacks) são uma forma de se registrar para receber informações úteis em uma URL específica de sua escolha. Quando ocorre uma alteração no estado de um recurso dentro das plataformas da IOPAY (por exemplo, uma transação é aprovada com sucesso), um evento é gerado por essa ocorrência e enviado para os webhooks cadastrados.
Para utilizar a notificação de eventos você precisa: - Implementar o seu sistema de recebimento de notificações - Cadastrar as URLs desse sistema na IOPAY, através da sua conta digital IO. - Quando ocorrer uma ação ou atualização de status nas transações enviadas para a IO, as notificações serão disparadas de acordo com os webhooks cadastrados
Beta Caso não encontre essa opção em sua conta digital IO, envie uma solicitação de ativação desse recurso para integracao@iopay.com.br
Customização e Cores
Com o botão de pagamentos IOPAY você pode customizar as cores e logotipo da página checkout.
Você pode definir a cor primária e secundária em hexadecimal. Essas duas cores são usadas para compor o layout do checkout que será aberto após o clique no botão de pagamentos.
Para definir as cores do seu checkout, informe o código hexadecimal (com #) nos seguintes input hiddens.
Se esses parâmetros não forem configurados no seu form, o checkout atribuirá automaticamente as cores padrão da página de checkout, conforme imagem abaixo
Customização de Logotipo
Com o checkout e botão de pagamento IOPAY você pode facilmente adicionar o logotipo da sua empresa.
Dessa forma você aumenta a conversão de vendas do seu site ou loja virtual, ao customizar com a mesma marca e cores da sua loja virtual.
Para inserir o logotipo, faça login na sua conta digital IOPAY e clique em 'Configurações' > 'Pagamentos Online' para especificar a URL da imagem, como ilustrado abaixo:
Padrão de imagens aceitas
Width: 171px
Max Height: 72px
Formatos: png, jpg ou svg
Last updated