> ## 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.

# Módulo de pagamentos expressos

> Exiba botões de checkout acelerado abaixo do botão principal de checkout no drawer do Upcart.

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

Este recurso permite mostrar as opções de pagamento expresso da Shopify (como Shop Pay, Apple Pay ou Google Pay) para uma experiência de checkout mais rápida usando os métodos de pagamento salvos do comprador.

Os botões de checkout expresso ou acelerado ajudam clientes recorrentes a concluir as compras mais rapidamente, pulando a inserção manual das informações de pagamento e envio. Esses botões aparecem **abaixo do botão principal de Checkout** no carrinho e são fornecidos pela Shopify.

O Upcart oferece suporte visual e estrutural a esses botões, mas a **Shopify controla seu comportamento e visibilidade**.

📘 Saiba mais na [documentação da Shopify sobre checkouts acelerados](https://help.shopify.com/en/manual/payments/accelerated-checkouts) e nas [notas de lançamento da Shopify sobre botões de checkout acelerado](https://shopify.dev/changelog/developer-preview-accelerated-checkout-buttons-on-storefront-now-support-shopify-functions-bundles-and-have-improved-performance).

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-shop-pay-paypal-google.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=dece6cba6c512237980466fd1b02dd87" alt="Botões expressos de Shop Pay, PayPal e Google Pay abaixo do botão de checkout do Upcart" width="600" data-path="images/upcart/express-payments-shop-pay-paypal-google.png" />

<div id="getting-express-payments-to-show">
  # **Fazendo os pagamentos expressos aparecerem**
</div>

Para exibir botões de checkout acelerado dentro do Upcart, o seu tema da Shopify já precisa incluí-los na loja. Você pode fazer isso da seguinte forma:

1. **Adicionando um snippet ao código do seu tema**

   * Vá para **Online Store > Themes > Edit Code**
   * Abra o arquivo **layout/theme.liquid**
   * Encontre a tag de abertura `<body>` (não `</body>`)
   * Abaixo dessa tag, cole o seguinte código:

     ```
     {% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
     ```
2. Salve o arquivo

Aqui está um exemplo de como deve ficar:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-additional-checkout-buttons-liquid.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=25dd197de897db2a448ed1d15c4a8b1e" alt="O snippet Liquid additional checkout buttons adicionado abaixo da tag body no theme.liquid" width="1076" height="388" data-path="images/upcart/express-payments-additional-checkout-buttons-liquid.png" />

Depois disso, o Upcart poderá detectar e renderizar suas opções de pagamento expresso.

💡 Se você preferir não editar código, fale com o seu desenvolvedor ou com um [Shopify Expert](https://experts.shopify.com).

<div id="payment-gateways">
  # Gateways de pagamento
</div>

O card **Payment gateways** pertence ao módulo Express Payments **legado** — você só o vê se a sua loja ainda estiver na versão mais antiga. Ele lista os gateways expressos que o Upcart pode mostrar no carrinho e permite ativar ou desativar cada um e definir a ordem em que aparecem. Seis gateways são listados:

* Shop Pay
* PayPal
* Apple Pay
* Amazon Pay
* Meta Pay
* Google Pay — listado, mas marcado como **Coming Soon** e não selecionável

O Google Pay é deliberadamente retido: ele não é atualizado quando o carrinho muda, então mostraria um preço desatualizado para quem editar o carrinho antes de clicar nele. Os outros cinco podem ser ativados e reordenados — os gateways ativados ficam em uma lista ordenada; use as setas para cima e para baixo ao lado de cada linha para alterar a ordem, e os desativados ficam abaixo, onde clicar os adiciona de volta.

<Note>
  Ativar um gateway aqui não garante que ele apareça. Um gateway fica oculto no carrinho real se não estiver ativado na sua loja da Shopify ou se o comprador não for elegível para ele — um botão do Apple Pay, por exemplo, só aparece em um dispositivo e navegador compatíveis. Veja a [documentação de checkouts acelerados da Shopify](https://help.shopify.com/en/manual/payments/accelerated-checkouts) para saber como ativar gateways e as regras de elegibilidade de cada um.
</Note>

<div id="accelerated-checkout-buttons-design">
  # Design dos botões de checkout acelerado
</div>

Depois que seus botões estiverem configurados, você pode personalizar como eles aparecem dentro do Upcart.

<div id="button-height">
  ## **Altura do botão**
</div>

* **Default button height** e **Mobile button height** são definidos separadamente, cada um de **25 px a 55 px**
* Cada um tem um campo numérico e um controle deslizante ligados ao mesmo valor — use o que for mais fácil

<div id="checkout-button-alignment">
  ## **Alinhamento do botão de checkout**
</div>

* Escolha como os botões expressos são alinhados:

  * **Left**
  * **Right**
  * **Center**
  * **Space Between**

<div id="row-gap">
  ## **Espaçamento entre linhas**
</div>

* Defina o espaçamento vertical entre os botões empilhados, de **0 px a 40 px**

<div id="advanced-display-options">
  # **Opções avançadas de exibição**
</div>

<div id="hide-buyer-consent">
  ## **Ocultar consentimento do comprador**
</div>

Quando ativada, esta opção oculta a mensagem de consentimento do comprador normalmente exibida quando há um produto de assinatura no carrinho. Ela pode ajudar a reduzir a poluição visual se você já fornecer informações relacionadas em outro lugar.

<div id="render-cart-in-shadow-dom">
  ## **Renderizar o carrinho no Shadow DOM**
</div>

Ative isso para impedir que o CSS do seu tema da Shopify interfira na estilização do Upcart.\
Isso garante um design consistente em todos os navegadores e dispositivos.

Ativar isso também aplica a mesma configuração de **Settings > Cart settings > Advanced Settings**.

<div id="theme-compatibility-notes">
  ## **Notas de compatibilidade com temas**
</div>

* A Shopify agora impõe **regras de estilização rígidas** para os botões de checkout acelerado.
* A nova versão do Upcart oferece suporte completo a essas regras e seguirá o comportamento de estilização da Shopify.

⚠️ No módulo atual, um banner **Revert To Old Version** aparece no topo com um botão **Revert To Legacy Express Payments**. Ele só é necessário para temas desatualizados — reverter faz você voltar ao comportamento anterior à estilização da Shopify, então não mexa nele, a menos que o seu tema realmente precise.

Se você reverter, desmarque quaisquer opções de estilização salvas do módulo anterior para que não interfiram na nova versão.
