Error message – No payment method selected

Hello everyone,

I have a problem with my Woocommerce webshop. On the checkout page I only have 1 payment method available (Mollie iDEAL). When a new user is on the checkout page, it needs to fill in all their information. Because there is only one payment method, the user doesn’t need to select the payment method, because it is already selected. But when the user wants to proceed, it gets the following error message: ‘no payment method selected’ (in Dutch: geen betaalmethode geselecteerd).

When the user refreshes the page, their information is already filled in. And now they can proceed with the payment.

I dug a little bit into the code, and I noticed that in the DOM the iDEAL option is checked, but in the POST request I don’t see the payment_method.
I made a (very) dirty work-a-round for my issue. I will post that at the bottom.

I’ve used the Strato wordpress hosting, so they have installed WordPress (6.8.3).
I have the following plugins installed:

• Mollie Payments for WooCommerce (Version 8.0.6)
• WooCommerce (Version 10.2.2)
• WP Mail SMTP (Version 4.6.0)
• WPForms Lite (Version 1.9.8.2)
• Essentials (The essentials plugin provides IONOS hosting specific functionality)
• Extendify WordPress Onboarding and AI Assistant (AI-powered WordPress assistant for onboarding and ongoing editing offered exclusively through select WordPress hosting providers.)
• Marketplace (Marketplace offers you a list of carefully selected plugins that will add functionality to your WordPress instance and improve your user experience.)
• Site Assistant (Provides guided onboarding and a Site Assistant in the WordPress admin.)

My work-a-round
My work-a-round to make this work, is to add a custom HTML block to the checkout page and add the following javascript to the page. This sets first the current payment to the (not enabled) “Direct bank transfer” and then reset it back to the mollie iDEAL payment method.

Technical: I think the issue is in the paymentMethodId, because the activePaymentMethod is set correctly (tested with wp.data.select('wc/store/payment').getActivePaymentMethod()). But the value of paymentMethodId is not updated. https://github.com/woocommerce/woocommerce/blob/4d2bb38575840530b70ef339ceb4997a6494db43/plugins/woocommerce/client/blocks/assets/js/base/context/providers/cart-checkout/checkout-processor.ts#L125

<script type="text/javascript">
jQuery(function($) {

  function setPaymentMethod(method) {
    return new Promise((resolve) => {
      const unsubscribe = wp.data.subscribe(() => {
        const current = wp.data.select('wc/store/payment').getActivePaymentMethod();
        if (current === method) {
          unsubscribe();
          resolve();
        }
      });
      wp.data.dispatch('wc/store/payment').__internalSetActivePaymentMethod(method);
    });
  }

  (async () => {
    await setPaymentMethod('bacs');
    await setPaymentMethod('mollie_wc_gateway_ideal'); // final state
    console.log("Mollie FIX");
  })();

});
</script>