Creditcard components: The store card token request fails if the storefront is in a real or virtual subfolder

mbegerau commented 4 years ago

Environment

OS: Ubuntu 18.04 Apache: 2.4.29 PHP: 7.3.17 MySQL: 5.7.30 Shopware: 6.1.5 (fresh installation from production repository) Mollie: 1.0.10 Other Plugins: Shopware 6 Demo data (1.0.5)

Problem

The request to store the creditcard token (/mollie/components/store-card-token/{customerId}/{token}) fails when the storefront uses some kind of subfolder.

Consequence: The custom_fields field in the customer table may not contain the token required for the API request.

Detected causes

custom/plugins/MolliePayments/src/Resources/assets/js/components.creditcard.js, lines 145-153

145                const fetchUrl = '/mollie/components/store-card-token/' + customerId.getAttribute('value') + '/' + token;
146
147                console.log(fetchUrl);
148
149                // Store the token on the customer
150                fetch(fetchUrl, { headers: { "Content-Type": "application/json; charset=utf-8" }})
151                    .then(res => res.json())
152                    .then(response => {})
153                    .catch(err => {});

The fetchUrl is set as absolute link.

We have three cases where this causes a problem:

In the case of a language subshop (e.g. "/es") this will actually still work, but the context in the controller will be in the wrong language.
In the case of a different storefront (e.g. "/b2b") this will have a totally different context and if the storefronts don't share customers this will fail.
In the case of using a real subfolder (e.g. "/shop") this will fail always.

Solution suggestion

To use the same approach as you are using with other variables that you get from the backend we would suggest these changes:

Add the variable [mollie_baseurl] in line 145 like this: '[mollie_baseurl]/mollie/components/store-card-token/'.
Get the base url/path in the ComponentsController (componentsJs) and replace the variable with the base url. this worked for us: $baseUrl = preg_replace('#/mollie/components/js/creditcard.*$#', '', $_SERVER['REQUEST_URI']); there is probably a more robust solution using the Router or SeoUrlGenerator service.

iamreinder commented 4 years ago

Thanks for your help in finding and documenting this issue. We were in fact aware of this issue and have a fix that is your second solution but with use of the router service ;-) Expect this update next week.

mbegerau commented 4 years ago

Hey, thanks for your work! I can confirm that it's working now.

Environment changes compared to original post (completely new and clean shop): Shopware: 6.2.0 Mollie: 1.0.13

mollie / Shopware6