Architecting a Headless Commerce Cloud Integration Using WordPress + Gravity Forms
We’re in the middle of testing a powerful, scalable, and sustainable architecture for delivering a headless Salesforce Commerce Cloud experience, using our existing Default Design system in WordPress, Web Force Connect (WFC) for sync and integration, and Gravity Forms + Stripe for checkout.
This Proof of Concept (POC) aims to validate whether we can deliver the full e-commerce journey — from product catalogue to payment to order capture — without needing to adopt heavyweight frameworks, introduce frontend technical debt, or move away from our structured, editor-first design approach.
Our Stack at a Glance
Layer | Approach | Role |
---|---|---|
Frontend Display | WordPress + AlphaBlock + Magic_Card | Display product listings and layouts using our default design framework |
Cart | Custom JS + LocalStorage | Lightweight cart experience with no dependency on WooCommerce or session-heavy logic |
Checkout | Gravity Forms + Stripe Add-On | Embedded checkout powered by Stripe Elements, fully styled within WordPress |
Integration Middleware | Web Force Connect (WFC) | Handles Salesforce sync and API auth |
Backend System of Record | Salesforce Commerce Cloud (via Web-to-Anything) | Receives order data via webhook and stores it for fulfilment, reporting, and attribution |
The User Journey (End-to-End)
Products are managed in Salesforce Commerce Cloud and synced to WordPress using our WFC Syncer, which maps SKU, price, and availability into clean ACF fields on product
CPTs.
Users browse products through our AlphaBlock-powered layouts and Magic_Card
templates, fully compatible with our Default Design structure (no custom themes, no taxonomies).
Cart logic is handled client-side, using a simple localStorage structure. This avoids the overhead of custom sessions or WooCommerce, and it makes the cart composable, persistent, and lightweight.
Checkout is split into two Gravity Forms:
- GF1: Dynamically renders product fields from localStorage and calculates the cart total. Submitting GF1 redirects to checkout.
- GF2: The actual checkout form, which includes:
- An HTML summary of the cart (for visual confirmation)
- A hidden field containing the raw cart JSON (for processing)
- A total field
- Optional user/shipping fields (ignored in this POC)
Payment is handled via Stripe, using the Gravity Forms Stripe Add-On. Payments are processed securely through Stripe Elements, with minimal friction.
On submission, GF2 sends a webhook to WFC, which receives and processes the form payload. WFC then pushes a cleaned and structured JSON payload into Salesforce via a “Web-to-Anything” DSE endpoint, logging the order as a staging record (External_Submission__c
).
Salesforce Flows or Apex then pick up the record, match it to a Contact, create an Order (or Opportunity, depending on implementation), and optionally link it to Campaigns or Product SKUs for fulfilment and analytics.
Why We Like This Architecture
Minimal Technical Debt – No reliance on WooCommerce, no React SPAs, no heavy JS carts.
Editor-First Flexibility – Every part of the front-end is managed via WordPress and our Default Design.
Stripe-Native – Fast, secure checkout using Stripe Elements with no third-party overlays or gateway layers.
Salesforce-Aligned – Orders flow directly into Salesforce, preserving attribution, fulfilment, and contact lineage.
Composable – Easy to scale this to support donations, subscriptions, events, or bundles in the future.
What We’re Testing in This POC
We’re using this short POC to validate a few key assumptions:
- Can Commerce Cloud cleanly accept order submissions created outside its native cart/checkout flow?
- Does our lightweight JS cart structure scale across products and sessions?
- Can Gravity Forms handle dynamic product rendering + secure checkout without creating maintenance debt?
- Can WFC gracefully transform and relay the payload without requiring intermediate object creation?
What’s Next
This approach offers a promising path toward a flexible, low-debt commerce framework — especially for organisations who want full CMS control without giving up on Salesforce as their system of record.
We’re currently in Week 1 of implementation, and once the POC is complete, we’ll share a follow-up post with:
- What worked
- What didn’t
- How we adjusted
- What we’re rolling forward into production
We’ll let you know how it goes — and the lessons we learn.