95d44929.04a597ba.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[88,63],{188:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return l})),n.d(t,"metadata",(function(){return b})),n.d(t,"Highlight",(function(){return d})),n.d(t,"rightToc",(function(){return u})),n.d(t,"default",(function(){return m}));var o=n(2),a=n(6),i=(n(0),n(250)),r=n(257),s=n(258),c=n(93),l={id:"lightbox",title:"Lightbox",hide_title:!0,sidebar_label:"Lightbox"},b={id:"Lightbox/lightbox",isDocsHomePage:!1,title:"Lightbox",description:"Lightbox",source:"@site/docs\\Lightbox\\lightbox.md",permalink:"/documentation/docs/Lightbox/lightbox",sidebar_label:"Lightbox",sidebar:"someSidebar",previous:{title:"Dividindo recebimentos",permalink:"/documentation/docs/Marketplace/DividindoRecebimentos"},next:{title:"Recebendo as notifica\xe7\xf5es",permalink:"/documentation/docs/Notificacoes/RecebendoNotificacoes"}},d=function(e){var t=e.children;e.color;return Object(i.b)("span",{style:{borderRadius:"2px",color:"#009615",padding:"0.2rem"}},t)},u=[{value:"Adding Lightbox to your page",id:"adding-lightbox-to-your-page",children:[{value:"Lightbox startup",id:"lightbox-startup",children:[]},{value:"Available payment methods",id:"available-payment-methods",children:[]},{value:"Lightbox Display",id:"lightbox-display",children:[]}]},{value:"Carrying out the integration",id:"carrying-out-the-integration",children:[{value:"Exemples",id:"exemples",children:[]}]},{value:"Demo store",id:"demo-store",children:[]}],p={Highlight:d,rightToc:u};function m(e){var t=e.components,n=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(o.a)({},p,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h1",{className:"titulo"},"Lightbox"),Object(i.b)("div",{className:"subtitulo"},Object(i.b)("p",null,"Integration with Gerencianet Lightbox allows you to display the payment information collection form superimposed on your checkout page. For example, when the customer adds the products to the cart and closes the order, we just dim the background of your website and the buyer sees a new modal window to fill in the payment details."),Object(i.b)("p",null,"Despite being an enabler, Lightbox requires backend integration to be performed normally."),Object(i.b)("h2",{id:"adding-lightbox-to-your-page"},"Adding Lightbox to your page"),Object(i.b)("p",null,"First, you will need to add a script to your page that provides the functions necessary for the construction and operation of Lightbox."),Object(i.b)("p",null,'To generate the Javascript code specific to your Gestornet account, enter your "Account Identifier" in the field below (',Object(i.b)("a",{target:"blank",href:"https://cdn.discordapp.com/attachments/652136190006525955/809138574549188618/identificador-conta.jpg"},"where do I find?"),') and click the "Generate" button. It should be noted that you must be logged into your Gestornet account to view your account identifier.'),Object(i.b)(c.default,{mdxType:"AccountIdentifier"}),Object(i.b)("p",null,"After inserting the script, the following functions will be available:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},Object(i.b)("code",null,"ready()")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("code",null,"lightbox()")),Object(i.b)("li",{parentName:"ul"},Object(i.b)("code",null,"show()"))),Object(i.b)("br",null),Object(i.b)("h3",{id:"lightbox-startup"},"Lightbox startup"),Object(i.b)("p",null,"(*) Required attribute"),Object(i.b)("table",null,Object(i.b)("tbody",null,Object(i.b)("tr",null,Object(i.b)("th",null,"Parameters"),Object(i.b)("th",{align:"center"},"Description"),Object(i.b)("th",{align:"center"},"Type")),Object(i.b)("tr",null,Object(i.b)("td",null,Object(i.b)("b",null,"callback*")),Object(i.b)("td",{align:"left"},"Initialization function that makes it possible to call other functions.",Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("em",null,"Callback parameter(s):"),Object(i.b)("br",null),Object(i.b)("code",null,"object*")," "),Object(i.b)("td",{align:"center"},"Function")))),Object(i.b)("br",null),Object(i.b)("h3",{id:"available-payment-methods"},"Available payment methods"),Object(i.b)("p",null,"(*) Required attribute"),Object(i.b)("table",null,Object(i.b)("tbody",null,Object(i.b)("tr",null,Object(i.b)("th",null,"Parameters"),Object(i.b)("th",{align:"center"},"Description"),Object(i.b)("th",{align:"center"},"Type")),Object(i.b)("tr",null,Object(i.b)("td",null,Object(i.b)("b",null,"available_payment_forms*")),Object(i.b)("td",{align:"left"},"Array with the payment method(s) that Lightbox will include.",Object(i.b)("br",null),Object(i.b)("br",null),"The available options are:",Object(i.b)("br",null),Object(i.b)("ul",null,Object(i.b)("li",null,"banking_billet (boleto banc\xe1rio)"),Object(i.b)("li",null,"credit_card (cart\xe3o de cr\xe9dito)"),Object(i.b)("li",null,"pix (pix)"))," "),Object(i.b)("td",{align:"center"},"Array")))),Object(i.b)("br",null),Object(i.b)("h3",{id:"lightbox-display"},"Lightbox Display"),Object(i.b)("p",null,"(*) Required attribute"),Object(i.b)("table",null,Object(i.b)("tbody",null,Object(i.b)("tr",null,Object(i.b)("th",null,"Parameters"),Object(i.b)("th",{align:"center"},"Description"),Object(i.b)("th",{align:"center"},"Type")),Object(i.b)("tr",null,Object(i.b)("td",null,Object(i.b)("b",null,"data*")),Object(i.b)("td",{align:"left"},"Object with the essential information for building the Lightbox. The attributes are:",Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("code",null,"items*"),", Array with the items that will be purchased by the customer. Each instance of this array will be an object that must have a name and a value ",Object(i.b)(d,{color:"#009615",mdxType:"Highlight"},"(integer value, ex.: R$ 123,00 = 12300)"),". Instances can also have amount, which defaults to 1.",Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("code",null,"actionForm*"),", Backend URL where the collected customer information will be sent.",Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("code",null,"shippingCosts"),", Shipping cost, in full. ",Object(i.b)(d,{color:"#009615",mdxType:"Highlight"},"(R$ 50,00 = 5000)"),Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("code",null,"customer"),", Boolean that indicates whether to request customer data (true) or not (false). The default value is true.",Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("code",null,"shippingAddress"),", Boolean that indicates whether to request the delivery address data (true) or not (false). The default value is true."),Object(i.b)("td",{align:"center"},"Object")))),Object(i.b)("br",null),Object(i.b)("br",null),Object(i.b)("h2",{id:"carrying-out-the-integration"},"Carrying out the integration"),Object(i.b)("p",null,"Lightbox works as a payment screen for your website or application. When the buyer fills in the fields, chooses the payment method and finishes in Lightbox, a POST will be sent to the backend URL informed in the ",Object(i.b)("code",null,"actionForm")," parameter, containing the data for issuing the charge."),Object(i.b)("p",null,"Receiving the payment information from Lightbox in its backend, the integration with the Gestoret API must be implemented and the request for registration of the transaction must be made, using one of our ",Object(i.b)("a",Object(o.a)({parentName:"p"},{href:"https://dev.gerencianet.com.br/docs/instalacao-da-api"}),"SDKs available"),". It is also necessary for the integrator to develop the notification return solution, using the callback functionality for boleto and card, and the webhook for Pix."),Object(i.b)("br",null),Object(i.b)("h3",{id:"exemples"},"Exemples"),Object(i.b)("p",null,"Having the script with Account Identifier added, it will prepare the page for the execution of Lightbox, being necessary the function ",Object(i.b)("code",null,"ready((obj) => {})")," for initialization.\nTo open the Lightbox modal by clicking on a button, this button must contain the mandatory attribute ",Object(i.b)("code",null,'rel="gn_lightbox"')," which will execute the ",Object(i.b)("code",null,"show(data)")," function."),Object(i.b)(r.a,{defaultValue:"front",values:[{label:"Front-end",value:"front"},{label:"Back-end",value:"back"}],mdxType:"Tabs"},Object(i.b)(s.a,{value:"front",mdxType:"TabItem"},Object(i.b)("pre",null,Object(i.b)("code",Object(o.a)({parentName:"pre"},{className:"language-html"}),"<!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        <\/script>\n    \n    <script>\n      $gn.ready(function(obj){\n \n        var payment_forms = [\"credit_card\", \"banking_billet\",\"pix\"];\n            obj.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\xe7o\n                value: 12000 // valor (12000 = R$ 120,00) (Obs: \xc9 poss\xedvel a cria\xe7\xe3o de itens com valores negativos. Por\xe9m, o valor total da fatura deve ser superior ao valor m\xednimo para gera\xe7\xe3o de transa\xe7\xf5es.)\n              },\n              {\n                name: 'Item 2', // nome do item, produto ou servi\xe7o\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"))),Object(i.b)(s.a,{value:"back",mdxType:"TabItem"},Object(i.b)("pre",null,Object(i.b)("code",Object(o.a)({parentName:"pre"},{className:"language-php"}),"<?php\n\n/**\n * Inicia\xe7\xe3o da SDK\n */\nrequire_once __DIR__ . '/vendor/autoload.php';\n\nuse Gerencianet\\Exception\\GerencianetException;\nuse Gerencianet\\Gerencianet;\n\n\n/**\n * Defini\xe7\xe3o 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\xea deve obter os valores do produto da sess\xe3o/banco de dados.\n    // O exemplo fornecido abaixo \xe9 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\xe9todo de pagamento Pix\n     */\n    if ($postPayment['method'] == 'pix') {\n\n        $body = [\n            \"calendario\" => [\n                \"expiracao\" => ((int)$expirationTime * 86400) // Expira\xe7\xe3o 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\xe7a 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\xe9m o QRCode da cobran\xe7a 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\xe9todo de pagamento Pix\n\n    /**\n     * M\xe9todo de pagamento Boleto ou Cart\xe3o\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\xe9todo de pagamento Cart\xe3o de Cr\xe9dito\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\xe9todo 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\xe9todo de pagamento Boleto ou Cart\xe3o\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")))),Object(i.b)("p",null,"With these implementations, the Lightbox can now be opened on your page, but it will still be necessary to perform the integration in the backend so that it works correctly."),Object(i.b)("br",null),Object(i.b)("h2",{id:"demo-store"},"Demo store"),Object(i.b)("p",null,"In this example, we use the PHP SDK as a dependency, which is responsible for making requests to the Gestoret API. But our Lightbox, allows you to integrate your application also with the ",Object(i.b)("a",{href:"/documentation/docs/Instalacao/introducao",target:"_blank"},"Gerencianet SDKs in other languages available"),"."),Object(i.b)("p",null,Object(i.b)("img",Object(o.a)({parentName:"p"},{src:"../../img/lightbox.gif",alt:"alt text",title:"sucesso (200)"}))),Object(i.b)("a",{href:"https://www.gerencianet.com.br/wp-content/themes/Gerencianet/lightbox/",target:"_blank",alt:"ACESSAR LOJA DE DEMONSTRA\xc7\xc3O"},Object(i.b)("button",{type:"button",className:"buttonCTA buttonorange espaco"},"ACCESS DEMO STORE")),Object(i.b)("a",{href:"https://github.com/gerencianet/gn-lightbox-example",target:"_blank",alt:"ACESSAR C\xd3DIGO DE EXEMPLO NO GITHUB"},Object(i.b)("button",{type:"button",className:"buttonCTA buttonorange"},"ACCESS SAMPLE CODE IN GITHUB"))))}m.isMDXComponent=!0},250:function(e,t,n){"use strict";n.d(t,"a",(function(){return d})),n.d(t,"b",(function(){return m}));var o=n(0),a=n.n(o);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,o,a=function(e,t){if(null==e)return{};var n,o,a={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),b=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},d=function(e){var t=b(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},p=a.a.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,r=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=b(n),p=o,m=d["".concat(r,".").concat(p)]||d[p]||u[p]||i;return n?a.a.createElement(m,s(s({ref:t},l),{},{components:n})):a.a.createElement(m,s({ref:t},l))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,r=new Array(i);r[0]=p;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:o,r[1]=s;for(var l=2;l<i;l++)r[l]=n[l];return a.a.createElement.apply(null,r)}return a.a.createElement.apply(null,n)}p.displayName="MDXCreateElement"},254:function(e,t,n){"use strict";function o(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=o(e[t]))&&(a&&(a+=" "),a+=n);else for(t in e)e[t]&&(a&&(a+=" "),a+=t);return a}t.a=function(){for(var e,t,n=0,a="";n<arguments.length;)(e=arguments[n++])&&(t=o(e))&&(a&&(a+=" "),a+=t);return a}},255:function(e,t,n){"use strict";var o=n(0);const a=Object(o.createContext)({tabGroupChoices:{},setTabGroupChoices:()=>{},isAnnouncementBarClosed:!1,closeAnnouncementBar:()=>{}});t.a=a},256:function(e,t,n){"use strict";var o=n(0),a=n(255);t.a=function(){return Object(o.useContext)(a.a)}},257:function(e,t,n){"use strict";var o=n(0),a=n.n(o),i=n(256),r=n(254),s=n(92),c=n.n(s);const l=37,b=39;t.a=function(e){const{block:t,children:n,defaultValue:s,values:d,groupId:u}=e,{tabGroupChoices:p,setTabGroupChoices:m}=Object(i.a)(),[h,x]=Object(o.useState)(s);if(null!=u){const e=p[u];null!=e&&e!==h&&d.some(t=>t.value===e)&&x(e)}const g=e=>{x(e),null!=u&&m(u,e)},f=[];return a.a.createElement("div",null,a.a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:Object(r.a)("tabs",{"tabs--block":t})},d.map(({value:e,label:t})=>a.a.createElement("li",{role:"tab",tabIndex:"0","aria-selected":h===e,className:Object(r.a)("tabs__item",c.a.tabItem,{"tabs__item--active":h===e}),key:e,ref:e=>f.push(e),onKeyDown:e=>((e,t,n)=>{switch(n.keyCode){case b:((e,t)=>{const n=e.indexOf(t)+1;e[n]?e[n].focus():e[0].focus()})(e,t);break;case l:((e,t)=>{const n=e.indexOf(t)-1;e[n]?e[n].focus():e[e.length-1].focus()})(e,t)}})(f,e.target,e),onFocus:()=>g(e),onClick:()=>g(e)},t))),a.a.createElement("div",{role:"tabpanel",className:"margin-vert--md"},o.Children.toArray(n).filter(e=>e.props.value===h)[0]))}},258:function(e,t,n){"use strict";var o=n(0),a=n.n(o);t.a=function(e){return a.a.createElement("div",null,e.children)}},93:function(e,t,n){"use strict";n.r(t);var o=n(0),a=n.n(o);class i extends a.a.Component{constructor(e){super(e),this.state={value:"",desenvolvimento:"",producao:""},this.handleChange=this.handleChange.bind(this),this.handleSubmit=this.handleSubmit.bind(this)}handleChange(e){this.setState({value:e.target.value})}handleSubmit(e){var t=this.state.value;if(null!==t&&""!==t){var n="<script type='text/javascript'>var s=document.createElement('script');s.type='text/javascript';var v=parseInt(Math.random()*1000000);s.src='https://sandbox.gerencianet.com.br/v1/cdn/"+t+"/'+v;s.async=false;s.id='"+t+"';if(!document.getElementById('"+t+"')){document.getElementsByTagName('head')[0].appendChild(s);};$gn={validForm:true,processed:false,done:{},ready:function(fn){$gn.done=fn;}};<\/script>",o="<script type='text/javascript'>var s=document.createElement('script');s.type='text/javascript';var v=parseInt(Math.random()*1000000);s.src='https://api.gerencianet.com.br/v1/cdn/"+t+"/'+v;s.async=false;s.id='"+t+"';if(!document.getElementById('"+t+"')){document.getElementsByTagName('head')[0].appendChild(s);};$gn={validForm:true,processed:false,done:{},ready:function(fn){$gn.done=fn;}};<\/script>",i=a.a.createElement("h2",null,"Desenvolvimento"),r=a.a.createElement("h2",null,"Produ\xe7\xe3o");this.updateContent(n,o,i,r)}else alert("Insira um identificador v\xe1lido");e.preventDefault(),console.log(t)}updateContent(e,t,n,o){this.setState({desenvolvimento:e}),this.setState({producao:t}),this.setState({hdesenvolvimento:n}),this.setState({hproducao:o})}render(){return a.a.createElement("div",null,a.a.createElement("form",{onSubmit:this.handleSubmit},a.a.createElement("label",null,a.a.createElement("input",{type:"text",placeholder:"Identificador da conta",className:"input_account",value:this.state.value,onChange:this.handleChange})),a.a.createElement("input",{type:"submit",className:"button1",value:"Gerar"})),a.a.createElement("div",null,this.state.hdesenvolvimento,this.state.desenvolvimento,a.a.createElement("hr",null),this.state.hproducao,this.state.producao))}}t.default=i}}]);