Support payments within Webform

Problem/Motivation

We are building a checkout experience using a multistep Webform (in our case, a donation flow), and have encountered several UX limitations with the current Commerce Webform Order approach, which redirects users to the standard Commerce checkout page after submission.

This redirect introduces multiple UX issues for us, such as:

• Inconsistent layout and theming: the Webform is rendered using Canvas with a fully controlled layout, while the Commerce checkout page cannot easily be made Canvas-compatible, resulting in a visual and structural break in the user journey
• Loss of smooth step transitions: our Webform relies on AJAX-driven multistep navigation for a seamless experience, which is interrupted by a full-page redirect
• Broken navigation behaviour: using the browser “Back” button after reaching the checkout can lead to unexpected states (e.g. already submitted form or empty form), which degrades UX and may impact conversion

More broadly, this pattern prevents implementing a fully integrated, uninterrupted checkout flow within Webform, which is increasingly important for high-conversion use cases like donations.

At the same time, we still need to:

• Persist user progress into a Commerce Order as the form is being filled (for analytics and operational needs)
• Avoid saving/storing the actual Webform submission, as long as all data is stored in Commerce

Proposed resolution

We recognise that fully embedding Commerce payment processing into Webform would be a complex and high-effort task. Instead, we propose a lighter and more pragmatic approach:

• Extend the existing Webform handler to optionally persist user input into the associated Commerce Order incrementally (e.g. on each step), rather than only on final submission.
• Introduce a new Webform component that embeds the Commerce checkout payment step via an iframe. The embedded checkout page can be stripped down to render only the payment form (no navigation, no surrounding blocks - perhaps, outside of the scope for this module). This allows the payment step to visually and structurally integrate into the Webform flow. The approach leverages existing Commerce checkout functionality without duplicating payment logic.

We have prototyped this approach and found it to work reliably, including with multiple Stripe payment methods and PayPal.