Checkout

The purpose of the checkout process is to keep the focus on the order by eliminating distractions that could keep the customer from completing their purchase. A page displaying the full cart helps the customer focus on their purchase decisions.

There are two types of checkout flows in Rapido: one-step-checkout and multi-step-checkout.

Read more about the configuration of the checkout flow in this article.

Rapido features a dynamic and responsive one-step-checkout flow where the following 5 sections are combined in a single step (Figure 2.1):

  • A billing/shipping address section (1)
  • A payment/shipping method section (2)
  • A voucher section (3)
  • A recurring order section (4)
  • A Review order section (5)
Figure 2.1 The checkout flow divided into 5 sections
  • All fields to be filled in are presented on a single page
  • The Billing / Shipping address section (1) consists of a sign-in button and input fields for billing and shipping address (billing address is auto-filled for logged-in users)
  • The Payment & Shipping section (2) lets the customer select one of the payment & shipping methods created on the solution
    • If the shipping provider supports the feature, the customer can click Change parcel shop in this section after they have entered a billing address (Figure 2.2) (when "change parcel shop" is available, the shipping address fields from section (1) will be removed)
  • The Voucher section (3) contains a form to submit a voucher code
  • The Recurring order (4) feature can be enabled by checking the Create recurring order checkbox, and then the following appears:
    • Dropdowns to select when the order should recur
    • Date selectors for start and end date
  • The Review order section (5):
    • Lists each product in the cart with a product image, name, number, quantity, price, unit, variant, and discount information
    • Allows the customer to edit the quantity or delete single products from the cart
    • Shows the subtotal price (excl. payment & shipping fees), shipping and payment fees, the total order price (incl. shipping & payment fees). Below, the VAT included in the total along with the total price with/without VAT is shown
      • Product prices are calculated based on your Ecommerce settings for the website. If Prices with VAT is set to No, then subtotal and total price will be excl. VAT, and below the total a price, the VAT-amount and total price incl. VAT are shown - and vice versa
    • Contains a comment section
    • Asks the customer to accept the terms and conditions (required to place the order) and to subscribe to newsletter (marks the Email permission checkbox as true for the user)
  • The cart can be either emptied using the empty cart button, or checked out using the go to checkout button
  • The cart can be converted to a quote using the create quote request button
Figure 2.2 Change parcel shop

The multi-step-checkout flow divides the checkout flow into three steps:

  • Cart
  • Delivery
  • Payment

The first step, Cart (Figure 3.1), gives an overview of what's in the cart. Here, a product can be removed from the cart and/or the quantity can be changed.

  • Lists each product in the cart with a product image, name, number, quantity, price, unit, variant, and discount information
  • Allows the customer to edit the quantity or delete single products from the cart
  • Shows the subtotal price excl. payment & shipping fees, the total order price incl. shipping & payment fees, and the VAT included in the total along with the total price with/without VAT
    • Product prices are calculated based on your Ecommerce settings for the website. If Prices with VAT is set to No, then subtotal and total price will be excl. VAT, and below the total price, a the VAT-amount and total price with VAT are shown
  • Contains a comment section
  • Asks the customer to accept the terms and conditions
  • The cart can be either emptied using the empty cart button, or checked out using the go to checkout button
  • The cart can be converted to a quote using the create quote request button
Figure 3.1 The first step with an overview of the cart

In the Delivery step (Figure 3.2), the customer must enter the billing address (and shipping address, if they differ) and select a shipping provider.

  • Anonymous customers are presented with input fields for entering a billing & a shipping address and a sign-in button
  • Logged-in customers are presented with their saved user details as a billing address (whether they are editable or not depends on the Checkout settings)
  • Logged-in customers can either enter a shipping address manually or select one of their saved addresses from their profile
  • The step contains a shipping section from which a shipping method can be selected using a radio button
    • If the shipping provider requires it, the customer must select a parcel shop instead of manually entering/selecting a shipping address (both for anonymous and logged-in users) - a Change parcel shop button will be available after the billing address is entered
  • A summary of the cart's contents is rendered on the right side of the address fields, and is updated with fees when a shipping method is selected
  • At the bottom, two buttons allow the customer to go back to the previous step or continue to payment in the checkout flow, while a third button allows the customer to create a quote request
Figure 3.2 The delivery step

In the last step, Payment (Figure 3.3), a shipping and a payment method must be selected.

  • The step contains a payment section where a payment method or a saved card can be selected.
    • If the selected payment method supports it, the card details can be saved for future purchases
  • In the voucher section, a voucher code can be entered and applied to the order
  • A summary of the cart's contents is rendered on the right side of the address fields, and is updated with fees when a payment method is selected
  • For logged-in users, this step contains a recurring order section with a checkbox to make the order a recurring order, and checking it reveals:
    • Dropdowns to select when the order should recur
    • Date selectors for start and end date
  • Below the summary, two checkboxes are rendered where the customer is asked to accept the terms and conditions (required to place the order) and to subscribe to newsletter (marks the Email permission checkbox as true for the user)
  • At the bottom, two buttons allow the customer to go back to the previous step or to the confirm order step in the checkout flow, while a third button allows the customer to convert the order into a quote request

When everything has been filled out, clicking Confirm order will redirect the customer to a checkout handler (currently, Rapido only supports Stripe). After the transaction, the customer receives a receipt.

Figure 3.3 The payment step

Rapido features a dynamic and responsive one-page-checkout flow where the checkout has been simplified to one page with the following elements (Figure 4.1):

  • A billing/shipping address section (1)
  • A payment/shipping method section (2)
  • An Order summary (3)
Figure 4.1 The checkout flow
  • All fields to be filled in are presented on a single page
  • The Billing / Shipping address section (1) consists of a sign-in button and input fields for billing and shipping address (billing address is auto-filled for logged-in users)
  • The Payment & Shipping section (2) lets the customer select one of the payment & shipping methods created on the solution
    • If the shipping provider supports the feature, a select parcel shop section appears where the customer must enter their zip code and street name (auto-filled for logged-in users) to select a pick-up parcel shop (Figure 4.2)
  • A comment section is shown below the Payment and shipping section
  • The customer is asked to accept the terms and conditions (required to place the order) and to subscribe to newsletter (marks the Email permission checkbox as true for the user)
  • The Order summary (3):
    • Lists the quantity count, payment and shipping fees, subtotal (excl. payment & shipping fees), total (incl. payment & shipping fees). Below, the VAT included in the total along with the total price with/without VAT is shown
      • Product prices are calculated based on your Ecommerce settings for the website. If Prices with VAT is set to No, then subtotal and total price will be excl. VAT, and below the total a price, the VAT-amount and total price incl. VAT are shown - and vice versa
  • The cart can be checked out using the place order button
Figure 4.2 Change parcel shop

The mini-cart provide customers with limited but always accessible information about the contents of the shopping cart.

  • Each product in the cart is shown with a product image, name, quantity, price, unit, variant, and discount information
  • Default payment methods & shipping methods are shown below the order lines
  • A total quantity for each product  is shown and the total price for the whole order
  • Products in the cart cannot be modified from the mini-cart (but with some orderlines view layouts, individual products can be removed from the mini-cart - read more here)
  • The shopping cart can be emptied using the Empty cart button
  • A proceed to checkout button leads customers to the multi-step/one-step checkout flow
Figure 5.1 Mini-cart

The quote cart is design to let the customer’s add specific products to the cart and request a quote

  • All fields to be filled in are presented on a single page
  • The page consists of an address section and a review order section
  • The address section consists of a sign-in button and input fields for user details (auto-filled for logged-in users)
  • The Review order section:
    • Lists each product in the cart with a product image, name, number, quantity, price, unit, variant, and discount information
    • Allows the customer to edit quantity or delete single products from the cart
    • Shows the subtotal incl. VAT, payment & shipping fees, the VAT included in the subtotal, and the total order price incl. VAT, shipping & payment fees
    • Shows the subtotal price excl. payment & shipping fees, the total order price incl. shipping & payment fees, and the VAT included in the total along with the total price with/without VAT
      • Product prices are calculated based on your Ecommerce settings for the website. If Prices with VAT is set to No, then subtotal and total price will be excl. VAT, and below the total price, a the VAT-amount and total price with VAT are shown
    • Contains a comment section
    • Asks the customer to accept the terms and conditions
  • The cart can be emptied using the Empty cart button, or checked out using the Go to checkout button
Figure 6.1 Request a quote