Login

Seleção do país

Seleçnao do país


Personalize sua integração Bcash utilizando o Lightbox

Compreendendo o Lightbox

O Lightbox é um script que sobrepõe objetos HTML à pagina corrente, facilitando a exibição de imagens, vídeos, banners e formulários, possibilitando uma visualização ou destaque no objeto HTML.

Existem diversas bibliotecas prontas que disponibilizam este recurso com facilidade. Exemplos:

  • 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 do Bcash.

               Atenção: Lembrando que para a integração do Checkout Bcash em um Lightbox, primeiramente é necessário realizar a integração do Bcash em sua loja virtual seguindo as orientações do item “Integrando o Bcash em sua loja virtual” da tela de documentação.

Como funciona:

1º – Siga as orientações passadas no item “Integrando o Bcash em sua loja virtual”;

2º – A loja deverá disponibilizar o Lightbox na finalização da compra;

3º – Inserir um frame dentro do Lightbox, com a chamada para o formulário de integração com o checkout do Bcash.

bcash-lightbox

Exemplo de como criar seu próprio Lightbox

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
<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=&quot;document.getElementById('link_payment').click();&quot;>
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=&quot;link_payment&quot; href=&quot;#&quot; onclick=&quot;document.getElementById('overlay-bcash').style.display = 'block';&quot; data-lyte-options=&quot;width:970px height:700px&quot;>Clique Aqui</a>
<div id=&quot;overlay-bcash&quot; style=&quot;display: none;&quot; onclick=&quot;this.style.display = 'none';&quot;>
<center>
<div id=&quot;lightbox&quot;>
<img id=&quot;close_overlay_bcash&quot; src=&quot;close.png&quot;>
<!-- Chamada do Formulário de Integração com Lojas Virtuais pelo Frame (form_bcash.html) -->
<iframe style=&quot;border:0px&quot; width=&quot;970&quot; height=&quot;700&quot; name=&quot;bcash_frame&quot; src=&quot;form_bcash.html&quot;></iframe>
</div>
</center>
</div>
</body>
</html>

Exemplo de como criar o Lightbox com a biblioteca Lytebox:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
<html>
<header>
<title>Integração Bcash LightBox (Lytebox)</title>
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;lytebox.js&quot;></script>
<link rel=&quot;stylesheet&quot; href=&quot;lytebox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />
</header>
<body onload=&quot;document.getElementById('link_payment').click();&quot;>
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=&quot;link_payment&quot; href=&quot;form_bcash.html&quot; class=&quot;lytebox&quot; data-lyte-options=&quot;width:970px _height:700px&quot;>Clique Aqui</a>
</body>
</html>

Exemplo de como criar o Lightbox com a biblioteca Fancybox:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;>
<html>
<header>
<title>Integração Bcash LightBox (Fancybox)</title>
<script type=&quot;text/javascript&quot; src=&quot;jquery-1.8.2.min.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;jquery.fancybox.pack.js&quot;></script>
<link rel=&quot;stylesheet&quot; href=&quot;jquery.fancybox.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />
</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=&quot;link_payment&quot; class=&quot;iframe_bcash&quot; data-fancybox-type=&quot;iframe&quot; href=&quot;form_bcash.html&quot;>Clique Aqui</a>
<script>
$(document).ready(function() {
$(&quot;.iframe_bcash&quot;).fancybox({
fitToView : false,
width : 970,
height : 700,
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
document.getElementById(&quot;link_payment&quot;).click();
});
</script>
</body>
</html>