{"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}

API Pix

API Pagamentos

API Abertura Contas

API Open Finance

Visão Geral da API

Ambiente de Testes

Instalação da API (SDK's)

Pagar com Boleto (Bolix)

Pagar com Cartão

Assinaturas (Recorrência)

Carnês

Link de Pagamento

Marketplace

Checkout via Lightbox

Notificações (callbacks)

Módulos e Plugins

Exemplos de Integrações

Cursos de Integração

Outros Recursos

Autenticação e Endpoints

Fluxos de Processos

Dúvidas?

Utilizando Lightbox

Você está em: *"Checkout via Lightbox > Utilizando Lightbox"*
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. Apesar de ser um facilitador, o Lightbox requer que a integração no backend seja realizada normalmente. ## Adicionando o Lightbox em sua página Primeiramente, será necessário adicionar um script em sua página que disponibiliza as funções necessárias à construção e funcionamento do Lightbox. [block:html] { "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>" } [/block] Após a inserção do script, as seguintes funções ficarão disponíveis: - <code>ready()</code> - <code>lightbox()</code> - <code>show()</code> ### Inicialização do Lightbox [block:parameters] { "data": { "h-0": "Parâmetros", "h-1": "Tipo", "h-2": "Descrição", "0-0": "callback<span class=\"obrigatorio\">*</span>", "0-1": "Function", "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>" }, "cols": 3, "rows": 1 } [/block] <strong class="atributo-obrigatorio-texto">* valor obrigatório</strong> ### Métodos de pagamentos disponíveis [block:parameters] { "data": { "h-0": "Parâmetros", "h-1": "Tipo", "h-2": "Descrição", "0-0": "available_payment_forms<span class=\"obrigatorio\">*</span>", "0-1": "Array", "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)." }, "cols": 3, "rows": 1 } [/block] <strong class="atributo-obrigatorio-texto">* valor obrigatório</strong> ### Exibição do Lightbox [block:parameters] { "data": { "h-0": "Parâmetros", "0-0": "data<strong class=\"atributo-obrigatorio\">*</strong>", "h-1": "Tipo", "h-2": "Descrição", "0-1": "Object", "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>" }, "cols": 3, "rows": 1 } [/block] <strong class="atributo-obrigatorio-texto">* valor obrigatório</strong> ## Realizando a integração O 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. Recebendo 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. <br /> ## Exemplo Tendo 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. Para 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>. [block:code] { "codes": [ { "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>", "language": "html", "name": "Front-end" }, { "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}", "language": "php", "name": "Back-end" } ] } [/block] Com 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. ## Loja de demonstração [block:image] { "images": [ { "image": [ "https://files.readme.io/f0ec0af-exemplo-lightbox.gif", "exemplo-lightbox.gif", 1920, 937, "#333" ] } ] } [/block] Neste 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>. [block:html] { "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>" } [/block]