Express payments setup

Express payments are Shopify's accelerated, one-tap checkout buttons — PayPal, Apple Pay, Amazon Pay, Meta Pay, Shop Pay, and Google Pay — surfaced inside the Llama Cart footer so shoppers can pay without going through the full checkout flow. They're turned off by default and require a one-time theme snippet to work.

This guide explains what express payments do, how to install the required snippet, every styling option in the Payments tab, how the buttons render on the storefront, and the edge cases that trip merchants up most often.

What express payments are

Shopify generates a set of dynamic, wallet-based checkout buttons for each storefront based on your Shopify Payments configuration and the shopper's context. The Llama Cart captures those real buttons and repositions them into the cart drawer, so shoppers see familiar, fully functional payment buttons instead of a custom imitation.

Because they're Shopify's own buttons, clicking one starts that wallet's express checkout exactly as it would anywhere else on your store — the Llama Cart only changes where the button appears and how it looks.

Step 1 — Add the required theme snippet

The Llama Cart can't invent payment buttons. It uses a MutationObserver to watch the page for Shopify's real dynamic checkout buttons, then moves them into the drawer. If those buttons never appear on the page, there is nothing to capture — so you must add a small snippet that tells Shopify to render the dynamic checkout buttons into a hidden container the app can read from.

This is a one-time change to your live theme.

{% if additional_checkout_buttons %}
  <style>.lcu-dynamic-express-payments {display: none;}</style>
  <div class="additional-checkout-buttons lcu-dynamic-express-payments"> </div>
{% endif %}

For the full walkthrough with screenshots, open the in-app guide: in the Payments tab, click Open step-by-step guide to setup Express Payments.

Step 2 — Enable and order gateways

Open the Customizer and go to the Payments tab. Under Payment Gateways you'll find the six supported gateways, each with an enable checkbox and a pair of up/down reorder arrows.

To configure them:

Step 3 — Style the buttons

Below the gateway list, the Payments tab gives you full control over how the button stack looks. These settings apply to whichever buttons end up rendering.

Alignment options in detail

Hide buyer consent

When a subscription product is in the cart, accelerated checkout buttons display a line of buyer-consent / subscription text (the disclosure that the shopper is agreeing to a recurring purchase). Hide Buyer Consent removes that text from the express-payment area in the drawer.

How the buttons render

Understanding the render flow helps you diagnose "the buttons aren't showing" problems.

• Capture, don't recreate. On the storefront, the cart watches the snippet's container for Shopify's dynamic checkout buttons, then moves each enabled button into its slot in the drawer footer and reveals it. Once all expected buttons are captured, the observer disconnects.
• First-add refresh. When a shopper adds their first item to an empty cart, the app re-fetches the current page's HTML to pull a fresh copy of the dynamic checkout buttons. This is necessary because Shopify only generates wallet buttons once there's something to buy — so the very first add triggers a refresh to grab the up-to-date buttons.
• Customizer preview is static. Inside the Customizer, the Payments tab shows static preview icons for the enabled gateways in your chosen order, sizing, and spacing — not live, clickable wallet buttons. This lets you lay out the design without a real cart, but it means the preview always shows every enabled gateway, even ones a real shopper might not be eligible for.

Recipes

Edge cases & troubleshooting

Conflicts with the theme or other apps

Shopify's additional_checkout_buttons can only be output in one location on a page. If your theme already renders dynamic checkout buttons, or another app injects its own additional-checkout-buttons container, adding the Llama Cart snippet creates a second source of the same buttons. The result is duplicated buttons, buttons appearing outside the drawer, or no buttons at all because the markup collides.

To fix it:

• Add the Llama Cart snippet only once.
• If another app or your theme already prints additional_checkout_buttons, remove or disable that copy so only one container exists, then keep the Llama Cart snippet.
• After any change, re-test on the live storefront by adding a product and inspecting the cart drawer.

Advanced: track express payment clicks

If you run custom analytics, you can listen for both standard checkout clicks and express-payment clicks with a single DOM event, lcu:checkout:clicked, dispatched on document. For express buttons the event detail includes a type of 'express_payment' and the provider that was clicked (shop_pay, google_pay, paypal, amazon_pay, or apple_pay), along with the current cart object and a timestamp. See the developer guide on listening for checkout and express payment button clicks for the full payload.

Where to go next