# Eenvoudige & Elegante Checkout (dfsimplecheckout): volledige gids

> Presentatie DataFirefly Simple Checkout vervangt de native checkout in 5 stappen van PrestaShop door een moderne one-page checkout, geïnspireerd op de checkouts van Shopify en Stripe. De module koppelt haar…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfsimplecheckout/>
- Taal: nl
- Bijgewerkt op: 2026-08-26
- Andere talen: [fr](https://www.datafirefly.com/documentation/dfsimplecheckout/index.md), [en](https://www.datafirefly.com/en/documentation/dfsimplecheckout/index.md), [es](https://www.datafirefly.com/es/documentation/dfsimplecheckout/index.md), [de](https://www.datafirefly.com/de/documentation/dfsimplecheckout/index.md), [it](https://www.datafirefly.com/it/documentation/dfsimplecheckout/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfsimplecheckout/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfsimplecheckout/index.md)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

## Presentatie

DataFirefly Simple Checkout vervangt de native checkout in 5 stappen van PrestaShop door een moderne one-page checkout, geïnspireerd op de checkouts van Shopify en Stripe. De module koppelt haar controller at runtime via de hook `actionDispatcher`: er wordt geen enkel override-bestand naar schijf geschreven, en uw bestaande overrides van derden op `OrderController` worden netjes overgeërfd.

Belangrijkste functies: lay-out in twee kolommen met permanent besteloverzicht, sociale login via Google en Facebook, adresaanvulling met Google Places, adaptief adresformulier per land, AJAX-kortingscode, drie aanpasbare kleuren en een distraction-free modus.

## Installatie

1. Ga in uw PrestaShop-backoffice naar **Modules → Modulebeheer → Een module installeren**.
2. Selecteer het bestand `dfsimplecheckout.zip`, gedownload vanuit uw DataFirefly-account.
3. Klik op **Installeren** en daarna op **Configureren**.
4. Leeg de PrestaShop-cache (**Geavanceerde instellingen → Prestaties → Cache legen**).
5. Bezoek de pagina `/order` van uw webshop met een product in de winkelwagen: de nieuwe checkout verschijnt meteen.

De module is compatibel met PrestaShop 8.0 → 9.x. Er is geen enkele themawijziging nodig. Bij het verwijderen wordt de native checkout automatisch hersteld.

## Algemene configuratie

### Kleuren

In het instellingentabblad van de module zijn drie kleuren te configureren:

- **Hoofdkleur**: knoppen, links, actieve statussen, geselecteerde keuzerondjes (standaard `#1a73e8`).
- **Hoverkleur van de knoppen**: hoverstatus van de primaire knoppen "Doorgaan", "Bestellen" (standaard `#1559b8`).
- **Accent- / succeskleur**: indicatoren van voltooide stappen, chip van een toegepaste kortingscode, label "Gratis" van de vervoerder, succesberichten (standaard `#008060`).

De drie waarden worden als CSS-variabelen geïnjecteerd (`--dfsc-primary`, `--dfsc-primary-hover`, `--dfsc-success`) en gevalideerd met een strikte hexadecimale regex.

### Logo

Vul de URL van een eigen logo in voor de header van de checkout; zonder waarde wordt het logo van de webshop gebruikt. Weergegeven afmetingen: maximaal 190×42 px.

### Distraction-free modus

De optie **Header en footer van het thema verbergen** (standaard actief) verwijdert de volledige header van het thema (menu, zoeken, winkelwagen) en de footer, uitsluitend op de pagina `/order`. De implementatie overschrijft de Smarty-blokken `header` en `footer` in onze template: bij een thema dat die standaardblokken niet gebruikt, heeft de optie gewoon geen effect en krijgt u nooit een witte pagina.

### Andere opties

- Veld voor een notitie aan de verkoper (aan/uit)
- Kortingscodeveld (aan/uit)
- Vertrouwensbadges: vrije HTML onder het besteloverzicht
- Juridische links onderaan de checkout (algemene voorwaarden, privacy, retouren, gedetecteerd via de native CMS-rollen)

## Sociale login met Google

### De inloggegevens aanmaken

1. Ga naar de [Google Cloud Console](https://console.cloud.google.com/) en maak (of selecteer) een project.
2. Maak in **APIs & Services → Credentials** een **OAuth client ID** aan van het type **Web application**.
3. Voeg bij **Authorized JavaScript origins** de URL van uw webshop toe (bijvoorbeeld `https://www.mijnwebshop.nl`), zonder pad en met het https-protocol.
4. Kopieer de gegenereerde **Client ID** (eindigt op `.apps.googleusercontent.com`).

### De module instellen

1. Activeer in de module-instellingen **Google Sign-In** en plak de Client ID.
2. Sla op en leeg de cache.
3. Op `/order` verschijnt de Google-knop boven de tabbladen "Ik ben een nieuwe klant / Ik heb al een account".

De flow: de klant klikt, kiest zijn Google-account, de module ontvangt een JWT-token en valideert dat aan serverzijde via het officiële endpoint `tokeninfo` (controle van audience, uitgever, vervaldatum en geverifieerd e-mailadres). Bestaat er een klantaccount met dat e-mailadres, dan wordt de klant ingelogd; zo niet, dan wordt automatisch een account aangemaakt met de voor- en achternaam uit het Google-profiel.

## Sociale login met Facebook

### De applicatie aanmaken

1. Maak op [Meta for Developers](https://developers.facebook.com/) een applicatie van het type **Consumer** aan.
2. Voeg het product **Facebook Login** toe en registreer uw domein in de instellingen.
3. Haal de **App ID** en de **App Secret** op in **Settings → Basic**.

### De module instellen

Activeer **Facebook Login** in de instellingen, plak de App ID en de App Secret en sla op. De servervalidatie verloopt in twee stappen: `debug_token` (controleert dat het token wel degelijk bij uw applicatie hoort) en daarna het ophalen van het profiel met de handtekening `appsecret_proof` (HMAC-SHA256). De App Secret verlaat nooit uw server.

## Adresaanvulling met Google Places

1. Activeer in de Google Cloud Console de API's **Places API** en **Maps JavaScript API**.
2. Maak een API-sleutel aan en beperk die tot uw domein (aanbevolen).
3. Activeer in de module **Adresaanvulling** en plak de sleutel.

Het veld "Adres" van het formulier stelt dan al typend suggesties voor. Het kiezen van een suggestie vult straat, adrestoevoeging, plaats, postcode, land en waar nodig de regio vooraf in. De suggesties blijven beperkt tot de actieve landen van uw webshop (tot 5 landen, de limiet van de Google-API).

De Places-API wordt door Google gefactureerd boven het gratis maandquotum. Voor een webshop met een gemiddeld volume volstaat het gratis quotum doorgaans.

## Adaptief adresformulier per land

Het adresformulier past zich automatisch aan het gekozen land aan:

- Het standaardland van de dropdown is het land dat in **Internationaal → Lokalisatie** van uw backoffice is ingesteld (en niet het eerste land op alfabet).
- Het veld **Staat/Regio** verschijnt alleen voor landen die er een hebben (VS, Spanje, Italië enzovoort) en de dropdown toont uitsluitend de actieve regio's van het gekozen land.
- Het veld **DNI** verschijnt voor landen die het vereisen (Spanje).
- De postcodevalidatie gebruikt het formaat van het land.
- Bij een landwissel wordt de pagina herladen met het formulier, herschikt voor het nieuwe land.

### Adres bewerken

Elk opgeslagen adres toont een potloodicoon. Een klik opent het inline formulier, vooraf ingevuld met alle waarden van het adres (aan serverzijde geladen met eigendomscontrole: een klant kan nooit het adres van een ander inzien). Het opslaan werkt het bestaande adres bij, zonder duplicaat aan te maken.

## Kortingscode

Het (activeerbare) kortingscodeveld werkt via AJAX: toepassen en verwijderen zonder herladen, met onmiddellijke bijwerking van het overzicht. De bewerkingen worden gedelegeerd aan de native `CartController` van PrestaShop, dus alle winkelwagenregels (datums, minimumbedrag, vervoerdersbeperkingen, cumulatie) worden identiek gerespecteerd. De native foutberichten ("Deze code is vervallen", "Minimumbedrag niet bereikt" enzovoort) worden ongewijzigd doorgegeven.

## Compatibiliteit met vervoerders en Colissimo

De extra inhoud van de vervoerders (kaart met Colissimo-afhaalpunten, widget Mondial Relay enzovoort) wordt gerenderd via `{$carrier.extraContent}`, net als in de native template. Voor Colissimo-afhaalpunten injecteert de module automatisch de gegevens van het gekozen punt (identificatie, mobiel nummer) in de validatieverzoeken, wat het valse bericht "Selecteer een afhaalpunt" elimineert dat de Colissimo-module op one-page checkouts kon tonen.

## Ontwikkelaarshooks

- `displayDfsimplecheckoutExpress`: slot bovenaan de checkout voor expressbetalingen (Apple Pay, Google Pay, PayPal Express).
- `displayDfsimplecheckoutSidebarTop` / `displayDfsimplecheckoutSidebarBottom`: injectiezones in de overzichtskolom.
- `actionDfscSocialLogin`: geactiveerd na een geslaagde sociale login, met de parameters `customer` en `dfsc_social_provider` (`google` of `facebook`). Handig voor CRM-tagging.

## Probleemoplossing

### De Google-knop verschijnt niet

- Controleer of de Client ID goed is ingevuld en de optie actief staat.
- Controleer in de browserconsole of er geen fout "origin not allowed" staat; voeg in dat geval de exacte URL van uw webshop (met https, zonder slash op het einde) toe aan de Authorized JavaScript origins in de Google Cloud Console.

### De sociale login blijft niet behouden

Leeg de PrestaShop-cache en de browsercache. Blijft het probleem bestaan, controleer dan of geen enkele beveiligingsmodule van derden de sessiecookies na het inloggen ongeldig maakt.

### Het veld Staat toont de verkeerde regio's

Gebruik versie 1.2.20 of hoger van de module, die de structuur van het formulier per land aan serverzijde oplost.

### Witte pagina op /order

Activeer de debugmodus van PrestaShop (`_PS_MODE_DEV_`) om de fout te tonen, of raadpleeg `var/logs`. Controleer of er niet tegelijk een andere one-page checkoutmodule actief is.

## Verwijdering

Verwijder de module via het Modulebeheer. De runtime-omgeving wordt onmiddellijk vrijgegeven en de native checkout in 5 stappen wordt hersteld. Geen enkel achtergebleven bestand, geen enkel verweesd gegeven.