bcash! integracao ligthbox-ecommerce
TRANSCRIPT
2
Conteúdo
1. Introdução ..................................................................................................................... 3
2. Processo ....................................................................................................................... 4
3. Integração com Lojas Virtuais ...................................................................................... 5
4. Compreendendo o LightBox ......................................................................................... 5
5. Exemplo de Codificação - Checkout Bcash e LightBox. ............................................... 6
5.1. Integração com Lojas Virtuais. ................................................................................... 6
5.2. Criando o LightBox. ................................................................................................... 7
6. Contato para Suporte ................................................................................................... 9
3
1. Introdução
Para uma melhor experiência de compra, é possível realizar a integração do Bcash
utilizando um LightBox. O processo continuará o mesmo, porém, o Checkout Bcash será
apresentado dentro do ambiente da loja virtual, tornando o processo mais simples ao
comprador.
Este manual tem como objetivo auxiliar desenvolvedores e plataformas a integrar o
sistema da Bcash, de forma que o checkout seja aberto no próprio ambiente da loja
através de um LightBox.
4
2. Processo
A integração do Bcash com a loja virtual mantém-se a mesma, contudo, utilizando a
integração através de um LightBox, o Checkout Bcash será aberto dentro do ambiente
da loja, tornando o processo de pagamento mais simples e intuitivo ao consumidor.
A utilização do LightBox pode ser realizada da seguinte maneira:
Realizar a Integração com Lojas Virtuais;
Disponibilizar o LightBox na finalização da compra;
Inserir um Frame dentro do LightBox, com a chamada do formulário de integração
com o Checkout Bcash.
Imagem 1 – Checkout Bcash exibido em um LightBox.
5
3. Integração com Lojas Virtuais
A integração com o Bcash pode ser realizada independente da linguagem ou sistema
utilizado pela loja virtual. A comunicação com nosso sistema será realizada através de um
POST enviado pela loja com as informações do pedido.
Esse POST deverá conter os “Campos Obrigatórios” e, para uma melhor experiência de
compra e de venda, sugerimos também o envio dos dados do pedido, do comprador e de
entrega.
Para mais informações sobre a Integração com Lojas Virtuais, segue abaixo link com o
manual de integração:
https://www.bcash.com.br/desenvolvedores/integracao-loja-online.html
4. Compreendendo o LightBox
O LightBox é um script que sobrepõe objetos HTML à página corrente, facilitando a
exibição de imagens, vídeos, banners e formulários, possibilitando uma melhor
visualização ou destaque no objeto HTML.
Existem diversas bibliotecas prontas que já disponibilizam este recurso com facilidade,
segue abaixo 2 bibliotecas que podem ser utilizadas para a criação do LightBox:
Fancybox (Jquery): http://fancyapps.com/fancybox/
Lytebox: http://lytebox.com/
Para a integração é necessário incluir um Frame no LightBox, onde será aberta a página
com o formulário HTML para o envio das informações e exibição do Checkout Bcash.
6
5. Exemplo de Codificação - Checkout Bcash e LightBox.
Para a integração do Checkout Bcash em um LightBox, primeiro é necessário realizar a
integração padrão de nosso sistema, conforme informações disponíveis no item 3 deste
documento.
Após realizar a integração, é necessário incluir o LightBox na tela de finalização de
compra da loja virtual e no mesmo incluir um Frame onde será exibido o Checkout Bcash.
5.1. Integração com Lojas Virtuais.
Para auxiliar no processo de integração, segue abaixo um exemplo de código com os
campos necessários para uma integração completa:
Exemplo 1 – Integração com Lojas Virtuais com informações do comprador e endereço de entrega.
<form name="bcash" action="https://www.bcash.com.br/checkout/pay/" method="post" > <!-- Identificação do vendedor --> <input name="email_loja" type="hidden" value="[email protected]"> <!-- Dados do Pedido / Produtos --> <input name="produto_codigo_1" type="hidden" value="1001"> <input name="produto_descricao_1" type="hidden" value="Camisa Seleção Brasileira"> <input name="produto_qtde_1" type="hidden" value="1"> <input name="produto_valor_1" type="hidden" value="250.00"> <input name="produto_codigo_2" type="hidden" value="1002"> <input name="produto_descricao_2" type="hidden" value="Raquete de Tênis"> <input name="produto_qtde_2" type="hidden" value="2"> <input name="produto_valor_2" type="hidden" value="85.26"> <!-- Dados do Comprador --> <input name="email" type="hidden" value="[email protected]"> <input name="nome" type="hidden" value="Nome do Comprador"> <input name="cpf" type="hidden" value="67882081744"> <input name="telefone" type="hidden" value="1126267469"> <input name="cliente_cnpj" type="hidden" value=""> <input name="cliente_razao_social" type="hidden" value=""> <!-- Dados de Entrega --> <input name="cep" type="hidden" value="17505000"> <input name="endereco" type="hidden" value="Av. Paulista, 1070"> <input name="cidade" type="hidden" value="Sao Paulo"> <input name="estado" type="hidden" value="SP"> <input type="image" src=https://www.bcash.com.br/webroot/img/bt_comprar.gif value="Comprar" alt="Comprar" border="0" align="absbottom" >
</form>
7
5.2. Criando o LightBox.
Existem várias bibliotecas para auxiliar na criação do LightBox, entretanto, poderá criar
seu próprio script. Segue abaixo exemplo para criação:
Exemplo 2 – Criação do LightBox próprio para integração Bcash
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<header> <title>Integração Bcash LightBox</title> <style> #overlay-bcash { background-image: url('overlay.png'); display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 10000000; } #lightbox { background-color: #fff; padding: 10px; width: 980px; margin-top: 50px; } #close_overlay_bcash { position: relative; margin-left: 970px; margin-top: -20px; }
</style> </header> <body onload="document.getElementById('link_payment').click();">
Sua compra está em processo de finalização. <br /> Caso a página de finalização de pagamento não se inicie automaticamente <a id="link_payment" href="#" onclick="document.getElementById('overlay-bcash').style.display = 'block';" data-lyte-options="width:970px height:700px">Clique Aqui</a> <div id="overlay-bcash" style="display: none;" onclick="this.style.display = 'none';"> <center> <div id="lightbox"> <img id="close_overlay_bcash" src="close.png">
<!-- Chamada do Formulário de Integração com Lojas Virtuais pelo Frame (form_bcash.html) --> <iframe style="border:0px" width="970" height="700" name="bcash_frame" src="form_bcash.html"></iframe>
</div> </center> </div>
</body> </html>
8
Utilizando as bibliotecas, esta criação do LightBox é simples, conforme pode-se observar
nos exemplos abaixo:
Exemplo 3 – Criação do LightBox utilizando a biblioteca Lytebox (http://lytebox.com/).
Exemplo 4 – Criação do LightBox utilizando a biblioteca Fancybox (http://fancyapps.com/fancybox/).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<header> <title>Integração Bcash LightBox (Lytebox)</title> <script type="text/javascript" language="javascript" src="lytebox.js"></script> <link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
</header> <body onload="document.getElementById('link_payment').click();">
Sua compra está em processo de finalização. <br /> Caso a página de finalização de pagamento não se inicie automaticamente <!-- Chamada do Formulário de Integração com Lojas Virtuais pelo Frame (form_bcash.html) --> <a id="link_payment" href="form_bcash.html" class="lytebox" data-lyte-options="width:970px height:700px">Clique Aqui</a>
</body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<header> <title>Integração Bcash LightBox (Fancybox)</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script> <link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" />
</header> <body>
Sua compra está em processo de finalização. <br /> Caso a página de finalização de pagamento não se inicie automaticamente <!-- Chamada do Formulário de Integração com Lojas Virtuais pelo Frame (form_bcash.html) --> <a id="link_payment" class="iframe_bcash" data-fancybox-type="iframe" href="form_bcash.html">Clique Aqui</a> <script> $(document).ready(function() { $(".iframe_bcash").fancybox({ fitToView : false, width : 970, height : 700, autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); document.getElementById("link_payment").click(); }); </script>
</body> </html>
9
6. Contato para Suporte
Em caso de dúvidas ou dificuldades durante os procedimentos abordados, estamos à
disposição para auxiliá-lo, nos comunique através de nossos contatos abaixo:
E-mail: [email protected]
Telefone: (11) 2626-7469
Atenciosamente,
Equipe de Integração
www.bcash.com.br www.buscapecompany.com
Esta mensagem e seus anexos podem conter informações confidenciais. Se você não for o destinatário, por favor não copie, repasse, imprima, nem tome
qualquer ação baseada nas informações contidas aqui e, por favor, apague a mensagem permanentemente. Embora nossa empresa tome cuidados para
evitar a presença de vírus neste e-mail, sua segurança não pode ser totalmente garantida, já que as informações podem ser interceptadas, corrompidas
ou mesmo conter vírus. Nem a empresa ou o remetente se responsabilizam pela mensagem ou danos que possam causar. Todas as mensagens
trocadas com nossa empresa são sujeitas a monitoramento. Ajude o meio-ambiente — imprima somente quando necessário.
This email and its attachments may contain confidential information. If you are not the addressee please do not copy, forward, print, act in reliance on it or
any attachments and, please, permanently delete it. Although the company has taken precautions to ensure no viruses are present in this email, its safety
cannot be guaranteed as information could be intercepted, corrupted, or contain viruses. Neither the company nor the sender accepts responsibility for
any loss it may inflict. This email might be monitored. Help the environment — print only when necessary.