Open Flutter Project: Product Cart and Checkout in E-commerce App

The cart contains basic functionality:

• listing products in the cart with ability to add more or remove items.
• add to favourites.
• ability to apply promo codes from the codes available with quick filter by title.

The first two are very common. There are promotion coupons that are automatically available to all and some individual promotion coupons. The logic behind this is unique for each business and is set up by administrators.

The checkout process contains three steps:

1. Add basic information about user (if not registered).
2. Add shipping address.
3. Choose delivery method.
4. Add payment method (card) and “Submit Order”.

If you never heard about abandoned carts you should read this article.

As you can see the percentage of abandoned carts is more than 70%:

The abandoned reasons for retail are

You need to take each reason into consideration because it is your potential revenue. To decrease the churn rate on those step we need to optimize each step. The key logic is to save previous choices:

• Store shipping addresses in profile.
• Save card information (locally).

Storing complete card information on the device is not secure. Therefore card details will be stored in payment processing side and processing should be done using secret key to be stored on our side.

The screens above do not reflect the process when user adds shipping address from the checkout. It a simple form with a list of fields shown in the bottom popup.

The questions to be discussed:

1. Should we provide autocompleter for fields like city, country, postal code, street?
2. Where do we store the card secrete key device or server side?
3. Should we provide a popup when the user tries to remove item from the cart and propose to choose the same item with different attributes (when wrong size or color picked, for instance)?

Want this app to be done quicker?

Get in touch via LinkedIn to share your ideas and thoughts.