Smart One Page Checkout — Documentation

This is the complete documentation for STM Smart One Page Checkout (version 1.5.1), listed on the Adobe Commerce Marketplace as Smart One Page Checkout. Everything on this page is free to read — no registration, no account.

User Guide

Overview

The Smart One Page Checkout replaces the native Magento multi-step checkout with a streamlined single-page experience. All checkout steps — address entry, shipping method selection, payment method selection, and order review — are presented on one page.

Key Benefits

Reduced cart abandonment — Fewer steps mean fewer drop-offs
Real-time validation — Instant feedback as customers fill in their information
AJAX-powered — No page reloads; shipping rates and totals update automatically
Fully responsive — Optimized for desktop, tablet, and mobile devices
Theme-independent — Works with Hyva, Luma, Blank, and custom themes
GDPR-compliant — Built-in agreement checkboxes, PII protection, and privacy controls

Accessing the Configuration

Navigate to: Stores > Configuration > STM > One Page Checkout

The configuration panel contains 10 organized sections. Each section can be expanded or collapsed. All settings are available at Default, Website, and Store View scope, allowing different configurations per store view.

General Settings

Setting	Description	Default
Enabled	Activates the One Page Checkout. When disabled, Magento’s native checkout is used.	Yes
Checkout Title	The page title shown in the browser tab and as the checkout heading.	“Sicher bestellen”
Account Created Message	Custom message shown on the success page when a new account was created during checkout. Leave empty for the translated default.	(empty)

Design and Layout

Logo

Setting	Description
Checkout Logo	Upload a logo image (JPG, PNG, GIF, SVG). Displayed in the sidebar and in the header for ultra-compact layout.
Logo Alt Text	Alternative text for accessibility.
Logo Width (px)	Custom width in pixels. Leave empty for auto.
Logo Height (px)	Custom height in pixels. Default: 50px.

Colors

Setting	Description	Default
Primary Color	Main color for buttons, links, validated fields, progress bar, and section number badges.	0078b3
Accent Color	Color for the place order button, required field markers, and validation highlights.	e85e0c

Both colors support a built-in color picker in the admin panel. Enter any valid hex color code.

The colors are rendered as CSS custom properties (--ia24-primary, --ia24-accent) with automatic dark, light, and RGB variants for transparency effects. All color values are sanitized to prevent CSS injection.

Typography

Setting	Description
Font Family	Choose from 13 font options including system fonts and Google Fonts (Inter, Open Sans, Roboto, Lato, Poppins, Montserrat, Source Sans 3, Nunito, PT Sans, Georgia, Playfair Display). Google Fonts are loaded automatically when selected. Leave empty to inherit the theme font.
Font Size	Choose from 7 sizes (13px to 18px). All elements scale proportionally using a calculated font-scale factor. Leave empty for the theme default.
Font Color	Main text color in the checkout. Secondary and muted text colors remain relative for visual hierarchy.

Layout Variants

Four layout options are available:

Layout	Description
Two Column (default)	Form fields on the left, order summary on the right. Classic e-commerce layout.
Two Column Reverse	Order summary on the left, form fields on the right.
One Column	All elements stacked vertically. Order summary has a max-width of 700px. Ideal for mobile-first designs.
Ultra Compact	Three-column card design. Address fields on the left, shipping and payment stacked on the right, order summary below. Hides progress bar, header icons, and trust badges for maximum space efficiency.

Header Icons

Setting	Description
Header Icons Enabled	Shows a bar of payment and shipping provider logos below the checkout title.
Payment Icons	Multi-select from 46 payment provider icons (Visa, Mastercard, PayPal, Klarna, SEPA, Apple Pay, Google Pay, and many more).
Shipping Icons	Multi-select from 36 shipping carrier icons (DHL, DPD, UPS, FedEx, Hermes, GLS, and more).
Custom Icon 1/2/3	Upload up to 3 custom icons (recommended: 80x50px, SVG or PNG with transparent background).

Icons are displayed in grayscale with a subtle hover effect showing them in full color.

Checkout Form Fields

Control which optional fields are visible and whether they are required:

Setting	Description	Default
Show Company	Display the company name field	Yes
Company Required	Make company a mandatory field	Yes
Show VAT ID	Display the VAT identification number field	Yes
VAT ID Required	Make VAT ID a mandatory field	Yes
Show Telephone	Display the phone number field	Yes
Telephone Required	Make phone a mandatory field	Yes
Show Order Comment	Display an order comment textarea in the sidebar	Yes

The core address fields (name, street, postcode, city, country) are always shown and required.

Postcode Autofill (DACH)

Automatic city lookup based on postal code entry, supporting Germany (DE), Austria (AT), and Switzerland (CH).

Setting	Description	Default
Enabled	Activate postcode autofill	Yes
Active Countries	Select which DACH countries to enable	DE, AT, CH
Auto-select Single Match	Automatically fill the city when only one result exists for the entered postcode	Yes
Minimum PLZ Length	Number of digits before the lookup starts	4

The postcode database contains complete postcode-to-city mappings for all three countries. When multiple cities match a postcode, the customer can choose from a dropdown.

Payment and Shipping Methods

The method customization section allows you to assign icons and descriptive text to payment and shipping methods as they appear in the checkout.

Setting	Description
Payment Methods	Configure icons and descriptions for each active payment method. The admin shows a live preview of the selected icon.
Shipping Methods	Configure icons and descriptions for each active shipping method.

Over 80 method icons are included as SVG files:

Payment: Visa, Mastercard, American Express, PayPal, Klarna, SEPA, Apple Pay, Google Pay, Amazon Pay, Stripe, Mollie, Adyen, Unzer, Braintree, iDEAL, Bancontact, Sofort, giropay, EPS, Przelewy24, and many more
Shipping: DHL, DPD, UPS, FedEx, Hermes, GLS, Deutsche Post, DHL Express, TNT, Royal Mail, PostNL, and more

Note: Only active (enabled) payment and shipping methods are shown in the customizer.

Order Options

Legal Agreements

Three separate agreement types can be configured independently:

Agreement	Settings
Terms & Conditions (AGB)	Show/hide, required checkbox, link text, URL
Privacy Policy	Show/hide, required checkbox, link text, URL
Cancellation Policy	Show/hide, required checkbox, link text, URL

When set to required, each agreement is rendered as an individual checkbox that the customer must actively check before placing the order. When not required, the agreement appears as a text link.

All agreement checkboxes are synchronized between the sidebar and the mobile sticky bar.

Setting	Description	Default
Show Newsletter Checkbox	Displays an opt-in checkbox for newsletter subscription	No

When enabled, the checkbox includes a hint text with a link to the privacy policy: “(You can unsubscribe at any time. I have read the privacy policy.)”

If the customer checks the box and completes the order, they are automatically subscribed to the newsletter via Magento’s native subscriber system.

Sticky Order Bar (Mobile)

Setting	Description	Default
Sticky Order Bar	Shows a fixed “Place Order” bar at the bottom of the screen on mobile devices	Yes
Legal Notes in Sticky Bar	Shows the agreement text/checkboxes in the sticky bar	Yes

The sticky bar uses an IntersectionObserver to detect whether the main place order button is visible. It only appears when the customer has scrolled past the main button.

Coupon Code

Setting	Description	Default
Enable Coupon Field	Show the coupon code input in the sidebar	Yes
Collapsed by Default	Hide the coupon field behind a toggle to reduce visual distraction	Yes
Placeholder Text	Custom placeholder for the input field	“Gutscheincode eingeben”
Button Text	Label for the apply button	“Einlosen”

The coupon is applied via AJAX without page reload. Success and error messages are displayed inline. The field is keyboard-accessible with Enter key support.

Trust and Security Badges

Trust badges increase conversion by signaling credibility to customers.

General Settings

Setting	Description	Default
Enable Trust Badges	Show trust badges in the checkout	Yes
Position	Where to display: above or below the place order button	Above
Style	Horizontal or vertical layout	Horizontal

Color Customization

Setting	Description
Icon Color	Color of the badge icons
Text Color	Color of the badge title
Subtext Color	Color of the optional subtitle
Background Color	Background color of badge cards

Pre-built Badges

Six built-in badges, each individually toggleable:

Badge	Default
Secure Payment	Enabled
Fast Shipping	Disabled
Buyer Protection	Enabled
GDPR Compliant	Enabled
Customer Service	Enabled
Money-Back Guarantee	Disabled

Custom Badges

Two custom badges can be created with:

Custom icon (selectable from a list)
Custom title text
Optional subtitle text

Footer and Legal Links

Configure the links displayed in the checkout footer:

Setting	Description	Default
Imprint Link Text	Label for the imprint link	“Impressum”
Imprint URL	URL or relative path (e.g., `/impressum`)	/impressum
Privacy Link Text	Label for the privacy link	“Datenschutz”
Privacy URL	URL or relative path	/datenschutz
Terms Link Text	Label for the terms link	“AGB”
Terms URL	URL or relative path	/agb
Copyright Text	Optional copyright text. Use `{year}` as a placeholder for the current year.	(empty)

About This Module

The bottom section of the configuration page displays:

Module version (read from composer.json)
Feature overview with all key capabilities
Built-in contact form for support requests (sent directly to Storetown Media via email)

Checkout Flow Overview

For Physical Products

The checkout presents four numbered sections:

1. Shipping Address — Customer enters or selects (for logged-in customers) their shipping address. Real-time validation highlights invalid fields. An optional separate billing address form can be toggled.

2. Shipping Method — Available shipping methods are loaded automatically via AJAX once the address is complete. Rates update in real-time as the address changes.

3. Payment Method — Payment methods are loaded after a shipping method is selected. Each method can display an icon and description. Gateway-specific forms (e.g., credit card fields) are rendered inline.

4. Order Summary (Sidebar) — Displays cart items with thumbnails, quantities, and prices. Shows subtotal, shipping cost, tax, and grand total. Includes the coupon field, order comment, and place order button.

Logged-In Customers

Logged-in customers see their saved addresses in a dropdown. They can select an existing address or enter a new one. A “Login” bar at the top allows guest customers to sign in.

Guest Checkout

Guest customers enter their information directly. If they provide an email address that is not registered, they are offered the option to create an account during checkout. Upon order completion, the account is created automatically.

Virtual and Downloadable Products

When the cart contains only virtual or downloadable products (no physical shipping needed):

The shipping address section is hidden — only a billing address is required
The shipping method section is hidden
The progress bar shows 2 steps instead of 3
The heading changes to “Billing Address” instead of “Shipping Address”
Payment methods are loaded immediately after address entry

Multi-Language Support

The module includes complete translations for 11 languages:

Language	File
German (DE)	`de_DE.csv`
English (US)	`en_US.csv`
French	`fr_FR.csv`
Italian	`it_IT.csv`
Spanish	`es_ES.csv`
Dutch	`nl_NL.csv`
Polish	`pl_PL.csv`
Portuguese	`pt_PT.csv`
Swedish	`sv_SE.csv`
Danish	`da_DK.csv`
Norwegian	`nb_NO.csv`

All user-facing texts (form labels, error messages, button texts, trust badge labels, agreement texts, newsletter hints) are fully translated. The module automatically uses the store view’s locale.

Best Practices for Conversion Optimization

Reduce Friction

Use the Two Column layout for desktop-heavy audiences
Enable Postcode Autofill to save typing
Keep the coupon field collapsed to avoid distraction
Only show fields that are truly needed (hide company/VAT for B2C shops)

Build Trust

Enable Trust Badges with “Secure Payment”, “Buyer Protection”, and “GDPR Compliant”
Upload your shop logo for brand recognition
Configure Header Icons showing accepted payment methods

Optimize for Mobile

Enable the Sticky Order Bar for easy access to the place order button
Use legal notes in the sticky bar so mobile users don’t have to scroll
Consider the One Column layout for mobile-first stores

Match Your Brand

Set Primary Color and Accent Color to match your shop’s branding
Choose a Font Family consistent with your theme
Upload Custom Header Icons for regional payment/shipping providers

Legal Compliance

Enable required checkboxes for Terms and Privacy Policy (mandatory in EU)
Configure correct URLs for all legal pages
The module ensures all required checkboxes must be checked before order placement

Installation Guide

System Requirements

Requirement	Minimum Version
PHP	7.4 or higher
Magento	2.4.0 or higher
Composer	2.x

Required Magento Modules

The following core modules must be installed and enabled (included in every standard Magento installation):

Magento_Checkout
Magento_Customer
Magento_Sales
Magento_Quote
Magento_Payment
Magento_Shipping
Magento_Directory
Magento_Tax
Magento_Eav
Magento_Paypal

Supported Themes

Hyva Theme (recommended) — full compatibility, no RequireJS dependency
Luma / Blank — fully supported
Custom themes — compatible with any Magento 2 theme

Supported Payment Service Providers

The module works with all Magento 2 payment extensions, including:

PayPal (Express, Standard, Plus, Checkout)
Stripe
Mollie
Adyen
Braintree
Unzer (formerly Heidelpay)
Amazon Pay
Klarna
Payone
And all other standard Magento 2 payment methods

Installation via Composer

Step 1: Add the Repository (if using private Satis)

If you received access to the Storetown Media Composer repository, add it to your project:

composer config repositories.storetown-media composer https://packages.storetown-media.de

When prompted, enter the authentication credentials provided with your license.

Step 2: Require the Package

composer require storetown-media/module-onepagecheckout

Step 3: Enable the Module

bin/magento module:enable IA24_OnePageCheckout

Step 4: Run Setup

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation

If you prefer manual installation or do not use Composer:

Step 1: Extract Files

Extract the module ZIP file to:

app/code/IA24/OnePageCheckout/

The resulting directory structure should look like:

app/code/IA24/OnePageCheckout/
    Block/
    Console/
    Controller/
    Model/
    Plugin/
    etc/
    i18n/
    view/
    composer.json
    registration.php
    ...

Step 2: Enable the Module

bin/magento module:enable IA24_OnePageCheckout

Step 3: Run Setup

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Step 4: Verify File Permissions

Ensure correct file permissions on Linux/Unix systems:

find app/code/IA24/OnePageCheckout -type d -exec chmod 755 {} \;
find app/code/IA24/OnePageCheckout -type f -exec chmod 644 {} \;

Post-Installation Setup

Step 1: Verify Module is Active

bin/magento module:status IA24_OnePageCheckout

Expected output:

Module is enabled

Step 2: Clear All Caches

bin/magento cache:clean
bin/magento cache:flush

Step 3: If Using Production Mode

bin/magento setup:di:compile
bin/magento setup:static-content:deploy de_DE en_US -f

Replace the locale codes with those used in your store.

Verification

Verify in Admin Panel

Navigate to Stores > Configuration > STM > One Page Checkout

2. You should see the complete configuration panel with 10 sections

Set Enabled to Yes

Click Save Config

Verify on Frontend

Add a product to the cart

Navigate to `/checkout` or click “Proceed to Checkout”

3. You should see the One Page Checkout with all form fields on a single page

Verify Module Version

In the admin panel, scroll down to the “Über dieses Modul” section at the bottom of the One Page Checkout configuration. The installed version number is displayed there.

Alternatively, via CLI:

bin/magento module:status | grep IA24

Configuration

After installation, the module is configured via:

Stores > Configuration > STM > One Page Checkout

The configuration is organized into 10 sections:

1. General — Enable/disable, checkout title 2. Design & Layout — Logo, colors, fonts, layout variant, header icons 3. Checkout Form — Field visibility and requirements (company, VAT, phone, comment) 4. Postcode Autofill — Automatic city lookup for DE/AT/CH 5. Payment & Shipping Methods — Icon customization 6. Order Options — Agreements, newsletter, sticky bar 7. Coupon Code — Coupon field settings 8. Trust & Security — Trust badge configuration 9. Footer & Legal — Footer links and copyright 10. About This Module — Version info, features, support contact

For detailed configuration instructions, please refer to the User Guide.

Upgrading

Via Composer

composer update storetown-media/module-onepagecheckout
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Upgrade

1. Backup your current installation:

cp -r app/code/IA24/OnePageCheckout app/code/IA24/OnePageCheckout.bak

Remove the old module files (keep the backup)

Extract the new version to `app/code/IA24/OnePageCheckout/`

4. Run setup commands:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Verify the new version in the admin panel

Note: Your configuration settings are stored in the database and will be preserved during upgrades.

Uninstallation

Via Composer

bin/magento module:disable IA24_OnePageCheckout
bin/magento module:uninstall IA24_OnePageCheckout
bin/magento setup:di:compile
bin/magento cache:flush

Manual Uninstallation

1. Disable the module:

bin/magento module:disable IA24_OnePageCheckout

2. Remove the module directory:

rm -rf app/code/IA24/OnePageCheckout

3. Remove the module entry from app/etc/config.php (find and delete the 'IA24_OnePageCheckout' => 1 line) 4. Run setup:

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

Note: After uninstallation, Magento will automatically revert to its native multi-step checkout.

Troubleshooting

Checkout page shows blank or 404

Verify the module is enabled: bin/magento module:status IA24_OnePageCheckout
Clear all caches: bin/magento cache:flush
If in production mode, recompile: bin/magento setup:di:compile

JavaScript errors on checkout page

If using Hyva theme: The module includes a RequireJS stub to prevent require is not defined errors. Clear static content and redeploy.
If using Luma/Blank: Run bin/magento setup:static-content:deploy -f

Payment methods not showing

Verify your payment extensions are properly configured under Stores > Configuration > Sales > Payment Methods
Check the Magento exception log: var/log/exception.log
The module supports all standard Magento 2 payment methods and automatically detects the payment gateway

Styles look broken

Clear all caches including full page cache
In production mode: bin/magento setup:static-content:deploy -f
Check that no CSS conflicts exist with your theme

Admin configuration not accessible

Clear cache: bin/magento cache:clean config
Verify ACL permissions: The admin user needs the IA24_OnePageCheckout::config resource

Need Help?

Contact Storetown Media support:

Email: info@storetown-media.de
Website: https://www.storetown-media.de
The admin panel includes a built-in contact form under STM > One Page Checkout > About This Module

Developer Reference

Architecture Overview

The Smart One Page Checkout uses a server-rendered architecture with PHP Blocks and PHTML templates. Unlike Magento’s native checkout which relies on Knockout.js and RequireJS, this module renders the checkout page entirely on the server and uses plain JavaScript (IIFE pattern) for client-side interactions.

Design Principles

No Knockout.js — Server-rendered HTML with AJAX updates
No RequireJS — All JavaScript as self-contained IIFEs
No jQuery dependency — Compatible with Hyva (Alpine.js) and jQuery-based themes
Progressive Enhancement — Core functionality works without JavaScript; AJAX enhances the experience
PHP-to-JS Data Bridge — Configuration passed via window.ia24CheckoutConfig

Request Flow

Customer visits /checkout
       |
       v
Controller/Index/Index.php
       |
       v
Block/Checkout.php (prepares all data)
       |
       v
checkout.phtml (server-rendered HTML)
       |
       v
checkout-core.js (IIFE, client-side logic)
       |
       v
AJAX calls to Controller/Ajax/* endpoints
       |
       v
JSON responses update DOM dynamically

Module Structure

IA24/OnePageCheckout/
|
|-- Block/
|   |-- Checkout.php                    Main checkout block
|   |-- Checkout/
|   |   |-- TrustBadges.php            Trust badge rendering
|   |-- Adminhtml/
|       |-- System/Config/
|           |-- AboutInfo.php           Admin "About" section
|           |-- ColorPicker.php         Color picker field renderer
|           |-- MethodCustomizer.php    Payment/shipping icon customizer
|
|-- Console/
|   |-- Command/
|       |-- AssignGuestOrdersCommand.php  Assign guest orders to accounts
|       |-- FixAddressAttributesCommand.php  Fix EAV address attributes
|       |-- ImportPostcodeData.php       Import postcode database
|
|-- Controller/
|   |-- Index/
|   |   |-- Index.php                  Main checkout page
|   |-- Ajax/
|   |   |-- CheckEmail.php            Email existence check
|   |   |-- Login.php                 Customer login
|   |   |-- SaveAddress.php           Address save + shipping rates
|   |   |-- SaveShipping.php          Shipping method selection
|   |   |-- ApplyCoupon.php           Coupon apply/remove
|   |   |-- PlaceOrder.php            Order placement
|   |   |-- PostcodeLookup.php        Postcode autofill lookup
|   |-- Adminhtml/
|       |-- Support/
|           |-- Send.php              Admin contact form handler
|
|-- Model/
|   |-- Config.php                     Configuration reader (60+ getters)
|   |-- CheckoutConfigProvider.php     Frontend config provider
|   |-- Config/
|       |-- Backend/
|       |   |-- Logo.php              Logo upload handler
|       |   |-- HeaderIcon.php        Header icon upload handler
|       |-- Source/
|           |-- Layout.php            Layout options (4 variants)
|           |-- FontFamily.php        Font family options (13)
|           |-- FontSize.php          Font size options (7)
|           |-- PaymentIcon.php       Payment icon list (46)
|           |-- ShippingIcon.php      Shipping icon list (36)
|           |-- DachCountries.php     DE/AT/CH country list
|           |-- TrustBadgePosition.php  Badge position options
|           |-- TrustBadgeStyle.php   Badge style options
|           |-- TrustBadgeIcon.php    Badge icon options
|
|-- Plugin/
|   |-- ConfigPlugin.php              Admin config save interceptor
|
|-- view/
|   |-- frontend/
|   |   |-- layout/
|   |   |   |-- ia24checkout_index_index.xml
|   |   |-- templates/
|   |   |   |-- checkout.phtml        Main checkout template
|   |   |   |-- js/
|   |   |       |-- requirejs-stub.phtml  RequireJS compatibility stub
|   |   |-- web/
|   |       |-- css/
|   |       |   |-- checkout-layout.css   Main stylesheet (~2500 lines)
|   |       |   |-- method-icons.css      Method icon styles
|   |       |-- js/
|   |       |   |-- checkout-core.js      Core checkout logic (IIFE)
|   |       |   |-- sticky-progress.js    Sticky progress bar (IIFE)
|   |       |   |-- sticky-order-bar.js   Mobile sticky bar (IIFE)
|   |       |-- images/
|   |           |-- method-icons/         33 SVG payment/shipping icons
|   |
|   |-- base/
|   |   |-- web/
|   |       |-- images/
|   |           |-- method-icons/         33 SVG icons (admin accessible)
|   |
|   |-- adminhtml/
|       |-- layout/
|       |-- templates/
|       |   |-- system/config/
|       |       |-- about-info.phtml
|       |       |-- method-customizer.phtml
|       |-- web/
|       |   |-- css/
|       |       |-- admin.css
|       |-- email/
|           |-- support_request.html
|
|-- etc/
|   |-- module.xml                    Module declaration + sequence
|   |-- config.xml                    Default configuration values
|   |-- di.xml                        Dependency injection
|   |-- acl.xml                       Access control list
|   |-- email_templates.xml           Email template registration
|   |-- adminhtml/
|   |   |-- system.xml                Admin configuration fields
|   |   |-- routes.xml                Admin routes
|   |-- frontend/
|       |-- routes.xml                Frontend routes
|       |-- events.xml                Event observers
|
|-- i18n/                             11 translation files
|-- data/postcode/                    Postcode databases (DE, AT, CH)
|-- composer.json
|-- registration.php
|-- LICENSE
|-- CHANGELOG.md

Configuration System

Config Reader: Model/Config.php

Central configuration class with 60+ getter methods. All admin settings are accessed through this class.

Key constants:

const XML_PATH_ENABLED = 'ia24_onepagecheckout/general/enabled';
const XML_PATH_LAYOUT = 'ia24_onepagecheckout/design/layout';
const DEFAULT_PRIMARY_COLOR = '0078b3';
const DEFAULT_ACCENT_COLOR = 'e85e0c';

CSS Variable Generation:

The Block/Checkout.php::getCssVariables() method generates CSS custom properties from admin settings:

--ia24-primary: 0078b3;
--ia24-primary-dark: 005f8f;
--ia24-primary-light: 3393c2;
--ia24-primary-rgb: 0, 120, 179;
--ia24-accent: e85e0c;
--ia24-accent-dark: c44d0a;
--ia24-accent-light: ec7e3d;
--ia24-accent-rgb: 232, 94, 12;
--ia24-font-family: 'Inter', sans-serif;
--ia24-font-scale: 1.1429;
--ia24-font-color: 1e293b;

All color values are sanitized via sanitizeColor() which validates hex format and strips invalid characters.

AJAX API Endpoints

All endpoints are under the ia24checkout frontend route and are CSRF-protected via Magento’s form_key.

POST /ia24checkout/ajax/checkEmail

Checks if an email address is associated with an existing customer account.

Request:

{
    "email": "customer@example.com",
    "form_key": "..."
}

Response:

{
    "success": true,
    "exists": true
}

Security: Email address is not reflected in the response. No PII logging.

POST /ia24checkout/ajax/login

Authenticates a customer during checkout.

Request:

{
    "email": "customer@example.com",
    "password": "...",
    "form_key": "..."
}

Response (success):

{
    "success": true,
    "redirect": false
}

Security: Brute-force protection via Magento’s AccountManagement lockout. Generic error messages only.

POST /ia24checkout/ajax/saveAddress

Saves the shipping/billing address and returns available shipping methods.

Request:

{
    "firstname": "Max",
    "lastname": "Mustermann",
    "street[]": "Musterstr. 1",
    "postcode": "10115",
    "city": "Berlin",
    "country_id": "DE",
    "telephone": "+49...",
    "form_key": "..."
}

Response:

{
    "success": true,
    "shipping_methods": [...],
    "is_virtual": false
}

Security: All inputs type-cast to (string). PII logged only as field names.

POST /ia24checkout/ajax/saveShipping

Saves the selected shipping method and returns available payment methods.

Request:

{
    "shipping_method": "flatrate_flatrate",
    "form_key": "..."
}

Response:

{
    "success": true,
    "payment_methods": [...],
    "totals": {...}
}

Security: Shipping method validated via regex (/^[a-z0-9_]+$/i).

POST /ia24checkout/ajax/applyCoupon

Applies or removes a coupon code.

Request:

{
    "coupon_code": "SAVE10",
    "action": "apply",
    "form_key": "..."
}

Response:

{
    "success": true,
    "message": "Coupon applied successfully.",
    "totals": {...}
}

Security: Action whitelist (only apply/remove). Coupon code not reflected in error messages.

POST /ia24checkout/ajax/placeOrder

Places the order.

Request:

{
    "payment_method": "checkmo",
    "agreements": {"terms": "1", "privacy": "1"},
    "newsletter": "0",
    "comment": "Please deliver to back door",
    "form_key": "..."
}

Response:

{
    "success": true,
    "order_id": "000000123",
    "redirect_url": "/checkout/onepage/success/"
}

Security: Double-submit protection, all inputs sanitized, order comment limited to 5000 characters.

GET /ia24checkout/ajax/postcodeLookup

Looks up cities by postcode.

Request: ?postcode=10115&country=DE

Response:

{
    "success": true,
    "cities": ["Berlin"],
    "region": "Berlin",
    "region_id": 91
}

Frontend Architecture

Template: checkout.phtml

The main template renders the complete checkout page including:

Header (title, back-link, optional logo and icon bar)
Progress bar (3 steps for physical, 2 for virtual products)
Login section
Address form (shipping + optional billing)
Shipping method selection
Payment method selection
Order summary sidebar (items, coupon, comment, totals, agreements, place order)
Footer (legal links, copyright)
Mobile sticky order bar

CSS: checkout-layout.css

Approximately 2500 lines of CSS organized by component. Uses CSS custom properties for theming. Includes:

Layout system (4 variants via CSS class)
Responsive breakpoints (900px for mobile)
Print stylesheet
prefers-reduced-motion media query
:has() with @supports fallbacks
CSS counters for section numbering
Font-scale system with calc()

JavaScript: checkout-core.js

Self-contained IIFE (~1050 lines) handling:

Form validation with real-time feedback
AJAX communication with all endpoints
Shipping/payment method loading and selection
Address management (save, select, new)
Coupon code application
Agreement validation
Place order with double-submit protection
PLZ autofill
Fetch timeout via AbortController

Payment Gateway Integration

The module works with all Magento 2 payment gateways. No special integration is needed.

How It Works

1. After shipping method selection, SaveShipping.php returns all available payment methods 2. The checkout renders each method with its icon and description 3. Gateway-specific forms (credit card fields, redirects) are handled by the payment extension’s own renderers 4. On “Place Order”, the module calls the payment gateway’s standard placeOrder flow

Supported PSP Patterns

Inline payments (credit card, SEPA): Form renders within the checkout
Redirect payments (PayPal, Sofort, iDEAL): Customer is redirected after order placement
Popup payments (some Klarna/Amazon implementations): Popup triggered by the gateway

PayPal Express Specifics

Shipping method is preserved during PayPal redirect
NVP API logging reduced to debug level
PayPal Error 10413 (“totals do not match”) resolved via CartPlugin

Security Implementation

CSRF Protection

All AJAX endpoints require Magento’s form_key token. The global CSRF bypass plugin was removed in v1.3.0.

XSS Prevention

All server-supplied data rendered via escapeHtml() (including quotes: " to ", ' to &39;)
No raw innerHTML injections
Coupon code input sanitized before display
Admin-configured colors validated via sanitizeColor()

Input Validation

Input	Validation
Email	Magento’s email validation
Payment method	Regex: `/^[a-z0-9_]+$/i`
Shipping method	Type cast + regex
All address fields	Type cast to `(string)`
Order comment	`trim()` + `mb_substr()` 5000 chars
Coupon action	Whitelist: `apply`, `remove`
Font scale	Range: 10-24
Custom icon files	`basename()` + traversal check

PII Protection

PlaceOrder: 40+ log statements masked (email: first 3 chars, name: first 2, phone/street: fully masked)
SaveAddress: Logs only field names, never values
CheckEmail: No email in response, no logging
Login: No email logging, generic error messages

Exception Handling

All 4 AJAX controllers return generic user-friendly messages. Exception details (class names, stack traces) are logged at debug level only.

Accessibility (WCAG)

ARIA Attributes

role="alert" and aria-live="polite" on message containers
role="button" and tabindex="0" on interactive non-button elements
aria-expanded and aria-controls on collapsible sections
aria-busy during AJAX loading states
role="radiogroup" on method selection containers
aria-label on icon-only buttons and inputs
aria-hidden on decorative elements

Keyboard Navigation

All interactive elements reachable via Tab
:focus-visible styling on all focusable elements (buttons, inputs, links, toggles)
Coupon toggle: Enter and Space key handlers
Method selection: Arrow key navigation

Touch Targets

All checkboxes: min-height: 44px (WCAG 2.1 AA)
Coupon button: min-height: 44px
Checkbox labels: align-items: flex-start with margin for multiline text

Motion

@media (prefers-reduced-motion: reduce) disables all CSS animations and transitions

@media print stylesheet hides interactive/decorative elements, makes sidebar non-sticky

Performance Considerations

No RequireJS overhead — JavaScript files are plain <script src> tags
No Knockout.js — No virtual DOM, no observable bindings
Single-page checkout — Eliminates page reloads between steps
AJAX with timeouts — All fetch calls have AbortController timeouts (10-30s) preventing hung connections
Minimal DOM manipulation — Server-rendered HTML with targeted AJAX updates
CSS-only layout variants — No JavaScript needed for layout switching
Conditional loading — Google Fonts only loaded when a non-system font is selected
Postcode database — JSON files loaded on-demand per country

Customization Guide

Overriding Templates

Use Magento’s standard template override mechanism:

app/design/frontend/YourVendor/YourTheme/IA24_OnePageCheckout/templates/checkout.phtml

Overriding CSS

Add custom CSS after the module’s stylesheet in your theme’s layout XML:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/my-checkout-overrides.css" after="IA24_OnePageCheckout::css/checkout-layout.css"/>
    </head>
</page>

CSS Custom Properties

Override the color system by setting CSS custom properties:

.ia24-checkout {
    --ia24-primary: your-color;
    --ia24-accent: your-accent;
}

Adding Custom Fields

Extend the checkout form by:

1. Create a plugin for Block/Checkout.php to add new configuration data

Override `checkout.phtml` to add the HTML field

3. Create a plugin for the relevant Ajax controller to process the new field

Changing Layout Behavior

The layout is controlled purely by the CSS class on the main container:

.ia24-checkout--two-column
.ia24-checkout--two-column-reverse
.ia24-checkout--one-column
.ia24-checkout--ultra-compact

You can create custom layouts by adding new CSS rules for a custom class.

CLI Commands

Assign Guest Orders

bin/magento ia24:checkout:assign-guest-orders [--email=<email>] [--dry-run]

Finds guest orders and assigns them to existing customer accounts based on email address match.

Fix Address Attributes

bin/magento ia24:checkout:fix-address-attributes

Ensures all required EAV form attributes exist for adminhtml_customer_address (resolves missing attribute issues after Magento upgrades).

Import Postcode Data

bin/magento ia24:checkout:import-postcode-data [--country=DE|AT|CH]

Re-imports the postcode database from the bundled JSON files.

Event Observers and Plugins

Frontend Event Observers (etc/frontend/events.xml)

Event	Observer	Purpose
`sales_order_place_after`	`PrepareQuoteForOrder`	Post-order processing, newsletter subscription

Plugins (etc/di.xml)

Plugin	Target	Purpose
`ConfigPlugin`	Config save	Post-save processing for admin settings

CSS Architecture

File Organization

File	Purpose	Size
`checkout-layout.css`	Complete checkout styling	~2500 lines
`method-icons.css`	Payment/shipping icon grid	~100 lines
`admin.css`	Admin panel styles	~200 lines

Naming Convention

BEM-like naming with ia24-checkout prefix:

.ia24-checkout                      Block
.ia24-checkout__header              Element
.ia24-checkout__section--address    Modifier
.ia24-checkout__method--selected    State

CSS Counter System

Section numbers are generated via CSS counters:

.ia24-checkout__container {
    counter-reset: checkout-step;
}
.ia24-checkout__section-title::before {
    counter-increment: checkout-step;
    content: counter(checkout-step);
}

Responsive Breakpoints

Breakpoint	Target
`max-width: 900px`	Mobile: single column, no sticky sidebar
`max-width: 600px`	Small mobile: reduced padding

JavaScript Architecture

Files

File	Pattern	Purpose
`checkout-core.js`	IIFE	Complete checkout logic
`sticky-progress.js`	IIFE	Sticky progress bar with step tracking
`sticky-order-bar.js`	IIFE	Mobile sticky order bar with IntersectionObserver

Data Bridge

Configuration is passed from PHP to JavaScript via a global object:

window.ia24CheckoutConfig = {
    urls: {
        saveAddress: '/ia24checkout/ajax/saveAddress',
        saveShipping: '/ia24checkout/ajax/saveShipping',
        placeOrder: '/ia24checkout/ajax/placeOrder',
        // ...
    },
    formKey: '...',
    isVirtual: false,
    translations: { ... },
    // ...
};

Debug Mode

// Enable debug logging:
window.IA24_DEBUG_ENABLED = true;

All console output is gated behind the IA24_DEBUG flag. In production, no console output is generated.

Fetch Helper

function fetchWithTimeout(url, options, timeoutMs) {
    var controller = new AbortController();
    var timer = setTimeout(function() { controller.abort(); }, timeoutMs);
    options.signal = controller.signal;
    return fetch(url, options).finally(function() { clearTimeout(timer); });
}

Timeouts: 10s (email, PLZ), 15s (shipping, payment, login), 30s (place order).

Compatibility Notes

Hyva Theme

RequireJS stub prevents require is not defined errors
No jQuery dependency — all JS is vanilla
No Knockout.js — server-rendered HTML
Alpine.js coexistence: no conflicts (different scope)

Luma / Blank Theme

Full compatibility via standard Magento layout XML
RequireJS stub is harmless on RequireJS-enabled themes

Theme Conflicts

The module uses scoped CSS selectors (.ia24-checkout prefix) and wildcard protection:

/* Prevents theme headers/footers from inheriting checkout styles */
[class*="header"]:not([class*="ia24"]) { ... }

Porto and Ultimo theme compatibility has been specifically tested and addressed.

PHP Compatibility

PHP 7.4+: No mixed return types, no readonly properties
PHP 8.0+: All inputs type-cast to prevent TypeError
PHP 8.1+: (string) casts on all getParam() calls

Magento Compatibility

Magento 2.4.x: Tested and verified
setup_version removed from module.xml (deprecated since 2.3)
Uses declarative schema approach
PHPCS Magento2 standard: 0 errors, 0 warnings

Frequently Asked Questions

Which Magento and Adobe Commerce versions are supported?

Magento Open Source and Adobe Commerce 2.4.4 or higher, on-premise and on cloud infrastructure, with PHP 8.1 or higher.

Does it work with Hyvä themes?

Yes. Hyvä is the recommended theme and needs no RequireJS; Luma and Blank are fully supported, and the checkout works with any Magento 2 theme. The module is server-rendered in PHP and PHTML with plain JavaScript, so there is no RequireJS, Knockout.js or jQuery dependency.

Does it work with my payment provider?

Yes. The module works with all Magento 2 payment extensions and needs no gateway-specific integration. Inline forms such as credit card and SEPA, redirect providers such as PayPal, Sofort and iDEAL, and popup providers such as Klarna and Amazon are all rendered by the payment extension itself.

What happens with virtual and downloadable products?

When the cart contains only virtual or downloadable items, the shipping address and shipping method sections are hidden, the progress bar shows two steps instead of three, and payment methods load immediately after the address.

Which languages does the checkout ship with?

Eleven: German, English, French, Italian, Spanish, Dutch, Polish, Portuguese, Swedish, Danish and Norwegian. The module follows the locale of the store view.

Does the checkout fill in the city from the postcode?

Yes, for Germany, Austria and Switzerland. The bundled postcode database maps postal codes to cities in all three countries; where several cities share a postcode, the customer picks one from a dropdown.

Is the checkout accessible?

It is built to WCAG 2.1 AA keyboard and touch-target rules: every interactive element is reachable by Tab, method lists support arrow-key navigation, checkboxes and buttons are at least 44 pixels high, and ARIA roles and live regions are set on messages, collapsible sections and loading states.

Support

Questions about this extension are answered through the support link on the Marketplace listing. For pre-sales questions and custom requirements, get in touch.

← All documentation

Marco Rühmann is a Magento developer at Storetown Media. He develops and maintains complex e-commerce solutions based on Magento and Adobe Commerce. His focus is on custom backend and frontend development, performance optimization, and stable system architectures. He implements tailor-made modules, extends existing functions, and integrates ERP, PIM, and payment systems. Marco optimizes databases, improves loading times, and ensures a secure and scalable shop environment. He oversees projects from planning to launch and provides long-term support for operation and further development. With his structured approach and in-depth Magento expertise, he ensures that even complex requirements are reliably implemented – including clear documentation and a future-proof codebase.

Tobias Frohmann is a WordPress and Shopware 6 developer at Storetown Media. He designs, develops, and optimizes websites and online shops based on WordPress and Shopware 6 – from streamlined business sites to complex e-commerce solutions. His focus is on developing custom themes and plugins, performance optimization, security measures, and the integration of external systems and interfaces. He prioritizes clean code structure, fast loading times, and a user-friendly backend for clients. Tobias manages projects from the initial concept to launch. He collaborates closely with design, content, and marketing teams to ensure high-quality technical and visual implementation. Even after launch, he provides ongoing updates, security checks, and improvements. Areas of expertise: WordPress theme and plugin development, WooCommerce integration, API and interface development, performance optimization, security and backup strategies, multilingualism, SEO optimization in WordPress, custom post types, page builders (Elementor, WPBakery), integration of CRM, ERP and marketing tools

Tatjana Lorenzen is a WooCommerce developer at Storetown Media. She plans, develops, and optimizes online shops based on WordPress and WooCommerce, focusing on a high-performance, secure, and user-friendly shopping experience. Her expertise lies in developing custom themes and plugins, integrating payment and shipping solutions, and connecting external systems such as ERP, PIM, and marketing tools. She optimizes loading times, improves conversion rates, and ensures legally compliant shop setups. Tatjana works closely with design, content, and marketing teams to bring WooCommerce shops to a high level, both visually and technically. She implements projects systematically—from the concept phase to launch and beyond, providing ongoing support.

Tim Kroschke is a Joomla developer at Storetown Media. He plans, builds, and maintains Joomla websites. He prioritizes clean code, clear structures, and secure updates. His focus is on high-performance templates, stable extensions, and scalable integrations. He connects Joomla with CRM, ERP, and newsletter tools. He configures roles and permissions. He optimizes loading times and Core Web Vitals. He documents thoroughly and hands over projects in an organized manner. Tim works closely with content, design, and tracking teams. He sets goals, measures key performance indicators, and makes incremental improvements. He delivers solutions that remain reliable in operation and maintenance.

Sophie Maschmeyer is a Content Manager at Storetown Media. She develops targeted content for online shops, blogs, and social media – data-driven, search engine optimized, and closely aligned with the needs of the target audience. Her focus is on creating texts that inform and sell: product descriptions, landing pages, guides, newsletters, and SEO articles. She works closely with web development, design, and marketing teams to ensure consistent messaging across all channels. At 26, she brings fresh perspectives, technical understanding, and a strong feel for language to every project. Her content is based on thorough keyword analysis, clear content goals, and measurable KPIs.

wrote this post

I am an e-commerce manager and web designer with over 14 years of experience in the digital commerce world. My focus is on the strategic, technical, and operational support of online shops – in both the B2C and B2B sectors. I develop and optimize e-commerce processes with one clear goal: greater efficiency, improved customer experiences, and measurable results. I work with leading shop systems such as Magento, WooCommerce, Shopware, Shopify, and JTL. Technically, I bring in-depth expertise in web development (HTML, CSS, JavaScript, PHP, MySQL) and am experienced in interface and API management, as well as the integration of ERP and PIM systems. UX/UI optimization, automation, and KPI-based reporting are as much a part of my daily work as managing projects through all phases – from planning to go-live. I support companies in developing their digital sales strategy, selecting technical platforms, and systematically expanding them – across all channels and in compliance with legal requirements.

Smart One Page Checkout — Documentation

User Guide

Overview

Accessing the Configuration

General Settings

Design and Layout

Logo

Colors

Typography

Layout Variants

Header Icons

Checkout Form Fields

Postcode Autofill (DACH)

Payment and Shipping Methods

Order Options

Legal Agreements

Newsletter

Sticky Order Bar (Mobile)

Coupon Code

Trust and Security Badges

General Settings

Color Customization

Pre-built Badges

Custom Badges

Footer and Legal Links

About This Module

Checkout Flow Overview

Virtual and Downloadable Products

Multi-Language Support

Best Practices for Conversion Optimization

Installation Guide

System Requirements

Installation via Composer

Manual Installation

Post-Installation Setup

Verification

Navigate to Stores > Configuration > STM > One Page Checkout

Set Enabled to Yes

Click Save Config

Add a product to the cart

Navigate to /checkout or click “Proceed to Checkout”

Configuration

Upgrading

Remove the old module files (keep the backup)

Extract the new version to app/code/IA24/OnePageCheckout/

Verify the new version in the admin panel

Uninstallation

Troubleshooting

Developer Reference

Architecture Overview

Module Structure

Configuration System

AJAX API Endpoints

Frontend Architecture

Payment Gateway Integration

Security Implementation

Accessibility (WCAG)

Performance Considerations

Customization Guide

Override checkout.phtml to add the HTML field

CLI Commands

Event Observers and Plugins

CSS Architecture

JavaScript Architecture

Compatibility Notes

Frequently Asked Questions

Which Magento and Adobe Commerce versions are supported?

Does it work with Hyvä themes?

Does it work with my payment provider?

What happens with virtual and downloadable products?

Which languages does the checkout ship with?

Does the checkout fill in the city from the postcode?

Is the checkout accessible?

Support

Navigate to `/checkout` or click “Proceed to Checkout”

Extract the new version to `app/code/IA24/OnePageCheckout/`

Override `checkout.phtml` to add the HTML field