CSS customizado

Use o campo de CSS customizado do editor do checkout para ajustar a página de venda e as telas de resultado além do que os campos do editor cobrem. Esta página documenta o contrato de estilo v1: as variáveis e os ganchos que continuam estáveis entre as atualizações do checkout, e as regras que todo CSS precisa seguir.

Como o seu CSS é aplicado

O seu CSS vale só dentro do checkout. :root, html e body apontam para o próprio checkout, e qualquer outro seletor só acerta elementos dentro dele. Defina as variáveis em :root e estilize os blocos pelos ganchos data-checkout-part:

:root {
  --checkout-surface: #111827;
  --checkout-text: #f9fafb;
  --checkout-text-muted: #9ca3af;
  --checkout-border: #374151;
  --checkout-background: #030712;
  --checkout-radius: 10px;
}

[data-checkout-part="order-summary"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-checkout-part="pay-button"] {
  letter-spacing: 0.04em;
}

Num tema escuro como este, escureça também o fundo da página, com --checkout-background ou com o campo Cor de fundo do editor, senão ele continua claro. Os dois valem na página de venda e nas telas de resultado, e a variável vence o campo. Parte do texto fica sobre o fundo da página e parte sobre --checkout-surface, então escolha uma cor de texto que contraste com os dois. Os campos do cartão só acompanham essas cores no tema infoproduct; nos temas shop e stepped, mantêm o visual claro próprio.

Variáveis que você pode definir

Defina estas em :root. O padrão é o que os campos do tema mostram enquanto a variável não é definida. Outros elementos que leem a variável mantêm o próprio tom até você defini-la: no tema infoproduct, por exemplo, os campos usam #d4d4d8 e os cartões usam #e5e5e5. Definir a variável deixa os dois iguais.

Variável	O que muda	Padrão (shop · stepped · infoproduct)
`--checkout-surface`	Fundo dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário, dos depoimentos e dos cartões de brinde sem cores próprias do editor, inclusive o dropdown de país, e dos cartões das telas de resultado (Pix, cartão, boleto, confirmação e upsell). Os blocos do QR code e do código de pagamento dessas telas ficam brancos, para a leitura. O painel do método escolhido e o resumo no celular do tema shop usam `--checkout-surface-muted`. No tema infoproduct, os campos do cartão recebem esta cor quando o texto deles fica legível sobre ela (ver o gancho `field`); nos temas shop e stepped, eles mantêm o visual claro próprio. O fundo da página vem de `--checkout-background` ou do campo Cor de fundo, e o do header, do campo Cor do header. No desktop do tema shop, o resumo do pedido fica numa coluna com o fundo da página, levemente escurecido quando vem do campo do editor.	`#fff` em todos os temas
`--checkout-surface-muted`	Fundo secundário: o painel do método de pagamento escolhido (e, no tema infoproduct, o fundo em volta dos campos do cartão, quando os rótulos ficam legíveis sobre ele), as caixas de aviso do frete e do frete grátis, o botão de aplicar cupom quando o editor não define a cor dele, o resumo do pedido no celular do tema shop, os fundos ao passar o mouse nas listas e os blocos secundários das telas de resultado. Sem ela, vale `--checkout-surface`; sem as duas, o tom próprio de cada tema.	`#fafafa` · `#f5f6f7` · `#f7f7f7`
`--checkout-text`	Texto principal: o que o comprador digita nos campos, rótulos fixos, títulos das seções, nomes e valores do resumo do pedido e dos métodos de pagamento, e os ícones dos métodos (inclusive o do boleto). No resumo do tema stepped, só o total usa o texto principal; as demais linhas usam o secundário. Também vale para o texto dos depoimentos e das telas de resultado, fora dos blocos que mantêm cor própria (QR code, código de pagamento e avisos de espera, selo do cronômetro do upsell e painéis de status). A cor terciária do editor, quando definida, vence nos botões de recusar e aplicar e precisa contrastar com o fundo definido pelo CSS. Na faixa de adicionar do order bump no tema infoproduct, esta variável vence a cor de texto do botão do editor. Parte desse texto fica sobre o fundo da página (`--checkout-background` ou o campo Cor de fundo) e parte sobre as superfícies (`--checkout-surface` e `--checkout-surface-muted`), então o contraste precisa valer contra todos.	`oklch(21% 0.034 264.665)` em todos os temas
`--checkout-text-muted`	Texto secundário: rótulos e ícones dentro dos campos, avisos, descrições e preços riscados do resumo do pedido, e o rodapé dos temas shop e infoproduct. Como o texto principal, fica sobre o fundo da página e sobre as duas superfícies. O rodapé do tema stepped usa as cores próprias definidas no editor.	`oklch(55.1% 0.027 264.364)` em todos os temas
`--checkout-border`	Borda e linhas divisórias dos campos, da lista de métodos de pagamento, do resumo do pedido e dos cartões do formulário, inclusive o dropdown de país e os cartões das telas de resultado. Ao passar o mouse e no foco, o campo mantém as cores próprias. Nos temas stepped e infoproduct, o método de pagamento escolhido mantém a borda própria.	`#d9d9d9` · `#d9d9d9` · `#d4d4d8`
`--checkout-background`	Fundo da página, na venda e nas telas de resultado. Quando definida, vence o campo Cor de fundo do editor; sem ela, vale o campo; com o campo vazio, cada tela usa o tom próprio (branco ou um cinza bem claro). No desktop do tema shop, a coluna do resumo do pedido passa a usar a mesma cor, sem o tom um pouco mais escuro que ela tem com o campo do editor.	`#ffffff` em todos os temas
`--checkout-radius`	Cantos arredondados dos campos, dos métodos de pagamento, do frete, do cupom e do botão de pagar. Têm cantos próprios e não mudam: os campos, o frete e o cupom do tema infoproduct, e os métodos de pagamento dos temas stepped e infoproduct. No botão de pagar, o raio definido no editor vence esta variável.	`5px` em todos os temas

Variáveis que você pode ler

Estas trazem valores dos campos do editor. Use-as dentro de var(...) nas suas regras e mude-as no editor.

Variável	O que muda	Campo do editor	Padrão (shop · stepped · infoproduct)
`--checkout-primary`	Cor primária do editor: foco dos campos, destaques e botão de pagar quando o editor não define a cor do botão. No dropdown de país e nos diálogos, use com valor de reserva: `var(--checkout-primary, #0066cc)`.	Cor primária	`#0066cc` · `#16a34a` · `#0066cc`
`--checkout-primary-foreground`	Cor do texto sobre a cor primária, calculada a partir dela: branco, ou preto quando o branco não tem contraste suficiente.	Cor primária	`#ffffff` · `#000000` · `#ffffff`
`--checkout-font`	Família da fonte escolhida no editor. Sem fonte escolhida, a variável fica indefinida e a página usa Inter, então use sempre com valor de reserva: `var(--checkout-font, sans-serif)`.	Tipografia	`Inter` em todos os temas

[data-checkout-part="order-summary"] {
  border-top: 3px solid var(--checkout-primary, #0066cc);
  font-family: var(--checkout-font, sans-serif);
}

Ganchos

Cada gancho é um atributo num bloco que já existe na página de venda. Aponte para ele com o seletor de atributo.

Gancho	Bloco	Temas	Protegido
`[data-checkout-part="header"]`	Faixa do topo com o logo. Só aparece quando há logo. No tema stepped, também aparece nas páginas de resultado, fora do contrato.	shop, stepped	Não
`[data-checkout-part="logo"]`	Imagem do logo no header. No tema stepped, também aparece nas páginas de resultado, fora do contrato.	shop, stepped	Não
`[data-checkout-part="form"]`	Formulário: dados do comprador, pagamento e botão de pagar.	shop, stepped, infoproduct	Sim
`[data-checkout-part="field"]`	Cada campo de texto ou de seleção do formulário. Os de dados do comprador e de endereço são protegidos; o do cupom não. Os campos do cartão ficam num iframe, sem gancho. No tema infoproduct, recebem `--checkout-surface`, `--checkout-surface-muted`, `--checkout-text`, `--checkout-text-muted` e `--checkout-border` definidas em `:root`, com três limites: cor transparente ou semitransparente é ignorada; um fundo só vale se o texto sobre ele tiver contraste de pelo menos 3, senão o par volta às cores do tema; e, se o CSS for desligado por esconder algo, o cartão volta às cores do tema. Nos temas shop e stepped, mantêm o visual claro próprio.	shop, stepped, infoproduct	Sim
`[data-checkout-part="payment-methods"]`	Lista de métodos de pagamento.	shop, stepped, infoproduct	Sim
`[data-checkout-part="pay-button"]`	Botão de pagar. No tema stepped, fica na etapa de pagamento, abaixo do método escolhido.	shop, stepped, infoproduct	Sim
`[data-checkout-part="order-summary"]`	Resumo do pedido. Pode aparecer mais de uma vez na página, em versões para desktop e para celular. No tema shop, também aparece na página de confirmação, fora do contrato.	shop, stepped, infoproduct	Sim
`[data-checkout-part="product"]`	Cada produto listado no resumo do pedido. No tema infoproduct, também no topo do cartão de compra. No tema shop, também na página de confirmação, fora do contrato.	shop, stepped, infoproduct	Não
`[data-checkout-part="footer"]`	Rodapé. No tema stepped, só aparece quando o editor tem conteúdo para ele e também aparece nas páginas de resultado, fora do contrato.	shop, stepped, infoproduct	Não

Os blocos protegidos guardam o que o comprador precisa ver: campos, preços e o botão de pagar. Se o seu CSS esconder ou cobrir esse conteúdo, o checkout desliga o seu CSS inteiro.

Telas de resultado

As variáveis de cor também valem nas telas que o comprador vê depois de pagar: Pix, cartão, boleto, assinatura, a confirmação de cada tema, o upsell e o resumo pós-checkout.

Fundo da página: o mesmo da página de venda. --checkout-background vence quando definida; sem ela, vale o campo Cor de fundo do editor, e com o campo vazio cada tela mantém o tom próprio, branco ou um cinza bem claro.
Blocos com cor própria: estes ficam como estão, seja qual for o seu CSS:
- o cartão do QR code do Pix, as caixas de código e os botões de copiar;
- o bloco do boleto, inclusive o QR code dele no Peru;
- os avisos de “aguardando confirmação” dentro desses blocos;
- o selo do cronômetro do upsell;
- o balão do pino no mapa;
- os painéis de status.
Cor terciária: quando o editor define essa cor, ela vence nos botões de recusar e aplicar, então precisa contrastar com o fundo definido pelo seu CSS.
Ganchos: só têm garantia na página de venda. Quando um deles também aparece numa tela de resultado, lá ele fica fora do contrato.

O que fica nos campos do editor

Defina estes no editor, não no CSS. A única exceção é o fundo da página:

cor primária
fundo da página: o campo Cor de fundo do editor, que também vale nas telas de resultado e que o seu CSS sobrescreve quando define --checkout-background
cor do header
cor e raio dos cantos do botão de pagar
fonte
logo, banner e imagens, porque url() não é permitido no CSS

Regras de estilo

Todo CSS precisa seguir estas regras. Quando alguma é quebrada, o editor não salva e lista cada problema com a linha e a coluna.

Tamanho: até 50 000 caracteres. O editor conta em bytes, então caracteres acentuados ocupam mais de um. Depois de restrito ao checkout, o CSS também tem teto de 150 000 caracteres.
At-rules: só @media, @supports, @container e @keyframes. Qualquer outra, como @import, @font-face, @namespace, @layer, @page ou @property, é recusada.
Sem url(), em nenhuma propriedade.
Funções: só estas são permitidas. Qualquer outra, como image-set(), image() ou attr(), é recusada.
- cores: rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color(), color-mix(), light-dark()
- variáveis e ambiente: var(), env()
- cálculo: calc(), -webkit-calc(), min(), max(), clamp(), round(), mod(), rem(), abs(), sign()
- gradientes: linear-gradient(), radial-gradient(), conic-gradient(), as versões repeating- e as formas com prefixo -webkit- de todos eles
- transformações: matrix(), matrix3d(), perspective(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), skew(), skewX(), skewY(), translate(), translate3d(), translateX(), translateY(), translateZ()
- filtros: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()
- formas: inset(), circle(), ellipse(), polygon(), rect(), xywh()
- tempo, grid e contadores: cubic-bezier(), steps(), minmax(), repeat(), fit-content(), counter(), counters()
Seletores: sem :visited, sem seletor de atributo sobre value, sem seletor que comece com um combinador, como > a, e sem ~ ou + depois de :root, html ou body.
Sem aninhamento: sem & e sem regras ou at-rules dentro de outra regra.
Propriedades: behavior, -moz-binding e -webkit-box-reflect são recusadas.
Alcance e ampliação: nada pode pintar muito além do próprio elemento nem ampliá-lo muito. Nas propriedades abaixo, medidas vão em px ou rem (um rem conta como 16px), ou 0, e fatores de escala em números. Medidas em em ou %, unidades de viewport, calc(), min(), max(), clamp() e var() são recusados nelas, seja numa parte do valor, na cor ou no valor inteiro.
- box-shadow, text-shadow, outline, outline-width, outline-offset, o outset do border-image, text-decoration, text-decoration-thickness, text-underline-offset, -webkit-text-stroke e as formas com prefixo: cada medida vai até 64px. Para usar uma variável na cor, defina-a na própria propriedade, como outline-color: var(--checkout-primary).
- filter: os raios dos blur() somam no máximo 64px, e drop-shadow() é recusada. Filtros de cor, como brightness() ou grayscale(), não têm limite e aceitam var().
- transform, scale e zoom: cada declaração amplia no máximo 1,1×, contando scale(), matrix() e skew(). translate() e rotate() não têm limite e aceitam var() e calc(). perspective(), matrix3d() e qualquer perspective diferente de none são recusados.
Blocos protegidos: nada que esconda ou cubra o conteúdo de um gancho protegido. O editor não confere esta regra ao salvar: quem confere é o checkout, desligando o seu CSS, como diz o aviso abaixo dos ganchos.

Teste antes de salvar

Cole o seu CSS

Cole o CSS no campo de CSS customizado do editor do checkout.

Corrija o que o editor apontar

Cada problema mostra a linha e a coluna. Só dá para salvar quando a lista estiver vazia.

Confira a pré-visualização

A pré-visualização do editor aplica o mesmo CSS que o checkout publicado serve. Confira os blocos que você mudou no desktop e no celular.

Salve

Salve a configuração para publicar o CSS.

Se a pré-visualização aplica o seu CSS e logo depois volta ao padrão, o checkout desligou o seu CSS porque um campo, um preço ou o botão de pagar ficou invisível ou sem contraste. O caso típico é texto claro sobre o fundo da página ainda claro: defina --checkout-background ou escureça o campo Cor de fundo.

Use com uma IA

Para reproduzir o visual de outro checkout, copie o prompt abaixo na IA que você usa. Troque tudo o que está entre colchetes pelo checkout de referência e pelos valores atuais do seu editor, e anexe prints da referência. A resposta vem em duas partes: os valores vão para os campos do editor e o CSS para o campo de CSS customizado. Depois, teste na pré-visualização como acima.

Você é especialista em CSS. Quero que o meu checkout reproduza o estilo visual de um checkout de referência. O meu checkout aceita mudanças só em dois lugares: nos campos do editor e num bloco de CSS customizado que segue as regras abaixo.

## Checkout de referência
Link: [cole aqui o link do checkout de referência]
Prints: [anexe prints do checkout de referência, no computador e no celular]
Anexe os prints mesmo mandando o link: nem toda IA consegue abrir links.

## Meu checkout hoje
Modelo: [Shop, Stepped ou Infoproduct]
Campos do editor, com os valores atuais:
- Cor de fundo: [valor]
- Cor primária: [valor]
- Cor de fundo do cabeçalho: [valor]
- Tipografia: [valor]
- Arredondamento do botão: [valor em px]
Fontes disponíveis no editor: Inter, Roboto, Open Sans, Montserrat, Poppins, Lato, Nunito, Source Sans 3, Raleway, Work Sans, Rubik.

## O que o CSS pode usar
Variáveis que o CSS pode mudar, nos valores padrão do tema shop (no tema infoproduct, a borda padrão é #d4d4d8):
```css
:root {
  --checkout-surface: #fff;
  /* --checkout-surface-muted: #fafafa; sem ela, segue --checkout-surface */
  --checkout-text: oklch(21% 0.034 264.665);
  --checkout-text-muted: oklch(55.1% 0.027 264.364);
  --checkout-border: #d9d9d9;
  /* --checkout-background: #ffffff; só se o CSS for mudar o fundo da página; vence a Cor de fundo */
  --checkout-radius: 5px;
}
```
- `--checkout-surface`: fundo dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário, dos depoimentos e dos cartões das telas de resultado, cujos blocos do QR code e do código de pagamento ficam brancos. No modelo Infoproduct, os campos do cartão recebem essa cor se ela for opaca e se o texto deles tiver contraste de pelo menos 3 sobre ela; senão, o cartão fica com as cores do tema. No Shop e no Stepped, mantêm o visual claro próprio. O fundo do cabeçalho vem do editor.
- `--checkout-surface-muted` (opcional, só para um tom diferente em painéis e avisos): fundo secundário: o painel do método de pagamento escolhido (e, no modelo Infoproduct, o fundo em volta dos campos do cartão, se for opaco e os rótulos tiverem contraste de pelo menos 3 sobre ele), as caixas de aviso do frete, o resumo do pedido no celular do modelo Shop, os fundos ao passar o mouse e os blocos secundários das telas de resultado.
- `--checkout-text`: texto principal e ícones dos métodos de pagamento, na página de venda e nas telas de resultado. Fica sobre o fundo da página e sobre as duas superfícies, então precisa contrastar com todos.
- `--checkout-text-muted`: texto secundário: rótulos, avisos, descrições e preços riscados.
- `--checkout-border`: borda e linhas divisórias dos campos, da lista de métodos de pagamento, do resumo do pedido, dos cartões do formulário e dos cartões das telas de resultado.
- `--checkout-background` (opcional, só se o CSS mudar o fundo da página): fundo da página. Quando definida, vence o campo Cor de fundo, na página de venda e nas telas de resultado.
- `--checkout-radius`: cantos arredondados dos campos, dos métodos de pagamento, do frete, do cupom e do botão de pagar.

Para um tema escuro, escureça o fundo na Cor de fundo ou em `--checkout-background`, e deixe os dois coerentes: se definir a variável, devolva a mesma cor no campo Cor de fundo.

Variáveis só de leitura. O valor vem dos campos do editor, e o CSS só as usa em `var()`:
- `var(--checkout-primary, #0066cc)`: a cor primária.
- `var(--checkout-primary-foreground, #ffffff)`: cor do texto sobre a cor primária.
- `var(--checkout-font, sans-serif)`: a fonte escolhida no editor.

Ganchos estáveis, para usar como seletor:
- `[data-checkout-part="header"]`: faixa do topo com o logo (temas shop e stepped).
- `[data-checkout-part="logo"]`: imagem do logo (temas shop e stepped).
- `[data-checkout-part="form"]` (protegido): dados do comprador, pagamento e botão de pagar.
- `[data-checkout-part="field"]` (protegido): cada campo de texto ou de seleção.
- `[data-checkout-part="payment-methods"]` (protegido): lista de métodos de pagamento.
- `[data-checkout-part="pay-button"]` (protegido): botão de pagar.
- `[data-checkout-part="order-summary"]` (protegido): resumo do pedido.
- `[data-checkout-part="product"]`: cada produto do resumo do pedido.
- `[data-checkout-part="footer"]`: rodapé.

## Regras do CSS
- Defina as variáveis em `:root`.
- Use só as variáveis e os ganchos acima. As classes utilitárias do checkout continuam funcionando, mas podem mudar a qualquer momento: prefira os ganchos.
- Sem `@import`, `url()`, `image-set()` nem fontes externas. Das at-rules, só `@media`, `@supports`, `@container` e `@keyframes`.
- Funções: só cores (como `rgb()`, `hsl()`, `oklch()`, `color-mix()`), `var()`, `env()`, cálculo (como `calc()`, `min()`, `max()`, `clamp()`), gradientes, transformações, filtros, formas, `cubic-bezier()`, `steps()`, `repeat()`, `minmax()`, `fit-content()` e contadores. `attr()` e `image()` são recusadas.
- Sombras, contornos, decoração e traço do texto, o `outset` do `border-image` e o `blur()` usam medidas só em `px` ou `rem`, até 64px (os raios dos `blur()` somam), sem `em`, `%`, `calc()` ou `var()` nesses valores: ponha a cor na própria propriedade, como `outline-color`. `drop-shadow()` é recusada. `transform`, `scale` e `zoom` ampliam no máximo 1,1×, com fatores de escala em números; `translate()` e `rotate()` são livres. Sem `perspective`, `perspective()`, `matrix3d()` nem `-webkit-box-reflect`.
- Sem CSS aninhado, sem `:visited`, sem seletor sobre o atributo `value`, sem seletor que comece com um combinador e sem `~` ou `+` depois de `:root`, `html` ou `body`.
- Nada que esconda ou cubra campos, preços, consentimento ou o botão de pagar: se isso acontecer, o checkout desliga o CSS inteiro.
- Texto claro nas variáveis exige fundo escuro, em `--checkout-background` ou na Cor de fundo: parte do texto fica sobre o fundo da página, e no desktop do modelo Shop a coluna do resumo do pedido usa esse fundo. Deixar blocos transparentes não escurece o fundo.
- Até 50.000 bytes.
- Logo, banner e imagens vêm dos campos do editor, porque `url()` é bloqueado.

## Resposta
Devolva duas partes:
1. Os valores para os campos do editor: Cor de fundo, Cor primária, Cor de fundo do cabeçalho, Tipografia, Arredondamento do botão. As cores vão em hexadecimal de 6 dígitos (#RRGGBB), a fonte precisa ser uma das disponíveis e o arredondamento do botão é um número inteiro de 0 a 50, em px.
2. Um único bloco de CSS que use só as variáveis e os ganchos acima. No `:root`, inclua só as variáveis cujo valor mudar.

Classes utilitárias

Seletores escritos sobre as classes utilitárias do checkout, como .bg-white, continuam funcionando, mas não fazem parte do contrato e podem mudar em qualquer atualização do checkout. Prefira os ganchos e as variáveis desta página.

Esta página documenta o contrato de estilo v1. Uma mudança nas variáveis ou nos ganchos sobe a versão do contrato.

Comece com Payment Element

Construa o checkout de cartão

Lançamento e migração

Personalize o checkout

Como o seu CSS é aplicado

Variáveis que você pode definir

Variáveis que você pode ler

Ganchos

Telas de resultado

O que fica nos campos do editor

Regras de estilo

Teste antes de salvar

Use com uma IA

Classes utilitárias

​Como o seu CSS é aplicado

​Variáveis que você pode definir

​Variáveis que você pode ler

​Ganchos

​Telas de resultado

​O que fica nos campos do editor

​Regras de estilo

​Teste antes de salvar

​Use com uma IA

​Classes utilitárias

Como o seu CSS é aplicado

Variáveis que você pode definir

Variáveis que você pode ler

Ganchos

Telas de resultado

O que fica nos campos do editor

Regras de estilo

Teste antes de salvar

Use com uma IA

Classes utilitárias