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

# Personalizar Checkout

> Personalize a aparência e comportamento da página de checkout. Atualize a experiência de compra do cliente com configurações visuais e componentes customizados.

#### Escopo

```bash theme={null}
    write products
```

<Note>
  O checkout é construído a partir de uma estrutura declarativa compatível com o Checkout Builder, permitindo experiências diferentes para desktop e mobile. Para o formato completo — tipos de bloco, atributos válidos e como imagens funcionam — veja [Estrutura do Checkout](/conceitos/checkout-builder).
</Note>

<Warning>
  Sempre deve existir um checkout padrão ativo para o produto. Para alterar o checkout principal, defina outro checkout com `"default": true`.
</Warning>

## Casos de uso

* **Criar checkouts com branding personalizado** — adapte cores, logo e identidade visual da página de compra.
* **Exibir layouts diferentes por dispositivo** — ofereça experiências otimizadas para desktop e mobile.
* **Destacar ofertas específicas** — construa páginas focadas em upsells, downsells ou ofertas principais.
* **Construir experiências otimizadas para conversão** — teste elementos, copy e estrutura que convertem mais.
* **Testar variações de checkout** — crie e compare diferentes versões da página de compra.

## Exemplo de configuração

<Accordion title="Expandir exemplo completo de config">
  ```json theme={null}
  {
    "mobile": {
      "rows": [
        {
          "id": "369db380-d652-4b4f-bf0e-31710f1cfc03",
          "type": "row",
          "layout": [12],
          "columns": [
            {
              "id": "e0253c14-37ea-47f7-b77a-e260cb814a6f",
              "type": "column",
              "components": []
            }
          ]
        },
        {
          "id": "7e8b3918-b6a8-4d10-b66a-024f5812d7e1",
          "type": "row",
          "layout": [12],
          "columns": [
            {
              "id": "fb131cd7-57e8-4981-931a-9d71a3fe6ca9",
              "type": "column",
              "components": [
                {
                  "id": "cff7c565-5957-4330-be70-b804878827dd",
                  "type": "checkout",
                  "attributes": {}
                }
              ]
            }
          ]
        }
      ],
      "extra": {
        "chat": {
          "id": "8f5c57d5-1548-4474-a5fd-fa91d408cdd1",
          "type": "chat",
          "attributes": {
            "enabled": false,
            "provider": "whatsapp",
            "accountId": ""
          }
        },
        "exitPopup": {
          "id": "9f8d9444-d0f5-429d-9c06-fd2fa22d8adc",
          "type": "exitPopup",
          "attributes": {
            "enabled": false,
            "title": "Temos uma oferta especial para você!",
            "actionLabel": "Sim, eu quero!",
            "description": "Escreva algo aqui para convencer o cliente a não sair da página",
            "actionOnClick": "offer",
            "textButtonColor": "#ffffff",
            "backgroundButtonColor": "#0f7865"
          }
        },
        "notification": {
          "id": "26c584c9-6006-4d46-b7a6-e69197f1db8f",
          "type": "notification",
          "attributes": {
            "enabled": false
          }
        }
      },
      "settings": {
        "box": {
          "default": {
            "text": { "color": { "primary": "#000000", "secondary": "#000000" } },
            "header": { "text": { "color": { "primary": "#000000", "secondary": "#000000" } }, "background": { "color": "#D1D1D1" } },
            "background": { "color": "#EDEDED" }
          },
          "selected": {
            "text": { "color": { "primary": "#4B5563", "secondary": "#4B5563" } },
            "header": { "text": { "color": { "primary": "#ffffff", "secondary": "#ffffff" } }, "background": { "color": "#0B6856" } },
            "background": { "color": "#ffffff" }
          },
          "unselected": {
            "text": { "color": { "primary": "#4B5563", "secondary": "#4B5563" } },
            "header": { "text": { "color": { "primary": "#000000", "secondary": "#000000" } }, "background": { "color": "#D1D1D1" } },
            "background": { "color": "#EDEDED" }
          }
        },
        "font": { "family": "Roboto" },
        "form": { "background": { "color": "#ffffff" } },
        "icon": { "color": "#000000" },
        "text": { "color": { "active": "#0B6856", "primary": "#000000", "secondary": "#4B5563" } },
        "payButton": {
          "text": { "text": "PAGAR AGORA", "color": "#ffffff" },
          "color": "#0B6856"
        },
        "background": { "color": "#f1f1f1", "cover": false, "fixed": false, "image": null, "repeat": false },
        "paymentOptions": {
          "button": {
            "selected": { "icon": { "color": "#ffffff" }, "text": { "color": "#ffffff" }, "background": { "color": "#0B6856" } },
            "unselected": { "icon": { "color": "#000000" }, "text": { "color": "#4B5563" }, "background": { "color": "#ffffff" } }
          }
        }
      }
    },
    "offers": ["zyb57dg"],
    "default": true
  }
  ```
</Accordion>


## OpenAPI

````yaml PUT /public_api/products/{product_pk}/checkouts/{id}/
openapi: 3.0.3
info:
  title: Cakto API
  version: 1.0.0
  description: Documentação da API pública do Cakto.
servers:
  - url: https://api.cakto.com.br
    description: Cakto API
security: []
paths:
  /public_api/products/{product_pk}/checkouts/{id}/:
    put:
      tags:
        - products
      description: |-
        Public API for managing checkouts, inherits from CheckoutRetrieveAPI,
        adds OAuth2 authentication and config validation.
      operationId: products_checkouts_update
      parameters:
        - in: path
          name: id
          schema:
            type: string
          required: true
        - in: path
          name: product_pk
          schema:
            type: string
          required: true
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CheckoutPublicRetrieve'
          application/x-www-form-urlencoded:
            schema:
              $ref: '#/components/schemas/CheckoutPublicRetrieve'
          multipart/form-data:
            schema:
              $ref: '#/components/schemas/CheckoutPublicRetrieve'
        required: true
      responses:
        '200':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/CheckoutPublicRetrieve'
          description: ''
        '401':
          description: Request não autenticado devido à ausência ou invalidez do token.
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/UnauthenticatedError'
              examples:
                Token ausente ou inválido:
                  $ref: '#/components/examples/UnauthenticatedErrorExample'
      security:
        - OAuth Token: []
components:
  schemas:
    CheckoutPublicRetrieve:
      type: object
      properties:
        id:
          type: integer
          readOnly: true
        name:
          type: string
          title: Nome
          description: Nome do checkout
          maxLength: 255
        config:
          nullable: true
          title: Configuração
          description: Configuração personalizada do checkout em formato JSON
        offers:
          type: string
          readOnly: true
        default:
          type: boolean
          title: Padrão
          description: Define se este é o checkout padrão do produto
        updatedAt:
          type: string
          format: date-time
          readOnly: true
          title: Data de atualização
          description: Data e hora da última atualização
        createdAt:
          type: string
          format: date-time
          readOnly: true
          title: Data de criação
          description: Data e hora de criação
        visits:
          type: integer
          maximum: 2147483647
          minimum: -2147483648
          title: Visitas ao checkout
          description: Quantidade de visitas ao checkout
      required:
        - createdAt
        - id
        - name
        - offers
        - updatedAt
    UnauthenticatedError:
      type: object
      properties:
        detail:
          type: string
  examples:
    UnauthenticatedErrorExample:
      summary: Token ausente ou inválido
      description: Token ausente ou inválido
      value:
        detail: As credenciais de autenticação não foram fornecidas.
  securitySchemes:
    OAuth Token:
      type: http
      scheme: bearer
      in: header
      name: Authorization
      description: >-
        Token de autenticação do tipo `Bearer {access_token}`, onde
        `{access_token}` é o token obtido no fluxo de
        [autenticação](/authentication).

````