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

# Express payments-module

> Toon knoppen voor versnelde checkout onder de hoofdknop voor checkout in de Upcart-drawer.

<div id="overview">
  # Overzicht
</div>

Met deze functie kun je de Express Payment-opties van Shopify tonen (zoals Shop Pay, Apple Pay of Google Pay) voor een snellere checkout-ervaring met de opgeslagen betaalmethoden van de koper.

Express- of versnelde checkout-knoppen helpen terugkerende klanten om aankopen sneller af te ronden door het handmatig invoeren van betaal- en verzendgegevens over te slaan. Deze knoppen verschijnen **onder de hoofdknop Checkout** in de cart en worden aangedreven door Shopify.

Upcart ondersteunt deze knoppen visueel en structureel, maar **Shopify bepaalt hun gedrag en zichtbaarheid**.

📘 Lees meer in [Shopify's documentatie over versnelde checkouts](https://help.shopify.com/en/manual/payments/accelerated-checkouts) en [Shopify's release-opmerkingen over versnelde checkout-knoppen](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="Express-knoppen voor Shop Pay, PayPal en Google Pay onder de Upcart checkout-knop" width="600" data-path="images/upcart/express-payments-shop-pay-paypal-google.png" />

<div id="getting-express-payments-to-show">
  # **Express Payments zichtbaar krijgen**
</div>

Om knoppen voor versnelde checkout in Upcart weer te geven, moet je Shopify-thema ze al op de storefront bevatten. Dit doe je door:

1. **Een snippet toe te voegen aan je themacode**

   * Ga naar **Online Store > Themes > Edit Code**
   * Open het bestand **layout/theme.liquid**
   * Zoek de openende `<body>`-tag (niet `</body>`)
   * Plak onder die tag de volgende code:

     ```
     {% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
     ```
2. Sla het bestand op

Hier is een voorbeeld van hoe het eruit moet zien:

<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="Het Liquid-snippet voor additional checkout buttons toegevoegd onder de body-tag in theme.liquid" width="1076" height="388" data-path="images/upcart/express-payments-additional-checkout-buttons-liquid.png" />

Zodra dit is gedaan, kan Upcart je express payment-opties detecteren en weergeven.

💡 Als je liever geen code bewerkt, neem dan contact op met je developer of een [Shopify Expert](https://experts.shopify.com).

<div id="payment-gateways">
  # Betaalgateways
</div>

De kaart **Payment gateways** hoort bij de **legacy** Express Payments-module — je ziet deze alleen als je winkel nog op de oudere versie zit. De kaart toont de express-gateways die Upcart in de cart kan weergeven, en laat je elke gateway in- of uitschakelen en de volgorde bepalen waarin ze verschijnen. Er staan zes gateways in de lijst:

* Shop Pay
* PayPal
* Apple Pay
* Amazon Pay
* Meta Pay
* Google Pay — wel vermeld, maar gemarkeerd als **Coming Soon** en niet selecteerbaar

Google Pay wordt bewust achtergehouden: de knop wordt niet ververst wanneer de cart wijzigt, waardoor iedereen die de cart bewerkt voordat erop wordt geklikt een verouderde prijs zou zien. De andere vijf kunnen worden ingeschakeld en herschikt — ingeschakelde gateways staan in een geordende lijst, gebruik de pijltjes omhoog en omlaag naast elke rij om de volgorde te wijzigen, en uitgeschakelde gateways staan eronder, waar klikken ze weer toevoegt.

<Note>
  Het inschakelen van een gateway hier garandeert niet dat deze wordt getoond. Een gateway wordt in de echte cart verborgen als deze niet is ingeschakeld in je Shopify-winkel, of als de shopper er niet voor in aanmerking komt — een Apple Pay-knop wordt bijvoorbeeld alleen getoond op een ondersteund apparaat en browser. Zie [Shopify's documentatie over versnelde checkouts](https://help.shopify.com/en/manual/payments/accelerated-checkouts) voor het inschakelen van gateways en de geschiktheidsregels per gateway.
</Note>

<div id="accelerated-checkout-buttons-design">
  # Design van versnelde checkout-knoppen
</div>

Zodra je knoppen zijn ingesteld, kun je aanpassen hoe ze in Upcart worden weergegeven.

<div id="button-height">
  ## **Knophoogte**
</div>

* **Default button height** en **Mobile button height** worden apart ingesteld, elk van **25 px tot 55 px**
* Elk heeft een getalveld en een slider die aan dezelfde waarde zijn gekoppeld — gebruik wat het makkelijkst is

<div id="checkout-button-alignment">
  ## **Uitlijning van de checkout-knop**
</div>

* Kies hoe de express-knoppen worden uitgelijnd:

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

<div id="row-gap">
  ## **Rij-afstand**
</div>

* Stel de verticale afstand tussen gestapelde knoppen in, van **0 px tot 40 px**

<div id="advanced-display-options">
  # **Geavanceerde weergaveopties**
</div>

<div id="hide-buyer-consent">
  ## **Toestemming koper verbergen**
</div>

Wanneer ingeschakeld, verbergt dit het toestemmingsbericht voor de koper dat normaal wordt weergegeven wanneer een abonnementsproduct in de cart zit. Dit kan visuele rommel verminderen als je gerelateerde informatie al elders aanbiedt.

<div id="render-cart-in-shadow-dom">
  ## **Cart renderen in Shadow DOM**
</div>

Schakel dit in om te voorkomen dat de CSS van je Shopify-thema de styling van Upcart verstoort.\
Dit zorgt voor een consistent design in alle browsers en op alle apparaten.

Als je dit inschakelt, wordt ook dezelfde instelling toegepast vanuit **Settings > Cart settings > Advanced Settings**.

<div id="theme-compatibility-notes">
  ## **Opmerkingen over themacompatibiliteit**
</div>

* Shopify hanteert nu **strikte stylingregels** voor versnelde checkout-knoppen.
* De nieuwe versie van Upcart ondersteunt deze regels volledig en volgt het stylinggedrag van Shopify.

⚠️ Op de huidige module verschijnt bovenaan een banner **Revert To Old Version** met een knop **Revert To Legacy Express Payments**. Deze is alleen nodig voor verouderde thema's — terugkeren zet je terug naar het gedrag van vóór de Shopify-styling, dus laat de knop met rust tenzij je thema het echt nodig heeft.

Als je toch terugkeert, haal dan het vinkje weg bij eventueel opgeslagen stylingopties van de vorige module, zodat ze de nieuwe versie niet verstoren.
