How do I change and translate the "completion message" in Commerce checkouts?

Question

I want to change the text of the "completion message" that is shown when an order is paid for successfully. I also want to translate this message.

By default, the completion message text is:

Your order number is 1. 
You can view your order on your account page when logged in. 

I'm using Commerce 2 with Drupal 8.4.1.

By default, at /admin/commerce/config/checkout-flows/manage/default, the checkout flow looks like this:

There is no option to edit the completion message. Also, there is a translate link at the top of the page, but this translate link only lets me translate the name of the checkout flow, not the completion message.

So how do I edit/translate the completion message?

Answer 1

Template approach (recommended)

As revealed in the comment by @bojanz, you can just make a copy of the template file in your theme:

commerce/modules/checkout/templates/commerce-checkout-completion-message.html.twig

Custom checkout pane approach

There is documentation for this.

You can create your own custom checkout pane, which can be done with drupal console or by hand.

/MYMODULE/src/Plugin/Commerce/CheckoutPane

<?php

namespace Drupal\my_checkout_pane\Plugin\Commerce\CheckoutPane;

use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneInterface;
use Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\CheckoutPaneBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * @CommerceCheckoutPane(
 *  id = "custom_completion_message",
 *  label = @Translation("Custom completion message"),
 *  admin_label = @Translation("Custom completion message"),
 * )
 */
class CustomCompletionMessage extends CheckoutPaneBase implements CheckoutPaneInterface {

  /**
   * {@inheritdoc}
   */
  public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
    $pane_form['message'] = [
      '#markup' => $this->t('This is a custom completion message.'),
    ];
    return $pane_form;
  }

}