Skip to main content

Checkout Configurations

The checkout consists of steps which are divided into actions. The reason you would define multiple actions within one step is for display purposes of the checkout timeline.

An action can depend on some variable which has to be true for the action to display eg. user needs to be signed in to show the address selection step.

To prevent the timeline to change its number of steps while navigating through the checkout we can group related actions.

info

Visually this will result in a timeline like

1. Basket → 2. Account → 3. Payment

Instead of:

1.Basket → 2. Sign In → 3. Account (And after signing in: 1. Basket → 2 → Account)

Configuration​

The base structure of the checkout consists of steps and a global config:

{
  "steps": {},
  "config": {
    "basic_registration": false,
    "shipping": false,
    "session_data": true
  }
}

The config object​

Global configs
basic_registrationAllows a user to register using only email and password. An activation email will be sent with a link the user has to click in order to use it's new account. During checkout additional account information will be requested to successfully place an order.
shippingShipping methods are shown on the basket page by default. Set this to false if you want to put this in some other step.
session_dataSet this to true if you want checkout session data available on all steps.

The steps object​

Step keys should always be sequential in the following format: step-0, step-1 etc.

The first step (step-0) is required. The reason for this is the timeline. It allows you to translate this step in the timeline.

Step name​

Each step should have a name property.

Both are valid (only not at the same time). A single language shop can have a string value for name. Multi-lingual shops should use an object with language code as key and a "default" key as a fallback for non-translated languages.

"step-0": {
    "name": {
        "default": "Basket",
        "nl_NL": "Mandje"
    },
    "name": "Basket"
},

Step actions​

Each step consists of one or more actions. Actions should be defined as an array of strings.

"step-1": {
    "name": "Account",
    "actions": [
        "authenticate",
        "register",
        "address"
    ],
},

Step action configuration​

To further configure an action we can add a new property object with the name of the action. This allows you to make an action depend on certain criteria.

"step-1": {
    "name": "Account",
    "actions": [
        "authenticate",
        "register",
        "address"
    ],
    "authenticate": {
        "depends": {
            "user": false
        }
    },
},

Step action features​

Each step can have additional features. These enable certain functionalities that may not be necessary for the customer.

Here the ds_telephone_required feature is enabled which makes telephone number required only when a delivery services is linked to a product in the basket.

"step-1": {
    "name": "Account",
    "actions": [
        "register"
    ],
    "register": {
        "depends": {
            "user": false
        },
        "features": [
            "ds_telephone_required",
        ]
    },
},

List of available step features​

Each step can only have certain features. Here is a list of features and on which step they should be configured:

Step: action_register​

FeatureExplanation
packstationEnable packstation address. Not in localized registration form!
i18n_addressValidate address by using the housenumber_optional, 2nd_address and format_street fields from the selected Country. Not in localized registration form!
klarnaEnable Klarna payment
address_validationValidates address by using a webservice. Only used by Fonq. Not in localized registration form!

Step: action_payment​

FeatureExplanation
klarnaEnable Klarna payment
packstationEnable packstation address.
gmpEnable Google Measurement Protocol on this step. This step should be the last step in the checkout process.

Step: action_shipping​

FeatureExplanation
quantoreReturns quantore_data with information about outlets and delivery

Step: action_review​

FeatureExplanation
gmpEnable Google Measurement Protocol on this step. This step should be the last step in the checkout process.

Depends-on exceptions​

  • user: true / false Does an action depend on the user being logged in or logged out.
  • oci: true / false Does an action depend on the user being logged in as an oci user or not.

Examples​

Single language shop example​

{
  "steps":
    {
      "step-0": { "name": { "default": "Basket" } },
      "step-1":
        {
          "address": { "depends": { "user": true, "oci": false } },
          "authenticate": { "depends": { "user": false } },
          "name": { "default": "Account" },
          "actions": ["authenticate", "register", "address"],
          "register":
            {
              "depends": { "user": false },
              "features":
                [
                  "address_validation",
                  "packstation",
                  "ds_telephone_required",
                  "i18n_address",
                ],
            },
        },
      "step-2":
        {
          "name": { "default": "Payment" },
          "actions": ["payment"],
          "payment": { "depends": { "payment": true }, "features": [] },
        },
      "step-3":
        {
          "review": { "depends": { "review": true } },
          "name": { "default": "Review" },
          "actions": ["review"],
        },
      "step-4":
        { "name": { "default": "Confirmation" }, "actions": ["confirmation"] },
    },
  "config":
    { "basic_registration": false, "shipping": false, "session_data": true },
}

Multiple languages example​

Below an example how to translate the breadcrumb path when the shop has multiple languages.

"step-2": {
    "name": {
        "default": "Payment", "de_de": "Zahlung"
    },
    "actions": [
        "payment"
    ],
    "payment": {
        "depends": {
            "payment":true
        },
        "features": [

        ]
    }
}
Last updated on