Checkout

Swift ships with a checkout design which guides the customers through their purchase - it consists of the following:

• A Cart page with a shopping cart app - this page is used to show the cart contents to the customer when the cart-icon is clicked
• A Checkout anonymous page which handles the actual checkout procedure for anonymous users
• A Checkout user page which handles the actual checkout procedure for registered users

A summary of the cart is always presented, to show the customers what they are purchasing (Figure 1.1).

Figure 1.1 Checkout

When you work with Swift you therefore have three options for setting up the checkout:

• You can use the existing set up – in which case you don’t have to do anything
• You can use the page presets as a starting point
• You can do a manual setup from scratch

If you want to slightly modify the checkout design you can use our page presets as a starting point (Figure 2.1).

Figure 2.1 Checkout page presets

To create a checkout using the page presets:

1. Go to Navigation > Utilities and create a new Cart page
2. Under the Checkout section select the Cart page preset – this preset contains a preconfigured shopping cart app amongst other things
3. Under the new cart page create the following subpages – there’s a preset for each of them:
   1. Empty cart
   2. Checkout anonymous
   3. Checkout user

You can then modify the new checkout as you please without overwriting the standard design – making it easy to roll back any changes.

If you want to set up the cart and checkout manually without using the page presets you can follow this guide:

1. Go to Navigation/Utilities add new page and call it Cart
2. The Cart page should have these subpages:
   1. Empty cart
   2. Checkout anonymous
   3. Checkout user
3. The Cart page consist of a shopping cart app that uses the Bikes shop and has 2 steps.
   1. A Cart-step using the eCom7/CartV2/Cart.cshtml template
   2. A Checkout-step
4. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
5. On the Cart-app paragraph open the item-settings and add the appropriate links (Figure 3.1):
   1. Shop page link: Products
   2. Product page link : Products /details
   3. Checkout anonymous page: Navigation/Utilities/Checkout anonymous
   4. Checkout user: Navigation/Utilities/Checkout user

Next you must manually create content for the subpages – see below.

Figure 3.1 Adding the appropriate links to the cart item settings will link this paragraph correctly to other pages on Swift

The subpage Empty cart is a regular content page – you can use the visual editor to create whichever content you want, here a Feature-column with an icon and a text (Figure 4.1).

Figure 4.1 Creating an empty cart page

The checkout anonymous-page uses a shopping cart to check out anonymous users – here’s how to do a full manual setup:

1. Open the page and set it to Hide in menu
2. Add a Shopping Cart app to the page and create the following steps:
   1. Information – for reference, the standard setup uses the eCom7/CartV2/InformationAnonymous_v2.cshtml template.
   2. Delivery – for reference, the standard setup uses the eCom7/CartV2/DeliveryAnonymous_v2.cshtml template.
      1. Using the _v2 opens for e.g. Shipmondo parcelshop delivery (See image below). We've already documentet shipping methods and more specifically the setup of Shipmondo.   
   3. Payment – for reference, the standard setup uses the eCom7/CartV2/PaymentAnonymous_v2.cshtml template.
   4. Checkout – remember to call it Checkout
   5. Receipt – for reference, the standard setup uses the eCom7/CartV2/Receipt.cshtml template.
3. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
4. Open the paragraph item settings of the paragraph with the shopping cart app and fill in the following:
   1. Logo and logo link
   2. Product page link
   3. Cart page link
   4. Sign-in page
   5. Checkout user page link
   6. Terms and Conditions page link

Like the checkout anonymous-page, the checkout users-page uses a shopping cart to check out logged-in users – the setup is almost identical, but there are key differences:

1. Open the page and set it ti Hide in menu and setup permissions so it can only be accessed by logged-in users
2. Add a Shopping Cart app to the page and create the following steps:
   1. Information – for reference, the standard setup uses the eCom7/CartV2/InformationUser_v2.cshtml template.
   2. Delivery – for reference, the standard setup uses the eCom7/CartV2/DeliveryUser_v2.cshtml template.
      1. Using the _v2 opens for e.g. Shipmondo parcelshop delivery (See image below). We've already documentet shipping methods and more specifically the setup of Shipmondo.  
   3. Payment – for reference, the standard setup uses the eCom7/CartV2/PaymentUsers.cshtml template.
   4. Checkout – remember to call it Checkout
   5. Receipt – for reference, the standard setup uses the eCom7/CartV2/Receipt.cshtml template.
3. Under the Field Validation section you can add field validation as appropriate – typically for billing & shipping address fields 
4. Open the paragraph item settings of the paragraph with the shopping cart app and fill in the following:
   1. Logo and logo link
   2. Product page link
   3. Cart page link
   4. User address page link
   5. User account page link
   6. Terms and Conditions page link

Figure 6.1 Parcelshop selection process

The checkout app consists of several features that can be enabled or disabled. Some of the are configured simply by checking or unchecking a checkbox, while others might need some explanation. Also please remember that changes should be done on both checkout apps (mobile and desktop).
We have documented the most important features below:

Delivery dates allows the customer to choose specific dates for delivery instead of the next available date, this is often relevant in a B2B scenario. In Swift, this feature is available in the checkout process. You can create different settings for anonymous users and signed in users.

The settings are available either by clicking the app column on the checkout page or through the column editor in the Visual Editor. Swift has two different pages depending on if the customer is signed in or not this means that you will have to be specific about the situation you want to design for when configuring the delivery date.

1. In the Item settings/Column editor of the checkout app tick the Enable Delivery Date field in checkout checkbox

This will open a new section called Disabled Delivery Dates. Here, you can choose specific days of the week that are not available for delivery (e.g., weekends). You can also create longer periods of disabled dates (e.g., holidays).

If the customer has chosen a specific delivery date, it will be shown on their receipt.

Accepting terms and conditions are often a fundamental part of purchasing online. However, in some scenarios you might want to disable the need for confirmation. Swift is constructed with two checkout pages, one for anonymous users and one for signed in users. This means that you will have to change the settings on both pages if you want all your customers to be affected by the changes.

This documentation will explain how to disable the terms and conditions feature, should you want to enable it, you will of course have to do the steps opposite.

If you want to disable the field of terms and conditions in the checkout process, you will need to:

1. In Content, locate and click on your checkout page (either for anonymous users or signed in users).
2. Click the checkout app
3. In the Links section, clear the Terms and Conditions Page Link field
4. Enter the App part of the column
5. In the Field Validation section untick the Customer acceptance checkbox
6. Hit Save and Close

During checkout a signed in customer is presented with links for both editing the billing address and manage their addresses. Should you want to hide one or both links the configuration of the two settings happens on the checkout app on the user checkout page.

1. In Content, locate and click on the checkout page for signed in users
2. Click on the Checkout app
3. Check one or both boxes for hiding edit billing addresses and/or manage your addresses link
4. Hit Save and Close

When users are anonymous, the checkout fase will have different options for creating a user or logging in based on the data provided by the user (Figure 11.1). Should you not want this, if for example your Swift solution doesn't have a user setup, this can be removed. 

Figure 11.1 The user creation options during checkout.

As the user has both an option for creation and an option for logging in, we will split this guide in two. 

• Already have an account? Log in
  1. ​Locate the checkout page you want to change, this is properly the anonymous checkout page. In the default Swift solution, this is located at:
     Navigation/Utilities/Cart/Checkout anonymous
  2. Enter the settings of the checkout app
  3. At the bottom in the Links section locate the "Sign in page link" field
  4. Clearing this field will remove the "Already have an account? Log in" link at the top of the checkout
• Create an account for easier checkout next time
  1. Locate the checkout page you want to change, this is properly the anonymous checkout page. In the default Swift solution, this is located at:
     Navigation/Utilities/Cart/Checkout anonymous
  2. Enter the settings of the Cart app item type.
  3. Enter the app part of the settings by clicking "App" in the top menu 
  4. In the User management section, if the "Create user in checkout" checkbox is unchecked the "Create an account for easier checkout next time" checkbox will remove the checkbox from front end