{"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"],"_id":"606f2ca7c5ba9100787834c6","project":"575aeffae12cf20e002f306c","createdAt":"2016-06-10T16:51:06.080Z","releaseDate":"2016-06-10T16:51:06.080Z","__v":3,"forked_from":"575aeffae12cf20e002f306f"},"user":"57601a13af3e090e00108059","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Checkout via Lightbox","slug":"checkout-via-ligthbox","order":15,"from_sync":false,"reference":false,"_id":"606f2ca6c5ba910078783437","version":"606f2ca7c5ba9100787834c6","project":"575aeffae12cf20e002f306c","__v":1,"createdAt":"2016-07-11T19:51:52.428Z"},"githubsync":"","__v":6}