{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"Utilizando Lightbox","type":"basic","slug":"checkout-lightbox","excerpt":"Você está em: *\"Checkout via Lightbox > Utilizando Lightbox\"*","body":"A integração com o Lightbox da Gerencianet lhe permite exibir o formulário de coleta das informações de pagamento sobreposta à sua página de checkout. Por exemplo, quando o cliente adiciona os produtos no carrinho e fecha o pedido, apenas esmaecemos o fundo do seu site e o comprador visualiza uma nova janela modal para preenchimento dos dados de pagamento.\n\nApesar de ser um facilitador, o Lightbox requer que a integração no backend seja realizada normalmente.\n\n## Adicionando o Lightbox em sua página\n\nPrimeiramente, será necessário adicionar um script em sua página que disponibiliza as funções necessárias à construção e funcionamento do Lightbox.\n[block:html]\n{\n \"html\": \"<p>Para gerar o código Javascript específico de sua conta Gerencianet, insira no campo abaixo o seu \\\"Identificador de Conta\\\" (<a target=\\\"blank\\\" href=\\\"https://cdn.discordapp.com/attachments/652136190006525955/809138574549188618/identificador-conta.jpg\\\" class=\\\"block-display-image-parent block-display-image-size-smart\\\"><img>onde localizo?</img></a>) e clique no botão \\\"Gerar\\\". Cabe frisar que é preciso estar logado em sua conta Gerencianet para visualizar o identificador de sua conta.</p>\\n\\n<input id=\\\"input_code_ck\\\" type=\\\"text\\\" > <button id=\\\"get_code_ck\\\">Gerar</button> \\n<div id=\\\"resultado_code_js_ck\\\"></div>\"\n}\n[/block]\nApós a inserção do script, as seguintes funções ficarão disponíveis:\n\n- <code>ready()</code>\n- <code>lightbox()</code>\n- <code>show()</code>\n\n\n### Inicialização do Lightbox\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Parâmetros\",\n \"h-1\": \"Tipo\",\n \"h-2\": \"Descrição\",\n \"0-0\": \"callback<span class=\\\"obrigatorio\\\">*</span>\",\n \"0-1\": \"Function\",\n \"0-2\": \"Função de inicialização que possibilita a chamada das demais funções.\\n\\n<span class=\\\"tab1\\\"><em>Parâmetro(s) de callback</em><div>\\n\\n<div class=\\\"tab2\\\"><code>object <span class=\\\"obrigatorio\\\">*</span></code></span>, Objeto que recebe as instâncias das outras funções.</div>\"\n },\n \"cols\": 3,\n \"rows\": 1\n}\n[/block]\n<strong class=\"atributo-obrigatorio-texto\">* valor obrigatório</strong>\n\n\n### Métodos de pagamentos disponíveis\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Parâmetros\",\n \"h-1\": \"Tipo\",\n \"h-2\": \"Descrição\",\n \"0-0\": \"available_payment_forms<span class=\\\"obrigatorio\\\">*</span>\",\n \"0-1\": \"Array\",\n \"0-2\": \"Array com a(s) forma(s) de pagamento que o Lightbox contemplará.\\n\\nAs opções disponíveis são:\\n- banking_billet (boleto bancário);\\n- credit_card (cartão de crédito).\\n- pix (pix).\"\n },\n \"cols\": 3,\n \"rows\": 1\n}\n[/block]\n<strong class=\"atributo-obrigatorio-texto\">* valor obrigatório</strong>\n\n\n### Exibição do Lightbox\n[block:parameters]\n{\n \"data\": {\n \"h-0\": \"Parâmetros\",\n \"0-0\": \"data<strong class=\\\"atributo-obrigatorio\\\">*</strong>\",\n \"h-1\": \"Tipo\",\n \"h-2\": \"Descrição\",\n \"0-1\": \"Object\",\n \"0-2\": \"Objeto com as informações essências para a construção do Lightbox. Os atributos são:\\n\\n<div class=\\\"tab2\\\"><code>items<span class=\\\"obrigatorio\\\">*</span></code>, Array com os items que serão adquiridos pelo cliente. Cada instância deste array será um objeto que deverá ter, obrigatoriamente, name e value (<strong class=\\\"atributo\\\">valor inteiro, ex.: R$ 123,00 = 12300</strong>). As instâncias também poderão ter amount, cujo valor padrão é 1.</div>\\n\\n<div class=\\\"tab2\\\">\\n<code>actionForm<span class=\\\"obrigatorio\\\">*</span></code>, URL do backend para onde serão enviadas as informações coletadas do cliente.</div>\\n\\n<div class=\\\"tab2\\\"><code>shippingCosts</code>, Valor do frete, em inteiro. (<strong class=\\\"atributo\\\">R$ 50,00 = 5000</strong>)</div>\\n\\n<div class=\\\"tab2\\\"><code>customer</code>, Boolean que indica se deverá solicitar os dados do cliente (true) ou não (false). O valor padrão é true.</div>\\n\\n<div class=\\\"tab2\\\"> <code>shippingAddress</code>, Boolean que indica se deverá solicitar os dados de endereço de entrega (true) ou não (false). O valor padrão é true.</strong>\"\n },\n \"cols\": 3,\n \"rows\": 1\n}\n[/block]\n<strong class=\"atributo-obrigatorio-texto\">* valor obrigatório</strong>\n\n## Realizando a integração\n\nO Lightbox funciona como uma tela de pagamento para seu site ou aplicação. Quando o comprador preencher os campos, escolher a forma de pagamento e finalizar no Lightbox, um POST será enviado para a URL do back-end informada no parâmetro <code>actionForm</code>, contendo os dados para a emissão da cobrança.\n\nRecebendo em seu back-end as informações de pagamento vindos do Lightbox, deverá ser implementada a integração com a API da Gerencianet e realizar a requisição para registro da transação, podendo ser utilizada uma de nossas [SDKs disponíveis](https://dev.gerencianet.com.br/docs/instalacao-da-api). Sendo necessário o integrador desenvolver também a solução de retorno das notificações, utilizando da funcionalidade de callback para boleto e cartão, e o webhook para Pix.\n<br />\n## Exemplo\nTendo o script com Identificador de Conta adicionado, ele irá preparar a pagina para a execução do Lightbox, sendo necessário a função <code>ready((obj) => {})</code> para inicialização.\nPara ser aberto o modal do Lightbox através do click em um botão, este botão deverá conter o atributo obrigatório <code>rel=\"gn_lightbox\"</code> que irá executar a função <code>show(data)</code>.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"<!DOCTYPE html>\\n <head>\\n <script type='text/javascript'>\\n var identificadorConta = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\\n var s = document.createElement('script');\\n s.type = 'text/javascript';\\n var v = parseInt(Math.random() * 1000000);\\n s.src = 'https://api.gerencianet.com.br/v1/cdn/lightbox/' + identificadorConta + '/' + v;\\n s.async = false;\\n s.id = identificadorConta;\\n if (!document.getElementById(identificadorConta)) {\\n document.getElementsByTagName('head')[0].appendChild(s);\\n };\\n $gn = {\\n validForm: true,\\n processed: false,\\n done: {},\\n ready: function (fn) {\\n $gn.done = fn;\\n }\\n };\\n\\t\\t</script>\\n \\n <script>\\n $gn.ready(function(obj){\\n \\n var payment_forms = [\\\"credit_card\\\", \\\"banking_billet\\\",\\\"pix\\\"];\\n \\t\\t\\tobj.lightbox(payment_forms);\\n \\n obj.jq('#button_lightbox').click(function(evt) {\\n \\n var data = {\\n items: [\\n {\\n name: 'Item 1', // nome do item, produto ou serviço\\n value: 12000 // valor (12000 = R$ 120,00) (Obs: É possível a criação de itens com valores negativos. Porém, o valor total da fatura deve ser superior ao valor mínimo para geração de transações.)\\n },\\n {\\n name: 'Item 2', // nome do item, produto ou serviço\\n value: 4000, // valor (4000 = R$ 40,00)\\n amount: 1 // quantidade\\n }\\n ],\\n shippingCosts: 3560,\\n actionForm: 'http://your_domain/your_backend_url'\\n };\\n \\n obj.show(data);\\n \\n });\\n \\n });\\n </script>\\n </head>\\n \\n <body>\\n <button rel=\\\"gn_lightbox\\\" id='button_lightbox'>\\n Abrir Lightbox\\n </button>\\n </body>\\n</html>\",\n \"language\": \"html\",\n \"name\": \"Front-end\"\n },\n {\n \"code\": \"<?php\\n\\n/**\\n * Iniciação da SDK\\n */\\nrequire_once __DIR__ . '/vendor/autoload.php';\\n\\nuse Gerencianet\\\\Exception\\\\GerencianetException;\\nuse Gerencianet\\\\Gerencianet;\\n\\n\\n/**\\n * Definição das credenciais\\n */\\n$options = [\\n \\\"client_id\\\" => \\\"Client_Id_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx\\\",\\n \\\"client_secret\\\" => \\\"Client_Secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx\\\",\\n \\\"pix_cert\\\" => \\\"./certs/developmentCertificate.pem\\\",\\n \\\"sandbox\\\" => true,\\n \\\"debug\\\" => false,\\n \\\"timeout\\\" => 30\\n];\\n\\n$expirationTime = 5; // (int) quantidade de dias para vencimento do Boleto e Pix\\n\\n$pixKey = \\\"xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx\\\";\\n\\n\\n/**\\n * Recebendo dados do pedido enviados pelo Lightbox\\n */\\n$postItems = isset($_POST['items']) ? $_POST['items'] : null;\\n$postShipping = isset($_POST['shippingCosts']) ? $_POST['shippingCosts'] : null;\\n$postCustomer = isset($_POST['customer']) ? $_POST['customer'] : null;\\n$postShippingAddress = isset($_POST['shippingAddress']) ? $_POST['shippingAddress'] : null;\\n$postPayment = isset($_POST['payment']) ? $_POST['payment'] : null;\\n\\n$json = file_get_contents(\\\"./db/products.json\\\");\\n$products = json_decode($json);\\n$totalValue = 0;\\n\\nforeach ($postItems as $item) {\\n $i = null;\\n $i = [\\n 'name' => $item['name'],\\n 'amount' => (int)$item['amount']\\n ];\\n\\n // Observe que você deve obter os valores do produto da sessão/banco de dados.\\n // O exemplo fornecido abaixo é apenas para fins ilustrativos\\n foreach ($products as $product) {\\n if ($product->code == $item['code']) {\\n $i['value'] = $product->price * 100;\\n $totalValue += $i['value'];\\n break;\\n }\\n }\\n $items[] = $i;\\n}\\n\\n\\ntry {\\n\\n /**\\n * Método de pagamento Pix\\n */\\n if ($postPayment['method'] == 'pix') {\\n\\n $body = [\\n \\\"calendario\\\" => [\\n \\\"expiracao\\\" => ((int)$expirationTime * 86400) // Expiração definida em segundos\\n ],\\n \\\"valor\\\" => [\\n \\\"original\\\" => number_format(strval(($totalValue + (int)$postShipping) / 100), 2, '.', '')\\n ],\\n \\\"chave\\\" => $pixKey, // Chave pix da conta Gerencianet do recebedor\\n \\\"infoAdicionais\\\" => [\\n [\\n \\\"nome\\\" => \\\"Produtos\\\",\\n \\\"valor\\\" => \\\"Valor total: \\\" . number_format(($totalValue / 100), 2, ',', '.')\\n ],\\n [\\n \\\"nome\\\" => \\\"Frete\\\",\\n \\\"valor\\\" => \\\"Valor: \\\" . number_format(((int)$postShipping / 100), 2, ',', '.')\\n ]\\n ]\\n ];\\n\\n if ($postCustomer['person'] === 'juridical') {\\n $body['devedor'] = [\\n 'nome' => $postCustomer['corporate_name'],\\n 'cnpj' => $postCustomer['cnpj']\\n ];\\n } else {\\n $body['devedor'] = [\\n 'nome' => $postCustomer['name'],\\n 'cpf' => $postCustomer['cpf']\\n ];\\n }\\n\\n $api = Gerencianet::getInstance($options);\\n\\n // Gera a cobrança Pix\\n $pix = $api->pixCreateImmediateCharge([], $body);\\n\\n // Verifica a resposta recebida\\n if ($pix['txid']) {\\n\\n $params = [\\n 'id' => $pix['loc']['id']\\n ];\\n\\n // Obtém o QRCode da cobrança gerada\\n $qrcode = $api->pixGenerateQRCode($params);\\n\\n $returnPix = [\\n \\\"code\\\" => 200,\\n \\\"data\\\" => [\\n \\\"pix\\\" => $pix,\\n \\\"qrcode\\\" => $qrcode\\n ]\\n ];\\n\\n echo json_encode($returnPix);\\n } else {\\n echo json_encode($pix);\\n }\\n } // #Método de pagamento Pix\\n\\n /**\\n * Método de pagamento Boleto ou Cartão\\n */\\n else {\\n $shippings[] = [\\n 'name' => 'Frete',\\n 'value' => (int)$postShipping\\n ];\\n\\n $customer = [\\n 'name' => $postCustomer['name'],\\n 'email' => $postCustomer['email'],\\n 'cpf' => $postCustomer['cpf'],\\n 'birth' => $postCustomer['birth'],\\n 'phone_number' => $postCustomer['phone']\\n ];\\n\\n if ($postCustomer['person'] === 'juridical') {\\n $customer['juridical_person'] = [\\n 'corporate_name' => $postCustomer['corporate_name'],\\n 'cnpj' => $postCustomer['cnpj']\\n ];\\n }\\n\\n if ($postShippingAddress) {\\n $shippingAddress = [\\n 'street' => $postShippingAddress['street'],\\n 'number' => $postShippingAddress['number'],\\n 'neighborhood' => $postShippingAddress['neighborhood'],\\n 'city' => $postShippingAddress['city'],\\n 'state' => $postShippingAddress['state'],\\n 'zipcode' => $postShippingAddress['zipcode']\\n ];\\n\\n if (isset($postShippingAddress['complement']))\\n $shippingAddress['complement'] = $postShippingAddress['complement'];\\n\\n $customer['address'] = $shippingAddress;\\n }\\n\\n /**\\n * Método de pagamento Cartão de Crédito\\n */\\n if ($postPayment['method'] == 'credit_card') {\\n $billingAddress = [\\n 'street' => $postPayment['address']['street'],\\n 'number' => $postPayment['address']['number'],\\n 'neighborhood' => $postPayment['address']['neighborhood'],\\n 'city' => $postPayment['address']['city'],\\n 'state' => $postPayment['address']['state'],\\n 'zipcode' => $postPayment['address']['zipcode']\\n ];\\n\\n if (isset($postPayment['address']['complement']))\\n $shippingAddress['complement'] = $postPayment['address']['complement'];\\n\\n\\n $payment['credit_card'] = [\\n 'installments' => (int)$postPayment['installments'],\\n 'billing_address' => $billingAddress,\\n 'payment_token' => $postPayment['payment_token'],\\n 'customer' => $customer\\n ];\\n }\\n /**\\n * Método de pagamento Boleto/Bolix\\n */\\n else {\\n $expire = new DateTime();\\n $expire = date_add($expire, date_interval_create_from_date_string(\\\"$expirationTime days\\\"));\\n\\n $payment['banking_billet'] = [\\n 'expire_at' => $expire->format('Y-m-d'),\\n 'customer' => $customer\\n ];\\n }\\n\\n $chargeBody = [\\n 'items' => (array)$items,\\n 'shippings' => (array)$shippings,\\n 'payment' => (array)$payment\\n ];\\n\\n unset($options['pix_cert']);\\n $apiGN = new Gerencianet($options);\\n\\n $returnCharge = $apiGN->oneStep([], $chargeBody);\\n\\n echo json_encode($returnCharge);\\n } // #Método de pagamento Boleto ou Cartão\\n} catch (GerencianetException $e) {\\n $err = [\\n 'code' => $s->code,\\n 'error' => $e->error,\\n 'error_description' => $e->errorDescription\\n ];\\n echo json_encode($err);\\n} catch (Exception $ex) {\\n $err = [\\n 'error' => $ex->getMessage()\\n ];\\n echo json_encode($err);\\n}\",\n \"language\": \"php\",\n \"name\": \"Back-end\"\n }\n ]\n}\n[/block]\nCom estas implementações, o Lightbox já poderá ser aberto em sua página, porém ainda será necessário realizar a integração no backend para que ele tenha um funcionamento correto.\n\n## Loja de demonstração\n\n[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://files.readme.io/f0ec0af-exemplo-lightbox.gif\",\n \"exemplo-lightbox.gif\",\n 1920,\n 937,\n \"#333\"\n ]\n }\n ]\n}\n[/block]\nNeste exemplo utilizamos como dependência a SDK de PHP, que é responsável por realizar as requisições na a API Gerencianet. Mas o nosso Lightbox, lhe permite integrar sua aplicação também com as <a href=\"https://dev.gerencianet.com.br/docs/instalacao-da-api\" target=\"_blank\">SDKs Gerencianet em outras linguagens disponíveis</a>.\n\n\n[block:html]\n{\n \"html\": \"<a href=\\\"https://www.gerencianet.com.br/wp-content/themes/Gerencianet/lightbox/\\\" target=\\\"_blank\\\" alt=\\\"ACESSAR LOJA DE DEMONSTRAÇÃO\\\"><button type=\\\"button\\\" class=\\\"buttonCTA buttonorange\\\">ACESSAR LOJA DE DEMONSTRAÇÃO</button></a>\\n\\n<a href=\\\"https://github.com/gerencianet/gn-lightbox-example\\\" target=\\\"_blank\\\" alt=\\\"ACESSAR CÓDIGO DE EXEMPLO NO GITHUB\\\"><button type=\\\"button\\\" class=\\\"buttonCTA buttonorange\\\">ACESSAR CÓDIGO DE EXEMPLO NO GITHUB</button></a>\"\n}\n[/block]","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"606f2ca7c5ba910078783469","createdAt":"2016-07-12T17:19:22.842Z","parentDoc":null,"project":"575aeffae12cf20e002f306c","version":{"version":"1.1.0","version_clean":"1.1.0","codename":"2021","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["606f2ca6c5ba91007878342b","575af039a083950e004487f7","575af5c7ba4ed70e000ca288","606f2ca6c5ba91007878342c","606f2ca6c5ba91007878342d","606f2ca6c5ba91007878342e","606f2ca6c5ba91007878342f","5761a63d207db7170022fc14","5761b9a2b65324200072d79e","576832939f0bf4190014ffdf","576832c09f0bf4190014ffe1","576832cba151c10e004316f0","576832d5bb15f40e00a288ec","576832e107b1f30e0039c645","606f2ca6c5ba910078783430","606f2ca6c5ba910078783431","5783f78c5cbce30e0074e2b7","606f2ca6c5ba910078783432","606f2ca6c5ba910078783433","606f2ca6c5ba910078783434","606f2ca6c5ba910078783435","606f2ca6c5ba910078783436","606f2ca6c5ba910078783437","578529f887c9280e0090394b","606f2ca6c5ba910078783438","606f2ca6c5ba910078783439","606f2ca6c5ba91007878343a","606f2ca6c5ba91007878343b","606f2ca6c5ba91007878343c","606f2ca6c5ba91007878343d","606f2ca6c5ba91007878343e","606f2ca6c5ba91007878343f","606f2ca6c5ba910078783440","606f2ca6c5ba910078783441","60d61f026ddc3901a32ee5f1","60ec37c637005f015e54174e","61473375119247002a9c14d7","6283a3819575c60045513ea2"],"_id":"606f2ca7c5ba9100787834c6","project":"575aeffae12cf20e002f306c","createdAt":"2016-06-10T16:51:06.080Z","releaseDate":"2016-06-10T16:51:06.080Z","__v":4,"forked_from":"575aeffae12cf20e002f306f"},"user":"57601a13af3e090e00108059","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Checkout via Lightbox","slug":"checkout-via-ligthbox","order":16,"from_sync":false,"reference":false,"_id":"606f2ca6c5ba910078783437","version":"606f2ca7c5ba9100787834c6","project":"575aeffae12cf20e002f306c","__v":1,"createdAt":"2016-07-11T19:51:52.428Z"},"githubsync":"","__v":6}
Utilizando Lightbox
Você está em: *"Checkout via Lightbox > Utilizando Lightbox"*