Creating a checkout flow pluginΒΆ

We will learn how to create a custom checkout flow.

Lets create a custom flow and we are going to use it for new orders.

Lets create a module that will do this.

If you are using Drupal Console, then you can execute this command from docroot:

1
drupal generate:module  --module="My checkout flow" --machine-name="my_checkout_flow" --module-path="/modules/custom" --description="My checkout flow" --core="8.x" --package="Custom" --composer --dependencies="commerce:commerce_checkout"

Create the plugin using this command.

1
drupal generate:plugin:skeleton  --module="my_checkout_flow" --plugin-id="commerce_checkout_flow" --class="CustomCheckoutFlow"

A new file CustomCheckoutFlow.php will be created inside src/Plugin/Commerce/CheckoutFlow.

Make sure that file looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php

namespace Drupal\my_checkout_flow\Plugin\Commerce\CheckoutFlow;

use Drupal\commerce_checkout\Plugin\Commerce\CheckoutFlow\CheckoutFlowWithPanesBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @CommerceCheckoutFlow(
 *  id = "custom_checkout_flow",
 *  label = @Translation("Custom checkout flow"),
 * )
 */
class CustomCheckoutFlow extends CheckoutFlowWithPanesBase {

  /**
   * {@inheritdoc}
   */
  public function getSteps() {
    return parent::getSteps();
  }

}

Here we are not adding any custom step. We are just inheriting the steps from the parent.

The parent provides these steps.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
return [
  'payment' => [
    'label' => $this->t('Payment'),
    'next_label' => $this->t('Pay and complete purchase'),
    'has_order_summary' => FALSE,
  ],
  'complete' => [
    'label' => $this->t('Complete'),
    'next_label' => $this->t('Pay and complete purchase'),
    'has_order_summary' => FALSE,
  ],
];

You can see these steps here <SITE_DOCROOT>/modules/commerce/modules/checkout/src/Plugin/Commerce/CheckoutFlow/CheckoutFlowBase.php inside getSteps().

Enable the module my_checkout_flow.

1
drupal module:install my_checkout_flow

We are going to create a new checkout flow.

Go to admin/commerce/config/checkout-flows/add

Custom checkout flow 1

Click Save.

Custom checkout flow 2

Now, it can be as simple as displaying only the completion message.

Custom checkout flow 3

Click Save.

We are going to use this checkout flow for future orders. To do that, go to admin/commerce/config/order-types/default/edit.

At the bottom you will see Checkout settings section. Select the checkout flow that you just created.

Custom checkout flow 4

Click Save.

When the customers now place an order, they will just see the completion message, and they don't have to pay a dime. Funny isn't it?

Lets make it more sophisticated. We will add login and review steps.

Alter CustomCheckoutFlow.php so that it looks like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php

namespace Drupal\my_checkout_flow\Plugin\Commerce\CheckoutFlow;

use Drupal\commerce_checkout\Plugin\Commerce\CheckoutFlow\CheckoutFlowWithPanesBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @CommerceCheckoutFlow(
 *  id = "custom_checkout_flow",
 *  label = @Translation("Custom checkout flow"),
 * )
 */
class CustomCheckoutFlow extends CheckoutFlowWithPanesBase {

  /**
   * {@inheritdoc}
   */
  public function getSteps() {
    return [
      'login' => [
        'label' => $this->t('Login'),
        'previous_label' => $this->t('Return to login'),
        'has_order_summary' => FALSE,
      ],
      'review' => [
        'label' => $this->t('Review'),
        'has_order_summary' => TRUE,
      ],
    ] + parent::getSteps();
  }

}

Go back to admin/commerce/config/checkout-flows and edit the checkout flow that you just created.

You will see the new steps.

Custom checkout flow 5
Custom checkout flow 6

Click Save.

The customers will now have to login, and they will be able to review the order while placing them.