Spree One Page Checkout

The checkout process plays an important role in driving sales for a business. Customers tend to abandon a tedious checkout despite being interested in buying the product. Overall, the checkout flow should be quick and easy for the customers to place orders. One page and multi-page checkout are the two most popular checkout methods and each one has it’s own pros and cons. Depending upon the nature of business and customer behavior, a specific type of checkout process might work for one business and fail for another.

We’ve built Spree accordion one-page checkout with the aim of serving customers with a seamless checkout experience that has the best of both worlds. Given it’s a one-page checkout, it’s fast as you don’t have to wait for page refreshes between each step and because it’s multi-staged as well, it brings along the comprehensiveness of a multiple page checkout. Only one section opens at a time asking for the right information in the right order. This solves both the problems – asking too much information from the customer in one go which looks cumbersome (one-page-checkout) and waiting for shifting contact from one page to another & losing context (multi-page checkout).

Below are some views from our Spree one-page checkout.

Once the Customer confirms/changes his email id, the next step is adding delivery address where either a new address can be added or one of the existing addresses can be selected. The steps which have been dealt with are marked in green so as to indicate checkout progress as shown below.

The customer can choose to enter a different billing address or mark it ‘same as shipping address’.

Once the address is selected, the next step is verifying product & delivery details. The quantity can be altered or the product can be removed altogether and the preferred shipping method is chosen.

Now, as the address and product details have been locked, the customer will select the payment method. By default the last used credit card is chosen (this behavior comes from another extension) which can be changed, a new card can be added or a different payment method can be selected. Coupon code (if any) is also entered here.

The last step is a single click confirmation from the customer about all the details he/she filled in. Order details can be changed by clicking on ‘Change’ option for the section in which changes are needed.

Any feedback and improvements about this extension are welcome at info@vinsol.com. Follow us on twitter for more updates!