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

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 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, 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).

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.