> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chargefy.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurar sua página de checkout

> Use o Checkout Builder para definir a aparência, os campos, os meios de pagamento, o parcelamento e o template das páginas hospedadas.

O **Checkout Builder** é o recurso da Chargefy para configurar e personalizar
suas páginas de checkout hospedadas. Em um único lugar, você define identidade
visual, conteúdo, campos do comprador, meios de pagamento, descontos,
parcelamento e o template usado para apresentar a compra.

<Card title="Abrir o Checkout Builder" icon="sliders" href="https://app.chargefy.io">
  Entre no Dashboard, escolha a organização e abra **Configurações → Checkout**
  para editar e salvar a configuração.
</Card>

<Frame caption="Preview interativo com campos obrigatórios, cores, tema, cantos e fonte configurados lado a lado.">
  <img src="https://mintcdn.com/scaleup-28315a31/KoGyPnB0fzTxgiXL/assets/payments/checkout/configure-checkout-page/builder-playground.jpg?fit=max&auto=format&n=KoGyPnB0fzTxgiXL&q=85&s=d4364e6efd3a4f941e792d9a06f07638" alt="Preview do checkout com painel aberto para configurar desconto, campos obrigatórios, cores, tema, cantos e fonte" width="1280" height="720" data-path="assets/payments/checkout/configure-checkout-page/builder-playground.jpg" />
</Frame>

Cada organização mantém uma única configuração. Checkout Sessions e Payment
Links carregam as escolhas atuais quando a página é aberta, inclusive quando o
link ou a sessão já existia antes da alteração.

## O que você pode configurar

| Área               | Escolhas                                                                                      | Efeito na página                                           |
| ------------------ | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
| Identidade visual  | Cor principal, cor de destaque, fonte, tema claro ou escuro e cantos dos componentes.         | Aproxima o checkout da identidade da sua marca.            |
| Template           | `minimal`, `booking` ou `subscription`.                                                       | Organiza o resumo da compra conforme o tipo de venda.      |
| Produto            | Imagem oculta, miniatura ou destaque; descrição oculta, resumida ou completa.                 | Controla quanto contexto o comprador vê antes de pagar.    |
| Resumo             | Expandido, recolhível ou compacto.                                                            | Ajusta a densidade das informações do pedido.              |
| Dados do comprador | Documento, telefone e endereço de cobrança.                                                   | Define quais dados adicionais são obrigatórios.            |
| Meios de pagamento | Cartão, Pix e boleto.                                                                         | Determina as opções apresentadas ao comprador.             |
| Descontos          | Campo de código visível ou oculto.                                                            | Permite ou impede que o comprador informe um código.       |
| Parcelamento       | De 1 a 12 parcelas, com o acréscimo absorvido ou repassado; chamada e detalhamento dos juros. | Define as opções e a forma de comunicar o valor parcelado. |

<Warning>
  Ao habilitar boleto, documento e endereço de cobrança passam a ser
  obrigatórios. O Builder aplica essa dependência automaticamente.
</Warning>

## O que fica no Builder e o que fica na venda

O Builder controla a experiência compartilhada pela organização. A Checkout
Session ou o Payment Link continua descrevendo a compra específica.

| Responsabilidade      | Onde configurar                  | Exemplos                                                             |
| --------------------- | -------------------------------- | -------------------------------------------------------------------- |
| Experiência da página | Checkout Builder                 | Cores, template, campos exigidos, métodos, descontos e parcelamento. |
| Conteúdo da compra    | Checkout Session ou Payment Link | Itens, quantidades, customer, desconto predefinido e valor.          |
| Continuidade do fluxo | Checkout Session ou Payment Link | URLs de sucesso e cancelamento, metadata e texto semântico do botão. |

Não existem configurações visuais por sessão ou por link. Assim, a página e a
validação usam sempre a mesma política da organização.

## Templates

Templates mudam a composição do resumo da compra. O formulário, os meios de
pagamento, o parcelamento, os campos obrigatórios e a confirmação continuam
seguindo as demais escolhas do Checkout Builder.

<CardGroup cols={3}>
  <Card title="Minimal" icon="square" href="https://pay.chargefy.io/preview/minimal">
    <img src="https://mintcdn.com/scaleup-28315a31/KoGyPnB0fzTxgiXL/assets/payments/checkout/configure-checkout-page/setup-minimal.jpg?fit=max&auto=format&n=KoGyPnB0fzTxgiXL&q=85&s=22dba1132feeca6e6aac116c797aa1ad" alt="Checkout minimal em azul com desconto, cartão, Pix, documento e telefone" width="1280" height="720" data-path="assets/payments/checkout/configure-checkout-page/setup-minimal.jpg" />

    Produto, resumo e pagamento no caminho mais direto.
  </Card>

  <Card title="Booking" icon="calendar-days" href="https://pay.chargefy.io/preview/booking">
    <img src="https://mintcdn.com/scaleup-28315a31/KoGyPnB0fzTxgiXL/assets/payments/checkout/configure-checkout-page/setup-booking.jpg?fit=max&auto=format&n=KoGyPnB0fzTxgiXL&q=85&s=a0236303304329df682df1b4f2025a7b" alt="Checkout booking em verde com estadia, noites, adicionais e endereço do comprador" width="1280" height="720" data-path="assets/payments/checkout/configure-checkout-page/setup-booking.jpg" />

    Destaca reserva, período, adicionais e taxas sem misturar essas informações
    com o formulário.
  </Card>

  <Card title="Subscription" icon="arrows-rotate" href="https://pay.chargefy.io/preview/subscription">
    <img src="https://mintcdn.com/scaleup-28315a31/KoGyPnB0fzTxgiXL/assets/payments/checkout/configure-checkout-page/setup-subscription.jpg?fit=max&auto=format&n=KoGyPnB0fzTxgiXL&q=85&s=5d19c83e7531d5f6f310c049faca9d70" alt="Checkout subscription roxo em tema escuro com plano anual, período de teste e pagamento por cartão" width="1280" height="720" data-path="assets/payments/checkout/configure-checkout-page/setup-subscription.jpg" />

    Explica período de teste, ciclo de cobrança, renovação e valor recorrente.
  </Card>
</CardGroup>

Clique em qualquer imagem para abrir o preview e testar cores, campos, meios de
pagamento e outras escolhas ao vivo.

| Template       | O que destaca                                           | Indicado para                                     |
| -------------- | ------------------------------------------------------- | ------------------------------------------------- |
| `minimal`      | Produto, preço e resumo essencial.                      | Produtos digitais, serviços e pagamentos avulsos. |
| `booking`      | Acomodação, quantidade de noites, adicionais e taxas.   | Hospedagem, experiências e locações por período.  |
| `subscription` | Trial, ciclo de cobrança, renovação e valor recorrente. | SaaS, clubes, comunidades e planos de assinatura. |

### Como os dados da venda alimentam cada template

O template é escolhido no Checkout Builder — não existe um campo `template` no
request. O payload define os dados da compra que cada composição vai apresentar.

<CodeGroup>
  ```json Minimal theme={"theme":"css-variables"}
  {
    "line_items": [
      {
        "price_data": {
          "currency": "brl",
          "product_data": {
            "name": "Curso de fotografia"
          },
          "unit_amount": 19990
        },
        "quantity": 1
      }
    ],
    "metadata": {},
    "submit_type": "pay",
    "success_url": "https://meusite.com/pedido/confirmado"
  }
  ```

  ```json Booking theme={"theme":"css-variables"}
  {
    "line_items": [
      {
        "price_data": {
          "currency": "brl",
          "product_data": {
            "name": "Suíte vista mar"
          },
          "unit_amount": 45000
        },
        "quantity": 3
      },
      {
        "price_data": {
          "currency": "brl",
          "product_data": {
            "name": "Taxa de limpeza"
          },
          "unit_amount": 12000
        },
        "quantity": 1
      }
    ],
    "metadata": {},
    "submit_type": "book",
    "success_url": "https://meusite.com/reserva/confirmada"
  }
  ```

  ```json Subscription theme={"theme":"css-variables"}
  {
    "line_items": [
      {
        "price_data": {
          "currency": "brl",
          "product_data": {
            "name": "Plano anual"
          },
          "recurring": {
            "interval": "year",
            "interval_count": 1
          },
          "unit_amount": 49000
        },
        "quantity": 1
      }
    ],
    "metadata": {},
    "submit_type": "subscribe",
    "subscription_data": {
      "trial_period_days": 7
    },
    "success_url": "https://meusite.com/assinatura/confirmada"
  }
  ```
</CodeGroup>

Veja todas as variantes de `line_items` em [Criar uma Checkout
Session](/api-reference/checkout-sessions/create#line-items-tres-variantes).

## Como uma alteração chega ao checkout

<Steps>
  <Step title="Edite a configuração">
    Abra **Configurações → Checkout**, ajuste o Builder e salve.
  </Step>

  <Step title="O comprador abre a página">
    Uma Checkout Session ou um Payment Link carrega a configuração atual da
    organização.
  </Step>

  <Step title="A mesma política valida o pagamento">
    A confirmação respeita os métodos, os campos obrigatórios e o parcelamento
    exibidos na tela.
  </Step>
</Steps>

Se você desabilitar um meio de pagamento ou tornar um dado obrigatório, a
mudança passa a valer no próximo carregamento da página. Não é necessário
recriar links ou sessões.

## Próximos passos

<CardGroup cols={2}>
  <Card title="Criar o primeiro checkout" icon="rocket" href="/payments/create-hosted-checkout-page">
    Crie uma Checkout Session, redirecione o comprador e confirme o resultado.
  </Card>

  <Card title="Entender Checkout Sessions" icon="cart-shopping" href="/payments/create-checkout-page">
    Veja itens, customer, expiração, estados e métodos de pagamento.
  </Card>

  <Card title="Criar e aplicar descontos" icon="tag" href="/products-prices-discounts/create-and-apply-discounts">
    Combine desconto predefinido com códigos informados pelo comprador.
  </Card>

  <Card title="Criar um Link de pagamento" icon="link" href="/payments/create-payment-link">
    Publique uma URL reutilizável com a mesma configuração de checkout.
  </Card>
</CardGroup>
