BigCommerce Single Page Checkout

Client: The client is one of the top most in the list, Who specializes in LED lights.

Requirement: Our client owns an eCommerce website built on Bigcommerce. He wanted us to modify the single page checkout provided by Bigcommerce. Instead of a step by step checkout, he needed a single-click single page checkout.

Challenge: The default style of the ‘Bigcommerce single page checkout’ contains many steps as shown in the picture below:

The system works as a step-by-step process in such a way that as the first step, the user has to login either as a guest or registered account. Once happen, the user has to fill the billing and account details as the second step and submit it. Thereafter only, the user can have the option to enter the shipping details and thereby the shipping method after submission. As the final phase of the process, the order could be confirmed. This makes the user to submit different times and may get delayed everything. Here comes the benefit of one-page checkout option.

Client asked us to convert this page into the style given below:

As shown in the first image, user has to enter details and click on ‘continue’ button to go to the next step till the payment. Client wanted to avoid this step-by-step method and remove all clicks except the last one to complete the order. It was not an easy task since Bigcommerce uses Ajax as default to register and validate data in each step. Even though we had to recreate this page using HTML and JavaScript which increased our effort.

Result: We could successfully create the page as per the client’s requirement. We could meet his expectation with perfection. The page that we have created is shown in the picture below:

Technologies: HTML, JavaScript, Ajax