Webhook communication between your Magento webshop and Mollie

When you are developing on a webshop, you want to test if the Mollie payment methods are working correctly before deploying to your production environment. But when placing an order in this environment you may encounter the "The webhook URL is invalid because it is unreachable from Mollie's point of view" message.

Why is this happening?

When placing an order, Mollie will try to contact your webshop in the background of the payment process to notify the webshop of important updates: Things like when the order is paid, authorized, or canceled for example. Mollie needs valid URLs that can be reached from the Mollie servers to send these updates. To prevent that these updates are failing silently Mollie requires valid URLs.

Solution 1: Disable webhooks

Enabling webhooks is highly recommended, but not mandatory. It is possible to disable the webhooks and so prevent the error message. Your shop will still receive updates when the user is redirected from Mollie back to your webshop. However, when the user decides to leave directly after the payment process the update may never reach your webshop and the order will be in a limbo state. You can, however, always click on the "Fetch Status" button on the order view.

You can disable webhooks by navigation to Stores -> Configuration -> Mollie -> Advanced -> Triggers & Languages -> Use webhooks and set this to disabled.

Solution 2: Using Ngrok/Expose

Another solution is using a tunnel service like Ngrok or Expose. This step-through focuses on using Ngrok.

A tunneling service basically tunnels all traffic from a domain to your local computer, this way it bypasses any firewalls and prevents that you have to go into your router to open ports for a specific application.

When starting Ngrok it will create a public domain for you. By default, this is a random generated URL, but Ngrok offers (paid) options to get a fixed URL.

Getting Magento and Mollie to work correctly with Ngrok requires a few steps:

• Starting Ngrok.
• Changing the Magento base URL.
• Adding the Ngrok URL as a virtual host.

Before getting started, make sure you have Ngrok installed. See this page on how to install this for your system: https://ngrok.com/download

Step 1: Starting Ngrok

You can start Ngrok by running this command:

ngrok http 80 -subdomain=acme-store -region eu

The -subdomain option is a paid feature and not required. The -region eu option is also optional but will speed this up if you are in the EU.

After running this command you will see something like this:

Forwarding http://9229455c6109.eu.ngrok.io -> http://localhost:80

In this case, 9229455c6109.eu.ngrok.io is the URL.

Step 2: Changing the Magento base URL

You can change the URL in the backend of your Magento installation, or use N98 Magerun to do this for you:

export SHOPHOST="acme-store.eu.ngrok.io"
n98-magerun2 config:store:set web/unsecure/base_url http://$SHOPHOST/
n98-magerun2 config:store:set web/secure/base_url https://$SHOPHOST/
n98-magerun2 config:store:set web/unsecure/base_link_url https://$SHOPHOST/
n98-magerun2 config:store:set web/secure/base_link_url https://$SHOPHOST/
n98-magerun2 cache:flush

Step 3: Adding the Ngrok URL as a virtual host

This step highly depends on your installation, and may not be required at all.

When Ngrok is running, it requests the new URL on your local environment, but this may not know how they handle the *.ngrok.io URL, so you may need it to add as a virtual host or alias to your Apache or NGINX server. How this is handled highly depends on your local installation.

In case you run Laravel Valet or Laravel Valet+, you can do this by running this command:

valet link acme-store.eu.ngrok.io