Designing Checkout Page

Checkout pages are used for the purchase of an item which exist in your  cart through the storefront.

The url for checkout page is: https://www.mystore.com/checkout

In global theme ms.th3.checkout widget must be used in all stores for accessing shipping and billing forms.

The checkout pages includes 3 steps:

• 1st step - the login and resgister form to get the user details.
• 2nd step - the shipping address or billing address so that the purchase item will be delievered to that user address.
• 3rd step - the paymnet gateways selection, in this ther user select the payment method by which medium user wants to pay the order amount.

Step 1 - Getting User Details

Step 2 - Add a shipping address form to your store

You can add a shipping address form to your store to let customers put the details where they want their purchased item to be shipped.
Following is a typical contact enquiry form


 

Enabling shipping address form

The shipping address form is by default enabled in all StoreHippo stores. Shipping address form is one of the built-in forms and is used to control the user address on the storefront at time of checkout. You can find and edit the shipping_address form in Site > Forms section in StoreHippo Admin Panel. 

Using the shipping address form on checkot page

You can use ms.form.shipping_address widget to show the shipping address form on the store. The widget uses the shipping address form and save user address data filled by the user. at time of checkout Use the following code to add the shipping address form                                                                                                               

    <form ms-widget="ms.form.shipping address" ms-data-formname="shipping address" ng-submit="submit()">
      <div ms-widget="form_layout" ms-data-buttonname="Ship to the Address"></div>
    </form>

Step 2 - Add a billing address form to your store

You can add a billing address form to your store to let customers put the details where they want their purchased item to be shipped.
Following is a typical contact enquiry form


 

Enabling billing address form

The billing address form is by default enabled in all StoreHippo stores. Billing address form is one of the built-in forms and is used to control the user address on the storefront at time of checkout. You can find and edit the billing_address form in Site > Forms section in StoreHippo Admin Panel. 

Using the billing address form on checkot page

You can use ms.form.billing_address widget to show the shipping address form on the store. The widget uses the billing address form and save user address data filled by the user. at time of checkout Use the following code to add the billing address form                                                                                                               

    <form ms-widget="ms.form.billing_address" ms-data-formname="billing_address" ng-submit="submit()">
      <div ms-widget="form_layout" ms-data-buttonname="Ship to the Address"></div>
    </form>

Every StoreHippo theme has a default form_layout widget that contains default implementation of forms.  You can customize the form layout as per your brand requirement.

Step 3 - Getting Payment Details
 

Payment Gateways you set up in admin will reflect on checkout.