How to integrate Hyvä Themes with a checkout

Checkout options with Hyvä Themes

Hyvä doesn’t force one checkout. The official docs describe it as “bring your own checkout,” with multiple supported patterns: Hyvä Checkout, Luma checkout, React Checkout, and third-party checkouts.

Step-by-step: integrate Hyvä Themes with your checkout

The exact commands differ by product, but the integration process always follows the same pattern: choose a strategy, install the checkout, wire it into Hyvä, then test thoroughly.

1. Choose your checkout strategy
   Decide if you want:
   • Hyvä Checkout (best integrated, separate license).
   • Luma checkout or Luma-based one-step checkout via fallback.
   • Hyvä React Checkout for custom React flows.
2. Install the checkout package via Composer
   From your Magento root, install the relevant module:
   • hyva-themes/magento2-hyva-checkout for Hyvä Checkout.
   • hyva-themes/magento2-luma-checkout for Luma fallback checkout.
   • hyva-themes/magento2-react-checkout for React Checkout.
   • Third-party checkout module (e.g., Mageplaza, Magespark, Amasty) following vendor docs.
3. Run Magento setup commands
   After requiring the package, run:
   • bin/magento setup:upgrade
   • Optionally bin/magento setup:di:compile (for production)
   • bin/magento setup:static-content:deploy (for production)
   • bin/magento cache:flush
   Hyvä and checkout docs show this exact pattern for Hyvä Checkout and React Checkout.
4. Configure checkout mode in the admin
   Depending on your choice:
   • For Hyvä Checkout, go to Stores > Configuration > Hyvä Themes > Checkout and select Hyvä as the default checkout.
   • For Luma checkout or one-step extensions, use Hyvä Themes > Theme Fallback to route /checkout (and related URLs) to the fallback theme.
   • For React Checkout, enable it via system config or CLI flag (e.g., hyva_react_checkout/general/enable).
5. Connect payment & shipping methods
   Make sure your payment/shipping providers are compatible with your chosen checkout:
   • Use “Hyvä Checkout ready” or “Hyvä React Checkout” payment modules where available (Mollie, Buckaroo, others).
   • For legacy modules, you may need Hyvä compatibility modules or fall back to Luma checkout.
6. Test the entire checkout journey on staging
   Run through guest and logged-in checkout, multiple payment methods, shipping methods, discounts, and edge cases. Fix any conflicts before touching production.

# From your Magento 2 root

# 1) Install Hyvä Checkout (requires a valid license)
composer require hyva-themes/magento2-hyva-checkout

# 2) (Recommended) disable HTML minification for Hyvä Checkout
bin/magento config:set dev/template/minify_html 0

# 3) Upgrade and deploy
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f

# 4) Flush caches
bin/magento cache:flush

Important notes: versions, B2B, and third-party modules

1. Magento & Hyvä versions

• Hyvä theme targets Magento 2.4.x; Hyvä Checkout and React Checkout have their own minimum Magento and PHP versions (React Checkout supports 2.3.4+).
• Always check each product’s compatibility matrix (especially for Adobe Commerce and B2B features).

2. Adobe Commerce & B2B features

Hyvä Checkout and Hyvä React Checkout focus primarily on standard Magento flows. Some Adobe Commerce-specific B2B features are still evolving or require extra work.

• Check the Hyvä Checkout feature matrix if you rely on quotes, company accounts, requisition lists, etc.
• Where coverage is missing, you may need fallback checkout or custom React components.

3. Payment and shipping modules

For Hyvä Checkout and React Checkout, payment and shipping methods must expose compatible UI components. The ecosystem now includes many “Hyvä Checkout ready” modules (Mollie, Buckaroo, and others).

• Prefer vendors that explicitly mention Hyvä Checkout or Hyvä React Checkout compatibility.
• For unsupported methods, plan for a custom compatibility module using Hyvä guidelines.

4. Performance expectations

One reason to move from Luma checkout to Hyvä Checkout or React Checkout is performance—fewer requests and a more modern frontend. Independent reviews highlight performance gains but also note that checkout still needs careful extension compatibility.

Verification checklist: is your checkout properly integrated with Hyvä?

After integrating any checkout with Hyvä on staging, validate it with this checklist before going live:

• Correct routing: /checkout and related URLs load the intended checkout (Hyvä, Luma, React, or third-party).
• Guest checkout: add to cart → checkout → place order works for a guest user.
• Registered checkout: log in, place order, see it in “My Orders”.
• Payment methods: all enabled payment methods appear and complete orders successfully.
• Shipping methods: shipping options, costs, and delivery info display correctly.
• Coupons & totals: discounts, taxes, and totals calculations are correct.
• JS & logs: browser console is free of recurring errors; Magento logs show no checkout-related fatal errors.
• Performance: Lighthouse / PageSpeed scores on the checkout route are acceptable and stable over time.

FAQs: Hyvä Themes and checkout integration