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

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]