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

# Botões de pagamento expresso não clicáveis no Upcart

> Este artigo explica como solucionar problemas com os botões de checkout expresso da Shopify quando eles não funcionam no Upcart

⚠️ **Aviso importante**

O snippet de tema abaixo se aplica a ambas as versões dos módulos de carrinho do Upcart — ele faz a Shopify renderizar os botões de checkout acelerado na página, que é o que o Upcart precisa, independentemente da versão do módulo.

O seletor `.additional-checkout-buttons` abaixo é a classe da própria Shopify no contêiner de checkout acelerado, não uma classe de módulo do Upcart, então ele é o mesmo em qualquer versão do carrinho.

<div id="overview">
  ## Visão geral
</div>

Às vezes, os botões de checkout expresso não são clicáveis ou não aparecem dentro do Upcart. Este é um problema comum causado pela forma como a **Shopify controla a renderização dos botões de pagamento expresso** nos temas.

Este guia explica por que isso acontece e o que você pode fazer para corrigir.

***

<div id="required-setup-for-the-new-module">
  ## Configuração necessária para o novo módulo
</div>

⚠️ **Importante:** estas etapas se aplicam ao **novo módulo Express Payments** do Upcart, não à versão legada.

Para fazer os botões de checkout expresso funcionarem corretamente no Upcart, você precisa adicionar um pequeno snippet de código ao seu tema da Shopify. Sem esse snippet, a Shopify não carregará os botões de pagamento corretamente dentro do cart drawer. Antes de fazer essas alterações, verifique se os métodos de pagamento relevantes (por exemplo, Shop Pay, PayPal, Apple Pay, Google Pay) estão ativados nas configurações da sua conta no Shopify Admin. Sem ativar esses métodos, os botões não ficarão visíveis. Além disso, garanta que o snippet esteja colocado diretamente abaixo da tag de abertura `<body>` no arquivo do seu tema (por exemplo, `<body class="...">`). Se colocado incorretamente, como depois da tag de fechamento `</body>`, os botões de checkout expresso podem não funcionar corretamente.

***

<div id="how-to-fix">
  ## Como corrigir
</div>

1. Vá para o seu **Shopify Admin**.
2. Navegue até **Online Store > Themes > Edit Code**.
3. Abra **layout/theme.liquid**, encontre a linha `<body>` e adicione o snippet abaixo em uma nova linha diretamente abaixo dela. Ele precisa ficar aí — não em `cart-drawer.liquid` nem em outro lugar — porque os botões precisam existir em todas as páginas em que o carrinho pode abrir.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{% if additional_checkout_buttons %} <div style="display: none !important">     {{ content_for_additional_checkout_buttons }} </div> {% endif %}
```

1. Salve as alterações e atualize a sua loja.
2. Reabra o cart drawer para verificar se os botões de checkout expresso (como Shop Pay, PayPal, Apple Pay ou Google Pay) agora aparecem e são clicáveis.

Consulte o **Guia do** [**módulo Express Payments**](/pt/upcart/express_payments_module) para instruções completas de configuração.

***

<div id="why-this-happens">
  ## Por que isso acontece
</div>

Os botões de pagamento expresso são totalmente gerenciados pela **Shopify**, não pelo Upcart. Isso significa que:

* O Upcart não renderiza os próprios botões. Ele **clona os botões** de checkout acelerado **da Shopify** da página para dentro do cart drawer, e é por isso que eles precisam estar presentes na página em primeiro lugar — é isso que o snippet de tema acima garante.
* O **Apple Pay** só aparecerá em dispositivos Apple com o Apple Pay configurado.
* O Upcart não controla quais botões expressos aparecem, já que o conteúdo e a funcionalidade são gerenciados pela Shopify.

🎨 **Nota:**\
Os botões no Upcart atuam como contêineres visuais, enquanto a Shopify controla sua exibição e comportamento. O Upcart não pode modificar sua aparência ou função.

***

<div id="common-problems-and-fixes">
  ## Problemas comuns e correções
</div>

<div id="1-the-buttons-arent-rendered-on-the-page">
  ## 1. Os botões não são renderizados na página
</div>

Esta é a causa mais comum. O Upcart clona os botões da Shopify a partir da página; portanto, se a página não os renderiza, não há nada para clonar e o carrinho mostra um espaço vazio.

**O que fazer:**

* Adicione o snippet de tema de **Como corrigir** acima, diretamente abaixo da linha `<body>` em `layout/theme.liquid`.

<Warning>
  **Não remova os botões expressos do seu próprio tema para "evitar um conflito".** O Upcart depende da presença deles. Removê-los do tema, ou desativá-los nas configurações do tema, remove a fonte de onde o Upcart clona — o que piora esse problema em vez de melhorar.
</Warning>

***

<div id="3-css-is-blocking-the-buttons">
  ## 3. O CSS está bloqueando os botões
</div>

Alguns temas ocultam os botões expressos por padrão usando CSS. Por exemplo:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.additional-checkout-buttons {   display: none !important; }
```

**O que fazer:**

* Revise o CSS do seu tema.
* Peça ao desenvolvedor do seu tema para garantir que nenhuma regra de CSS esteja ocultando ou desativando os botões no drawer do Upcart.

***

<div id="4-legacy-settings-are-interfering">
  ## 4. Configurações legadas estão interferindo
</div>

Se você usou a versão mais antiga do módulo Express Payments, configurações salvas podem entrar em conflito com a nova configuração.

**O que fazer:**

* Abra o módulo Express Payments antigo (se ainda estiver visível).
* Desmarque quaisquer opções anteriores e salve.
* Teste novamente usando o novo módulo.

***

<div id="still-having-issues">
  ## Ainda com problemas?
</div>

<div id="disable-shadow-dom-in-upcart">
  ## Desative o Shadow DOM no Upcart
</div>

Em alguns casos, os botões de pagamento expresso podem não carregar ou não atualizar porque o **Shadow DOM** está ativado no Upcart.

**O que é Shadow DOM?**\
O Shadow DOM isola o Upcart do restante do código da sua loja para melhorar a estabilidade. No entanto, em casos raros, essa separação pode impedir que os botões expressos da Shopify sejam atualizados corretamente.

**Como desativar o Shadow DOM:**

1. Vá para **Upcart > Cart Editor > Settings > Cart settings** e expanda **Advanced Settings**.
2. Desmarque **Render Cart in Shadow DOM**.
3. Salve e teste novamente.

⚠️ **Importante:**\
Sempre teste seu carrinho depois de desativar o Shadow DOM, pois isso pode afetar como outros apps ou elementos do tema interagem com o Upcart.

💡 **Nota:** desativar o Shadow DOM pode corrigir esse problema, mas pode introduzir conflitos de CSS com o seu tema. Veja o documento [Configuração de Shadow DOM](/pt/upcart/render_cart_in_shadow_dom_setting) para a compensação completa.

***

<div id="need-more-help">
  ## Precisa de mais ajuda?
</div>

Se o problema persistir após concluir estas etapas:

* Entre em contato com o **desenvolvedor do seu tema** para ajudar a remover código ou configurações conflitantes.
* Você também pode falar com um [**Shopify Expert**](https://www.shopify.com/partners/directory) para edições avançadas de tema ou assistência de integração.

***

<div id="references">
  ## Referências
</div>

* Ajuda da Shopify – Checkouts acelerados
* Documentação para desenvolvedores da Shopify – Botões de pagamento expresso
