UX improvements to the checkout completion page

Created on 14 May 2025, 23 days ago

Describe your bug or feature request.

The current default checkout completion page provides little or no useful information...
We simply output the following:
Your order number is [commerce_order:order_number].\r\nYou can view your order on your account page when logged in.

See the attached screenshot with belgrade:

It'd be interesting to output the pane summaries (just like on the review page, as well as the order summary) so we can confirm the shipping/billing information used for example, as well as information about the payment gateway / method used.

In order to output the summary, we'd need to set the "has_sidebar" flag to TRUE. Changing this suddenly means the coupon redemption pane would show up so we'd have to make sure the pane is not visible for non draft orders.

Also the main challenge here is not to break the checkout flows on existing sites so I believe we should allow toggling whether the summary panes are displayed on the completion page.

I'm suggesting we add a setting to the "CompletionMessage" checkout pane to allow toggling whether the summary panes are displayed.

We have 2 options for the setting:

  1. We default this new setting to TRUE, and we have to update existing checkout flows to set the boolean to FALSE to not break existing installs.
  2. We do not mess with existing config and update the default checkout flow Commerce ships with to output the summary.

Regarding the "has_sidebar" flag, not sure how we should go about this? Perhaps we can add a checkout flow setting for that and again here same dilemma... How do we not affect existing installs?

Will work on a POC.

✨ Feature request
Status

Active

Version

3.0

Component

Checkout

Created by

🇮🇱Israel jsacksick

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @jsacksick
  • 🇮🇱Israel jsacksick

    Here is how the checkout completion page looks like after the changes:

  • 🇮🇱Israel jsacksick

    I added a checkout flow setting:

        $form['display_sidebar_checkout_complete'] = [
          '#type' => 'checkbox',
          '#title' => $this->t('Display sidebar on checkout completion'),
          '#description' => $this->t('Whether the sidebar should be shown on the checkout completion page.'),
          '#default_value' => $this->configuration['display_sidebar_checkout_complete'],
        ];
    

    The default configuration is FALSE (again for the sake of not breaking existing sites).

  • 🇷🇸Serbia majmunbog

    I’ve tested the patch, and it works as expected.
    The checkout completion page displays the updated UX elements correctly, and I didn’t encounter any issues during testing.

  • 🇳🇴Norway zaporylie

    MR looks good to me. I tested it with both Drupal CMS and Commerce Kickstart, and it looks decent in both cases. The implementation is straightforward. The only thing that raises a yellow flag for me is the new condition for the coupon redemption form, but it feels more like fixing a bug than creating a functional regression, although I am sure this could potentially break someone's workflow.

    I wonder if we should prepare a change record?

  • 🇮🇱Israel jsacksick

    A change record might be a good idea, especially since the functionality isn't going to be turned on for existing installs.

Production build 0.71.5 2024