Exibir a página de pagamento em um iframe

Para maiores detalhes, consulte nosso guia de integração das páginas de pagamento em uma iframe disponível em nosso site de documentos e suporte.

  1. Criar um tag HTML <iframe> na página onde você deseja exibir o formulário a preencher (esta página deveria corresponder à etapa “Pagamento” do seu caminho de compra):
    ...
    <body>
          <iframe id="idFrame" name="nameFrame" src="https://www.mystore.com/payment/form.php"  />
    </body>
    </html>

    Valorize o atributo src com a URL do seu formulário de pagamento.

    IMPORTANTE
    Para uma exibição correta das páginas 3D-Secure, aconselhamos escolher um tamanho mínimo de 400px * 400px.
    Exemplo de página de pagamento integrada:
    Exemplo de página 3D Secure integrada:
  2. Modificar seu formulário de pagamento:
    • Valorize o parâmetro vads_action_mode a IFRAME para ativar o modo iframe e obter uma exibição simples e clara da página de pagamento,
    • Adicione o atributo target a seu tag <form> e digite nele o nome do seu iframe,
    • Em modo iframe, o comprador não pode consultar ou baixar o ticket de pagamento. Este último deve ser enviado por e-mail ao comprador. O parâmetro vads_cust_email torna-se então imprescindível,
    • use o campo vads_iframe_options se você desejar personalizar a cor de fundo e a fonte dos campos de entrada.
      vads_iframe_options = {"fieldsBackgroundColor":"#000000","fieldsFontColor":"#FFFFFF"}
    ...
    <form method="POST" action="" target="nameFrame" >
          <input type="hidden" name="vads_action_mode" value="IFRAME" />
          ...
    ...
  3. Gerir o fim do pagamento.

    Em modo iframe, não há botão para cancelar ou para voltar para a loja. Porém, você pode redirecionar automaticamente o comprador para sua página de confirmação de pedido.

    Para isso, valorize os parâmetros abaixo no seu formulário de pagamento:
    • vads_redirect_success_timeout e vads_redirect_error_timeout a "0",
    • vads_url_success com a URL da sua página de confirmação de pedido,
    • vads_url_return com a URL da sua página de retorno em caso de pagamento recusado,
    • vads_return_mode com o valor "POST" ou "GET" para resgatar o resultado do pagamento e exibí-lo na sua página de confirmação de pedido se for necessário,
    • vads_theme_config com o valor "FORM_TARGET=_top" para definir como será exibida a página de retorno.
      Você pode também usar os valores seguintes conforme suas necessidades: "_self", "_parent", "_framename".
Exemplo de página de confirmação exibindo os dados do pagamento