Project: Build a Multi-Step Checkout Form with React and Formik

Project: Build a Multi-Step Checkout Form with React and Formik

In this project, we’ll build a checkout form. The form is going to have four steps. In the first step of the form, we’ll have fields for the user’s personal details. In the second step, we’ll include fields for the user’s shipping details. In the third step, we’ll have fields for the payment details. In the final step, we’ll include a checkbox field that the user needs to check to confirm if the information they supplied is accurate. The user interface design of all the steps in the form gives us the direction we need. We’ll try to make our form look as close as possible to what we have in the design while implementing the functionalities for the form. The technologies we’ll make use of are as follows:

  • React
  • Formik
  • Yup (for validation)
1 / 4
Step 1: Personal Details