How do I change and translate the "completion message" in Commerce checkouts? 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?
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

&lt;?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 &amp;$complete_form) {
    $pane_form['message'] = [
      '#markup' =&gt; $this-&gt;t('This is a custom completion message.'),
    ];
    return $pane_form;
  }

}