eCommerce Checkout Flow

The checkout-flow package includes all necessary pages for a smooth checkout process: cart, checkout, thank you, and cancel pages.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Contributing
5. Acknowledgments

About The Project

The checkout-flow package is here to help streamline your checkout process. It includes all necessary pages such as the cart, checkout, thank you, and cancel pages. These pages are designed to provide an easy and smooth user experience for your customers. Additionally, the package includes helpful features such as form validation and cart management to ensure a secure and efficient checkout process. This is a first version, it may have some bugs or limitations but it will help you to get started with your checkout process. The package is built with flexibility in mind, allowing for easy customization to match your brand and design. Give checkout-flow a try and see how it can improve your customer's checkout experience.

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm

  npm install npm@latest -g

Installation

Installing the checkout-flow package is easy and straightforward. If you're using npm, simply run the following command in your terminal:

npm i @jstemplate/checkout-flow

If you're using yarn, the command will be:

yarn add @jstemplate/checkout-flow

That's it! The package will now be installed and ready for use in your project. You can then import the package and use its components in your code. Please make sure that you have latest version of npm or yarn installed in your system."

Usage

Once the checkout-flow package is installed, you can start using it in your project. Here is an example of how to import the CheckOut component and use it in your code:

import { CheckOut } from "@jstemplate/checkout-flow";

function YourComponent() {
  const [loading, setLoading] = useState(false);
  const [summaryData, setSummaryData] = useState({});
  const [cartData, setCartData] = useState([]);
  const [userData, setUserData] = useState({});
  const [loggedIn, setLoggedIn] = useState(false);

  const onSubmit = (data) => {
    // handle form submit
  };

  return (
    <CheckOut
      loading={loading}
      formSubmit={onSubmit}
      summeryData={summaryData}
      cartData={cartData}
      userData={userData}
      autoFill
      userLogin={loggedIn}
    />
  );
}

In this example, we import the CheckOut component from the checkout-flow package and use it in a functional component. We also set up some state variables to be passed as props to the CheckOut component. The loading prop is used to display a loading spinner while the form is being submitted, the formSubmit prop is a callback function to handle the form submission, the summeryData, cartData, and userData props are used to display the order summary, cart items, and user information respectively, the autoFill prop is used to automatically fill the form fields if the user is logged in, the userLogin prop is used to check the user login status. Please make sure that you have the necessary data to pass to the component as props.

(back to top)

Contributing

We welcome and appreciate any contributions to the checkout-flow package. Whether it's a bug fix or a new feature, your help makes this package better. If you have an idea that you think would improve this package, please feel free to fork the repository and create a pull request or open an issue with the tag "enhancement". Also, don't forget to give the project a star!

To contribute:

1. Fork the repository
2. Create a new branch for your feature (git checkout -b feature/[feature-name])
3. Commit your changes (git commit -m '[feature-name]: added/fixed/updated')
4. Push to your branch (git push origin feature/[feature-name])

Thank you for your support!"

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Acknowledgments

We would like to acknowledge and thank the following open-source projects and libraries for their contributions to the checkout-flow package:

• react
• react-dom
• react-hook-form
• react-icons
• react-loading-skeleton
• react-toast-notifications
• typescript

also icon from Shopping cart icons created by Flat Icons - Flaticon

These packages and libraries were essential for the development of the checkout-flow package and we are grateful for the hard work and dedication of their developers and contributors."

Content assistance provided by OpenAI's GPT-3 (ChatGPT)

(back to top)