DavidAJohn
commented
2 years ago On reflection, this would add unneccessary complexity.
The checkout page does everything in one go, and I'm happy with that.
If there where delivery options being added, perhaps it would make more sense. Although I'm not planning to add that.
The checkout page functionality is almost complete, but while I was working on it I wondered if it would be more effective (in terms of user experience) if the page used a "stepper" to move through the checkout process.
What I had in mind was something similar to the Angular Material Cdk Stepper.
Essentially, it appears to the user to be a series of tabs that you need to progress through in order to complete the payment process: order summary, delivery address, shipping options, card details, etc.
My initial thought is to save the details of each step in local/session storage so that we could re-hydrate it if the user left the page and came back.
The layout would probably need to progress in a vertical direction, similar to a Bootstrap accordion. This would help to maintain a responsive layout.