---
agentTools:
  projectIndex: https://docs.mundipagg.com/llms.txt
---

# Opção Lightbox

Com a opção **Lightbox**, você pode customizar a página de finalização da compra com a identidade da sua loja, sem alterar a URL no navegador do cliente. Ao clicar em fechar o carrinho, aparece um lightbox na página do seu site para que o comprador preencha os dados para pagamento.

[block:api-header]
{
  "title": "Integração com Checkout"
}
[/block]

**Passo 1**: Adicionar uma tag `<script>` para inserção do código de chamada ao Lightbox em JavaScript

[block:code]
{
  "codes": [
    {
      "code": "<script>\n        (function(d, s, id){\n                var js, fjs = d.getElementsByTagName(s)[0];\n                if (d.getElementById(id)) return;\n                js = d.createElement(s); js.id = id;\n                js.src = \"https://checkout.mundipagg.com/v1/lightbox.js\";\n                fjs.parentNode.insertBefore(js, fjs);\n            }(document, 'script', 'mundipagg-lightbox'));\n</script>",
      "language": "html",
      "name": "HTML"
    }
  ]
}
[/block]

**Passo 2**:
Quando o comprador acessar o carrinho você deverá realizar uma requisição ao endpoint de [criação de pedido](https://docs.mundipagg.com/v1/reference#criar-pedido) contendo o objeto `payments` com o campo `payment-method` : `checkout`. Além disso, inclua na requisição um objeto `checkout` com as informações referentes ao pagamento [Saiba mais sobre o objeto Checkout](https://docs.mundipagg.com/v1/reference#meio-de-pagamento-checkout).

[block:code]
{
  "codes": [
    {
      "code": "{\n   \"items\":[...],\n   \"customer\":{...},\n   \"payments\":[\n      {   \n         \"amount\" : 3000,\n         \"payment_method\":\"checkout\",\n         \"checkout\": {\n            \"expires_in\":120,\n            \"billing_address_editable\" : false,\n            \"customer_editable\" : true,\n            \"accepted_payment_methods\": [\"credit_card\"],\n            \"success_url\": \"https://www.mundipagg.com\",\n            \"credit_card\": {...}\n         }\n      }\n   ]\n}",
      "language": "json",
      "name": "Request de Pedido com Checkout"
    }
  ]
}
[/block]

A resposta da requisição de criação de pedido conterá um objeto checkouts com o campo `id`. Este `id` tem o formato `chk_XXXXXXXXXXXXXXXX` e representa o **token do checkout**.

[block:code]
{
  "codes": [
    {
      "code": "{\n    \"id\": \"or_GqAlNNOsDLcAlvbP\",\n    \"code\": \"LKKMFJPU9M\",\n    \"amount\": 3000,\n\t\t...\n    \"checkouts\": [\n        {\n            \"id\": \"chk_ON0Q6MU8EIWGY386\",\n            \"amount\": 3000,\n            \"status\": \"open\",\n            \"success_url\": \"https://www.mundipagg.com\",\n            \"payment_url\": \"https://api.mundipagg.com/checkout/v1/orders/chk_ON0Q6MU8EIWGY386\",\n            \"customer_editable\": true,\n            \"billing_address_editable\": true,\n            \"skip_checkout_success_page\": false,\n            \"created_at\": \"2018-03-28T18:48:49Z\",\n            \"updated_at\": \"2018-03-28T18:48:49Z\",\n            \"expires_at\": \"2018-03-28T20:48:49Z\",\n            \"accepted_payment_methods\": [\"credit_card\"],\n            \"customer\": {...},\n            \"credit_card\": {...},\n            \"billing_address\": {...},\n            \"shippable\": false,\n            \"currency\": \"BRL\",\n            \"metadata\": {...}\n        }\n    ]\n}",
      "language": "text",
      "name": "Response do Pedido com Checkout"
    }
  ]
}
[/block]

Este **token** deverá ser utilizado pelo Front-End da sua aplicação, conforme descrito no passo 3.

[block:callout]
{
  "type": "danger",
  "title": "ATENÇÃO",
  "body": "O envio da requisição de **criação de pedido com checkout** deverá ser realizada **internamente** nos servidores da sua aplicação (Back-End), evitando que o Front-End exponha a **Chave de API** do lojista."
}
[/block]

**Passo 3**: De volta ao carrinho, uma tag `<a>`, deverá ser adicionada que conterá o botão de chamada do Lightbox, de acordo com a configuração.

[block:code]
{
  "codes": [
    {
      "code": "<a data-mundicheckout=\"lightbox\" data-mundicheckout-token=\"chk_kLPG7B3IaNcNOWny\"\ndata-mundicheckout-default>Pagar</a>\n",
      "language": "html",
      "name": "HTML"
    }
  ]
}
[/block]

Esta tag recebe as propriedades para configuração, sendo elas:

[block:parameters]
{
  "data": {
    "h-0": "Nome",
    "h-1": "Descrição",
    "0-0": "**data-mundicheckout**",
    "0-1": "Define o modo que será apresentado o checkout. O valor padrão é \"lightbox\".",
    "1-1": "Token gerado na criação do pedido.",
    "1-0": "**data-mundicheckout-token**",
    "2-0": "**data-mundicheckout-default**",
    "2-1": "Se for colocado dá ao elemento `<a>` de configuração um estilo padrão de botão."
  },
  "cols": 2,
  "rows": 3
}
[/block]

Você deverá atribuir dinamicamente ao parâmetro `data-mundicheckout-token` deste botão o **token do checkout**, criado no Passo 2. Ao clicar em **Pagar** o Lightbox da Mundipagg será apresentado ao comprador, sem a necessidade de redireciona-lo à outra página.

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/21b20c5-Modelo_lb.png",
        "Modelo lb.png",
        1986,
        1013,
        "#8d999a"
      ]
    }
  ]
}
[/block]