Help needed: Multi-step checkout form

Design help Ecommerce
1

Hello,

I’m currently building a travel agency(ish) website on Webflow, but cannot seem to find any apps/plugins to do what I need to do, so I need your help.
I’d be open to moving over to Shopify or any other platform if needed, but hopefully I can find a way to do this on Webflow.

I’m trying to create a multi-step, checkout experience, like a form but that updates the price of the basket dynamically when adding additional items.
Here’s a description of the flow and required functionalities:

  1. Select the number of passengers (should update the price)
  2. Select travel dates in a calendar.
  3. Select departure airport from a dropdown list
  4. Add-ons Page (Add checked Baggage, adds +30$, Breakfast, adds +15$, etc…)
  5. Enter personal details - Name, DOB, etc… for each passenger (2 passengers - 2 separate input fields group)
  6. Payment gateway
  7. Confirmation page

I found a website that does something very similar to what I want:
https://srprs.me/uk/fly/customise-trip?destination=1&days=3&incomingTime=13&outgoingTime=1&roomType=4&month=6&airports=146

I’m open to alternatives that include custom forms, etc it doesn’t have to be the exact experience from the website above but the end result should be similar.

Any ideas?

Thanks a lot!
W.

2

I always build custom-build multistep forms using JS or Typescript, because I like the flexibility that provides. There are also potentially some 3rd party solutions you can use to replace the forms, or to provide some of the multi-step-form engine functionality.

If you go custom, there are generally six parts you’ll want to build.

  1. UX logic, which handles things like;
    • master detail options, like country/city
    • loading country codes for international phone number entry
    • displaying “please describe” textboxes when “(other)” is selected in a dropdown list
    • repeating sections **
  2. Multistep validation
    • performs validation of an individual page
    • displays errors
  3. Navigation logic
    • decides whether you can continue
    • decides whether you can go back, or e.g. jump to step 3 depending on your UX
    • handles the transition between steps
    • triggers saves and loads for each page
  4. Order storage, tracks and stores the “order” data in an object
    • feeds the calculator
    • used for persistence on large forms
      • optionally, persists locally in webStorage, or remotely in a db
    • supports abandoned cart saves
  5. Calculator
    • uses the order object to perform calculations, returns an amount that can be displayed
  6. Submission handler
    • submits the data, does notifications, emails the client, etc.
    • triggers automations and order-processing systems
    • optionally, billing
    • redirects or results display, depending on the submission results

Most of this is straightforward, just a couple of hours of coding and testing.
The stickier part is billing, because;

  • You have variable pricing, so you must use a billing system that support arbitrary billing amounts ( Paypal, Windcave, Foxy )
  • You ideally want to know the billing result and display the confirmation page, which means integration. Foxy should offer to configure redirect URLs or return a result you can action. Paypal & Windcave might have both success and fail redirect URL options in their hosted payment page solutions.

Usually, I send them to the payment page and thank them. If payment was not completed, a human follows up to finalize things.

I’ve written this up here as well, and you’ll see some 3rd party solutions you can look into that might help, if you don’t do development and don’t want to hire one on this project.

1 Like
3

Hi @whitestar.
Josh with Foxy here. What you’re after should be possible with Webflow, Foxy, a date/time picker plugin (ie: Flatpickr or Mobiscroll), and some custom javascript.

With Foxy integrated into a Webflow form, you can allow for different options/add-ons that affect the price and display the calculated price in real-time on the page.

We’re happy to get you pointed in the general direction. Also, via our Accelerate Program, we can handle the integration for you. Please don’t hesitate to reach out: hello@foxy.io

Thanks,
Josh