# Simple & Elegant Checkout (dfsimplecheckout) — Complete guide

> Overview DataFirefly Simple Checkout replaces PrestaShop's native 5-step checkout with a modern one-page flow inspired by Shopify and Stripe checkouts. The module mounts its controller at runtime via the actionDispatcher…

- Page: <https://www.datafirefly.com/en/documentation/dfsimplecheckout/>
- Language: en
- Last updated: 2026-07-02
- Other languages: [fr](https://www.datafirefly.com/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), [nl](https://www.datafirefly.com/nl/documentation/dfsimplecheckout/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfsimplecheckout/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

## Overview

DataFirefly Simple Checkout replaces PrestaShop's native 5-step checkout with a modern one-page flow inspired by Shopify and Stripe checkouts. The module mounts its controller at runtime via the `actionDispatcher` hook — no override file is written to disk, and any existing third-party overrides on `OrderController` are cleanly inherited.

Key features: two-column layout with a persistent order summary, Google and Facebook social login, Google Places address autocomplete, country-aware address form, AJAX discount code, three configurable colors, distraction-free mode.

## Installation

1. In your PrestaShop back-office, go to **Modules → Module Manager → Upload a module**.
2. Select the `dfsimplecheckout.zip` file downloaded from your DataFirefly account.
3. Click **Install**, then **Configure**.
4. Clear the PrestaShop cache (**Advanced Parameters → Performance → Clear cache**).
5. Visit your shop's `/order` page with a product in the cart: the new checkout displays immediately.

The module supports PrestaShop 8.0 → 9.x. No theme modification is required. Uninstalling automatically restores the native checkout.

## General configuration

### Colors

Three colors are configurable in the module settings:

- **Primary color** — buttons, links, active states, selected radios (default `#1a73e8`).
- **Button hover color** — hover state of primary buttons like “Continue” and “Place order” (default `#1559b8`).
- **Accent / success color** — completed-step indicators, applied-discount pill, the carrier's “Free” label, success messages (default `#008060`).

All three are injected as CSS variables (`--dfsc-primary`, `--dfsc-primary-hover`, `--dfsc-success`) and validated by a strict hexadecimal regex.

### Logo

Provide a custom logo URL for the checkout header; the shop logo is used as a fallback. Rendered size: up to 190×42 px.

### Distraction-free mode

The **Hide theme header & footer** option (enabled by default) removes your theme's full header (menu, search, cart) and footer on the `/order` page only. The implementation overrides the Smarty `header` and `footer` blocks in our template: on a theme that doesn't use these standard blocks, the option is simply a no-op — never a blank page.

### Other options

- Seller note field (on/off)
- Discount code field (on/off)
- Trust badges — free HTML displayed below the summary
- Legal links in the checkout footer (Terms, Privacy, Returns — detected via native CMS roles)

## Google social login

### Create the credentials

1. Go to [Google Cloud Console](https://console.cloud.google.com/) and create (or select) a project.
2. In **APIs & Services → Credentials**, create an **OAuth client ID** of type **Web application**.
3. In **Authorized JavaScript origins**, add your shop URL (e.g. `https://www.myshop.com`) — no path, https protocol.
4. Copy the generated **Client ID** (ends with `.apps.googleusercontent.com`).

### Configure the module

1. In the module settings, enable **Google Sign-In** and paste the Client ID.
2. Save, then clear the cache.
3. On `/order`, the Google button appears above the “I am a new customer / I already have an account” tabs.

The flow: the customer clicks, selects their Google account, and the module receives a JWT which it validates server-side via the official `tokeninfo` endpoint (checking audience, issuer, expiry and verified email). If a customer account exists with that email, they are logged in; otherwise an account is created automatically using the Google profile's first and last name.

## Facebook social login

### Create the app

1. On [Meta for Developers](https://developers.facebook.com/), create a **Consumer**-type app.
2. Add the **Facebook Login** product and declare your domain in the settings.
3. Grab the **App ID** and **App Secret** from **Settings → Basic**.

### Configure the module

Enable **Facebook Login** in the settings, paste the App ID and App Secret, save. Server-side validation is two-step: `debug_token` (verifies the token belongs to your app) followed by profile retrieval signed with `appsecret_proof` (HMAC-SHA256). The App Secret never leaves your server.

## Google Places address autocomplete

1. In Google Cloud Console, enable the **Places API** and **Maps JavaScript API**.
2. Create an API key and restrict it to your domain (recommended).
3. In the module, enable **Address autocomplete** and paste the key.

The form's “Address” field then offers suggestions while typing. Selecting a suggestion pre-fills street, complement, city, postcode, country and region where applicable. Suggestions are restricted to your shop's active countries (up to 5 countries — a Google API limit).

The Places API is billed by Google beyond the monthly free quota. For a moderate-volume shop, the free quota is usually sufficient.

## Country-aware address form

The address form automatically adapts to the selected country:

- The dropdown's default country is the one configured in **International → Localization** of your back-office (not the alphabetically first country).
- The **State/Region** field only appears for countries that have states (US, Spain, Italy…), and its dropdown lists only the active regions of the selected country.
- The **DNI** field appears for countries that require it (Spain).
- Postcode validation uses the country's format.
- On country change, the page reloads with the form restructured for the new country.

### Address editing

Each saved address shows a pencil icon. Clicking it opens the inline form pre-filled with all the address values (loaded server-side with an ownership check — a customer can never view another customer's address). Saving updates the existing address without creating a duplicate.

## Discount code

The (optional) discount code field works over AJAX: apply and remove without reloading, with instant summary refresh. Operations are delegated to PrestaShop's native `CartController`, so every cart rule (dates, minimum amount, carrier restrictions, stacking) is honoured identically. Native error messages (“This voucher has expired”, “Minimum amount not reached”…) are surfaced as-is.

## Carrier compatibility and Colissimo

Carrier extra content (Colissimo pickup-point map, Mondial Relay widget…) is rendered via `{$carrier.extraContent}` exactly like the native template. For Colissimo Pickup Points, the module automatically injects the selected point's data (point id, mobile phone) into validation requests, which eliminates the false “Please select a pickup point” message that the Colissimo module could raise on one-page checkouts.

## Developer hooks

- `displayDfsimplecheckoutExpress` — slot at the top of the checkout for express payments (Apple Pay, Google Pay, PayPal Express).
- `displayDfsimplecheckoutSidebarTop` / `displayDfsimplecheckoutSidebarBottom` — injection zones in the summary column.
- `actionDfscSocialLogin` — fired after a successful social login, with `customer` and `dfsc_social_provider` (`google` or `facebook`) parameters. Useful for CRM tagging.

## Troubleshooting

### The Google button doesn't show

- Check the Client ID is filled in and the option enabled.
- Check the browser console for an “origin not allowed” error — if present, add your shop's exact URL (with https, no trailing slash) to the Authorized JavaScript origins in Google Cloud Console.

### Social login doesn't persist

Clear the PrestaShop cache and the browser cache. If the issue persists, check that no third-party security module invalidates session cookies after login.

### The State field shows the wrong regions

Make sure you run module version 1.2.20 or later, which resolves the form structure server-side for each country.

### Blank page on /order

Enable PrestaShop debug mode (`_PS_MODE_DEV_`) to reveal the error, or check `var/logs`. Verify no other one-page checkout module is active at the same time.

## Uninstall

Uninstall the module from the Module Manager. The runtime environment is released immediately and the native 5-step checkout is restored. No residual files, no orphaned data.