Change order submit button text to "Complete checkout" for manual payments

Created on 9 July 2018, over 6 years ago
Updated 10 May 2024, 8 months ago

Problem/Motivation

If a site has a "manual" payment gateway enabled and a visitor checks out using that payment method, the submit button text on the checkout review page says "Pay & complete purchase". This is misleading for the visitor because there is no payment happening on the next screen, the order is confirmed right away.

Proposed resolution

The button text should be: "Complete checkout" - just like it is for orders with an order total of zero.

Remaining tasks

Write patch so that button text is changed if a manual payment gateway is selected.
(My php knowledge is limited, sorry I can't provide a patch for this.)

๐Ÿ“Œ Task
Status

Active

Version

2.0

Component

Checkout

Created by

๐Ÿ‡ญ๐Ÿ‡บHungary dr. gubรณ

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

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ณ๐Ÿ‡ฌNigeria chike Nigeria

    I completely agree with this.

  • ๐Ÿ‡ฎ๐Ÿ‡ฑIsrael jsacksick

    The reason why the submit button label gets changed to "Complete checkout" for free orders is the logic in the payment process pane (PaymentProcessPane::isVisible).

    Basically, when the order is free, the payment process pane is marked as not vislble, and therefore the payment step is skipped. When there is no payment step, the next checkout step is "complete".

    See the following code in CheckoutFlowBase::getSteps():

    return [
          'payment' => [
            'label' => $this->t('Payment'),
            'next_label' => $this->t('Pay and complete purchase'),
            'has_sidebar' => FALSE,
            'hidden' => TRUE,
          ],
          'complete' => [
            'label' => $this->t('Complete'),
            'next_label' => $this->t('Complete checkout'),
            'has_sidebar' => FALSE,
          ],
        ];
    

    Unfortunately, we can't apply the same logic for manual payments. Because the manual payment is created by the payment process pane so the payment step & the payment process pane have to be visible.

    The other option could be a hook_form_alter() implementation, but it'd be hard to figure out when to actually alter the label as you could have other steps after the review (who knows). So while it may sound trivial, this feature request isn't actually trivial.

  • ๐Ÿ‡ณ๐Ÿ‡ฌNigeria chike Nigeria

    hook_form_alter() didn't work I guess for the same reason given by FrankDesign in the comment here, https://drupal.stackexchange.com/questions/308223/drupal-9-commerce-chan...

    Here is the code I used,

     function mymodule_alters_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
      if ($form_id == "commerce-checkout-flow-multistep-default") { 
        $form['actions']['submit']['#value'] = t('Complete checkout');       
        }
      }

    This does not work.

  • ๐Ÿ‡ฎ๐Ÿ‡ฑIsrael jsacksick

    @chike: Are you saying you can't target a specific checkout step? You should be able to?

  • ๐Ÿ‡ณ๐Ÿ‡ฌNigeria chike Nigeria

    I want to target the submit button, should be the last step I guess. What can I adjust in my code to target the button and change the text?

  • ๐Ÿ‡ฎ๐Ÿ‡ฑIsrael jsacksick

    $form['actions']['next']['#value']

  • ๐Ÿ‡ณ๐Ÿ‡ฌNigeria chike Nigeria

    It didn't work.

  • ๐Ÿ‡ฎ๐Ÿ‡ฑIsrael jsacksick

    This is the hook you need to implement:

    ```
    hook_form_BASE_FORM_ID_alter().
    ```
    Commerce PayPal alters the checkout form like this:
    commerce_paypal_form_commerce_checkout_flow_alter()

    So if your module name is "mymodule_alters", it should be mymodule_alters_form_commerce_checkout_flow_alter().

    You access the checkout step like the following:

      if ($form['#step_id'] === 'review') {
        $form['actions']['next']['#value'] = t('Complete checkout');   
      }
    
  • ๐Ÿ‡ณ๐Ÿ‡ฌNigeria chike Nigeria

    Yes this works.

    Thank you!

Production build 0.71.5 2024