Bcash! Integracao Ligthbox-Ecommerce

727 visualizações

Publicada em

Publicada em: Aperfeiçoamento pessoal
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
727
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Bcash! Integracao Ligthbox-Ecommerce

  1. 1. 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
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. 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="sualoja@sualoja.com.br"> <!-- 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.comprador@dominio.com.br"> <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>
  6. 6. 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>
  7. 7. 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>
  8. 8. 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: integracao@bcash.com.br 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.

×