One-Page checkout

[Web10-Joris]

Is it possible to create a one-page checkout process? Instead of having separate pages for information, shipping, and payment, can we combine them into a single page with a "Pay" or "Checkout" button that redirects to the payment provider? After completing the payment, we can then display a separate confirmation page.

Are there any existing setups or ways to merge these separate pages into one without losing any functionality?

[duncanmcclean]

Hello 👋🏻

If you're using an off-site payment provider like Mollie or PayPal, it should be possible. Simply use the {{ sc:cart:update }} tag for collecting customer information & shipping info, then redirect them to a template that takes them to the payment provider (example for Mollie in the starter kit).

Unfortunately, if you want to use Stripe it's not possible. When the checkout page is loaded, Simple Commerce needs to create a payment intent with a set amount. If a shipping method was selected on that page which then changed the order total, it wouldn't be possible for it to be reflected in the payment intent.

You could get clever with JavaScript loading in the customer/shipping form first, then when it's submitted, loading the {{ sc:checkout }} form from the back-end needed for Stripe Payment Elements, but that's a little more complicated.

[Web10-Joris]

Thanks for the helpful answer! I'm using Mollie so that's great. I'll make one template containing the two cart update tags and then redirect to mollie.