StripeIntegration module not loaded on my browser after JS bundling and merging enabled.

[arulkailasam]

When i enable the JS bundling and merging for my Magento the stripe module not get loaded in my browser (No call in network tab related to stripe). If i disable the configuration again the module get loaded in my browser. Please help me to solve this problem.

[vovayatsyuk]

Please check if swissup/module-breeze-stripe-payments is updated. If "Yes", then I need a URL to the page on your site when the issue occurs.

This command will show outdated modules:

composer outdated "swissup/*"

[arulkailasam]

Running the command "composer outdated 'swissup/*'" produced the following output:

Color legend:

• patch or minor release available - update recommended
• major release available - update possible

Direct dependencies required in composer.json:
swissup/module-marketplace 1.10.3 1.10.4 One-Click modules and themes downloader/installer

Transitive dependencies not required in composer.json:
swissup/module-breeze 2.17.13 2.18.0 Performant Magento Frontend
swissup/module-breeze-integrations 1.3.2 1.3.3 Third-party modules integrations with Breeze Frontend
swissup/theme-frontend-breeze-blank 2.8.4 2.8.5 Clean, lightning-fast breeze-powered theme.

Is this version the cause of the issue? If not, please let me know if you need any additional details.

[arulkailasam]

Hi for this i have update the the theme using below command

composer update swissup/*

After the theme update i get a console error like below

core.min.js:57 Unable to resolve dependency {name: 'StripeIntegration_Payments/js/stripe_payments_express', parents: Array(1), deps: Array(0), cb: undefined, run: ƒ, …}

So i conform this, again i disable the bundling after this i get the payment button.

I mention the code below is responsible for button rendering. @vovayatsyuk Could you please review the data I provided?

 <script>
    require(['domReady!', 'StripeIntegration_Payments/js/stripe_payments_express', 'Magento_Customer/js/customer-data'], function(domReady, stripeExpress, customerData) {

        debugger;
        var cart = customerData.get('cart');
        var initECE = function() {
            var locationDetails = {
                location: 'product',
                productId: '38',
            };
            stripeExpress.initStripeExpress('#payment-request-button', {
                "apiKey": "API Key",
                "locale": "IN",
                "appInfo": {
                    "name": "Magento2",
                    "version": "4.1.6",
                    "url": "https://stripe.com/docs/plugins/magento",
                    "partner_id": "PARTNER_ID"
                },
                "options": {
                    "betas": [],
                    "apiVersion": "2024-03-02"
                }
            }, locationDetails, {
                "buttonHeight": 50,
                "buttonTheme": {
                    "applePay": "white",
                    "googlePay": "white",
                    "paypal": "gold"
                },
                "buttonType": {
                    "applePay": "plain",
                    "googlePay": "buy",
                    "paypal": "paypal"
                },
                "paymentMethods": {
                    "applePay": "auto",
                    "googlePay": "auto",
                    "link": "never",
                    "paypal": "auto"
                }
            }, stripeExpress.initProductWidget.bind(stripeExpress));
        };
        initECE();
        cart.subscribe(function() {
            // Wait for Magento to commit the changes before re-initializing the ECE
            setTimeout(function() {
                stripeExpress.log("onCartUpdated");
                initECE();
            }, 500);
        });
    });
</script>

[vovayatsyuk]

Unfortunately, I can't reproduce this issue locally. Please provide a URL to your site.

[arulkailasam]

Sorry I am currently working on a test site that is only accessible locally. Please let me know if you need any information, and I will be happy to provide it.

[arulkailasam]

Hi All,

After extensive debugging, I discovered the root cause of the issue: the Stripe module was not loading separately when JavaScript bundling or merging was enabled.

I am using the Breeze theme in my Magento setup, which includes a breeze_default.xml file for configuration. In my scenario, I had to override this file in my custom theme to ensure the StripeIntegration component loads properly within the default section.

Below is the configuration for your reference:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="breeze.js">
        <arguments>
            <argument name="bundles" xsi:type="array">
                <item name="default" xsi:type="array">
                    <item name="items" xsi:type="array">
						<item name="StripeIntegration_Payments/js/stripe_payments_express" xsi:type="array">
                           <item name="path" xsi:type="string">StripeIntegration_Payments/js/stripe_payments_express</item>
                        </item> 
						<item name="StripeIntegration_Payments/js/stripe" xsi:type="array">
                           <item name="path" xsi:type="string">StripeIntegration_Payments/js/stripe</item>
                        </item> 
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

When I changed the text 'default' in the XML to 'dynamic' (which is already used for the PayPal component), the Stripe module was loaded separately instead of being bundled into the default.js file.

This resolved my issue completely.