Architecture of the shopping master. How to organize steps, branches, etc.?

Question

JavaScript

Buying master in an online toy.
Implementation only on the client side.
There is a user.
There are a number of goods (gold, premium, etc.)
For some goods, you must specify additional. options. for gold account number, for premium - premium type.
There are a number of payment systems (Yandex, Qiwi, Visa, etc.)
For some payment systems, you need to specify additional parameters (for Qiwi - phone)
If you buy a lot of gold through a visa, you get a bonus.
I want to make it in the form of a wizard with steps:
user
choice product selection additional product
parameters
payment system
additional. parameters
totals and proceed to payment.
Naturally, the list of goods and payment systems may change tomorrow.
It is necessary to come up with a mechanism for stepping back and forth and provide for the case in it "I went back two steps and changed the logic of the next steps or did not change it."
I have no idea how to build the code.
A certain control class arises, which operates with step objects.
A common context is stored somewhere (master data that fills in different steps)
How to organize the storage / management of step objects?
Who needs to know what the next/previous step is?
For example. I chose to purchase a premium through Qiwi, indicating the phone number for this very Qiwi. Then he rolled back, indicated the purchase of a gram of gold. Qiwi phone should not be lost, but! A gram of gold is worth less than the minimum payment amount through Qiwi. What should the client be warned about?
If such a trouble with dependencies is difficult, then stop at the option "when returning after a rollback, enter everything new."

Answer 1

Write all the data received from the user in localstorge, fill in from there.

Answer 2

Cookies or local storage, respectively, and the step can be stored there.