Magento2: Magento version 2.2.7 braintree paypal popup block issue on chrome browser

[gulatipriyanka]

Magento version 2.2.7 braintree paypal popup block issue on chrome browser

Preconditions

Magento 2.2.7
PHP 7

Steps to reproduce

1. Block popup on chrome browser.
2. Checkout with paypal and click on "Continue to paypal" button. After that click on "continue" button, it will ask to unblock popup.
3. When we unblock popup and again click on "continue" button, Continue button does not works. We need to close the window from top and go back to checkout page and again click on "Continue to paypal" button and proceed further to place order which is quite confusing for customers. Customers complaining they are unable to checkout with paypal.

Please refer to attached screenshot.

Expected result

When we unblock popup and click on continue button, it should open the next window and allow us to proceed with further steps to place order.

Actual result

But continue button does not work after unblock the popup and we need to close the grey window from top and again go back to checkout page and again click on "Continue to Paypal" button, then continue button works to proceed further to place order.

Environment

Admin access: https://i-19821-2-2-7.instances.magento-community.engineering/admin
Login: admin Password: 123123q

Reproduced on 2.2.7

[magento-engcom-team]

Hi @gulatipriyanka. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [ ] Summary of the issue
• [ ] Information on your environment
• [ ] Steps to reproduce
• [ ] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me $VERSION instance

where $VERSION is version tags (starting from 2.2.0+) or develop branches (for example: 2.3-develop).
For more details, please, review the Magento Contributor Assistant documentation.

@gulatipriyanka do you confirm that you was able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [ ] yes
• [ ] no

[magento-engcom-team]

Hi @gulatipriyanka. Thank you for your request. I'm working on Magento 2.2.7 instance for you

[magento-engcom-team]

Hi @gulatipriyanka, here is your Magento instance.
Admin access: https://i-19821-2-2-7.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[gulatipriyanka]

Hi @gulatipriyanka, here is your Magento instance.
Admin access: https://i-19821-2-2-7.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

We are able to reproduce this issue on above environment.

Steps to reproduce

1. Firstly, block popup on chrome browser when user visits first time.
2. Add product to cart and click on proceed to checkout button.
3. Enter the required details and checkout with paypal. Select Paypal ( with braintree ) and click on "Continue to paypal" button. After that click on "continue" button, it will ask to unblock popup.
4. When we unblock popup and again click on "continue" button, Continue button does not works. We need to click on close button on top right on grey window to go back to checkout page. Then we need to again click on "Continue to paypal" button and proceed further to place order which is quite confusing for customers. Customers complaining they are unable to checkout with paypal.

Please find the attached screenshot for reference.

Similar link related to this might help:
https://github.com/magento/magento2/issues/10873

Thankyou.

[gulatipriyanka]

Hi @gulatipriyanka, here is your Magento instance.
Admin access: https://i-19821-2-2-7.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

[gulatipriyanka]

Hi @gulatipriyanka, here is your Magento instance.
Admin access: https://i-19821-2-2-7.instances.magento-community.engineering/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

Sorry, issue was closed by mistake. So, i have reopened the issue.

[simonmaass]

i am having the same problem in my magento 2 instance!
magento 2.2.7
php 7.1

[magento-engcom-team]

Hi @engcom-backlog-andrii. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [ ] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 6. Add label Issue: Confirmed once verification is complete.

• [ ] 7. Make sure that automatic system confirms that report has been added to the backlog.

[ghost]

Hi @gulatipriyanka thank you for you report, this is not magento 2 core issue please look at this link ->
https://support.google.com/chrome/answer/95472?co=GENIE.Platform%3DDesktop&hl=en
thank you.

[vetshopdeveloper]

@engcom-backlog-nazar surely any issue that prevents a sale being made in the browser with the largest market share is a CORE issue. It is up to Magento to respond to ensure out the box functionality works in Chrome, Firefox and Edge.

[LiamKarlMitchell]

Maybe this one?
@vetshopdeveloper https://github.com/genecommerce/module-braintree-magento2

[vetshopdeveloper]

Maybe this one?
@vetshopdeveloper https://github.com/genecommerce/module-braintree-magento2

Hi, we are aware of that module. It is currently not an option unfortunately as it is a great module and fully approved by Braintree.

The main issue is if Magento includes a module they need to ensure that they respond to changes in browsers that break the functionality of the included module or issues in modules that get included in the default code base that cause issues regarding the completion of checkout.

In this instance, if the above response of closing the issue as not being a *core * issue is the official line, they should remove the Magento-Braintree module and place a banner in the relevant section pointing to https://github.com/genecommerce/module-braintree-magento2

[ghost]

@vetshopdeveloper thank you, i'm able to reproduce only on live instance, but not local, on local instances have no this issue.

[magento-engcom-team]

@engcom-backlog-nazar Thank you for verifying the issue. Based on the provided information internal tickets MAGETWO-97230, MAGETWO-97231 were created

[vetshopdeveloper]

Thank you @engcom-backlog-nazar

[gulatipriyanka]

Thank you @vetshopdeveloper @engcom-backlog-nazar

[gulatipriyanka]

@engcom-backlog-nazar @magento-engcom-team What is the status of this task?

It has been more than 10 days, no one is assigned yet on this task. Please try to do it ASAP as many customers complain that they are not able to checkout using paypal.

[DanielRuf]

It has been more than 10 days, no one is assigned yet on this task. Please try to do it ASAP as many customers complain that they are not able to checkout using paypal.

Sorry but this is the opensource edition.

[DanielRuf]

The main issue is that dynamically triggered popups without a user gesture are blocked in Chrome by default.

[gulatipriyanka]

The main issue is that dynamically triggered popups without a user gesture are blocked in Chrome by default.

Yes, we know. But we need to fix it.

We already discussed if Magento includes a module they need to ensure that they respond to changes in browsers that break the functionality of the included module. It is up to Magento to respond to ensure out the box functionality works in Chrome, Firefox and Edge.

[DanielRuf]

It is up to Magento to respond to ensure out the box functionality works in Chrome, Firefox and Edge.

Not sure where you have got that from.

[gulatipriyanka]

@DanielRuf We have used Brain tree paypal in Drupal application also, the popup does not get blocked there and it works perfectly fine. Magento is using braintree module and it is fully approved module, it is implementing poup via an on-click action/event listener, to prevent pop-up blockers from interfering with the launch of the window. But magento is launching popup within an independent action, which is blocking the popup and interfering with checkout.

I have already mentioned the steps to reproduce this issue. Please check the above comments.

[DanielRuf]

I guess you mean the devs of the module, not Magento Inc.

[roughiain]

I guess you mean the devs of the module, not Magento Inc.

The code is hosted in the Magento GitHub Repo, Not on a separate repository. If I as a developer/company include code in my repository I become responsible for that code.

If Magento is not willing to do this they need to remove all non-magento core packages - Vertex - Termando - DotMailer and the like and point users to the various companies and there repositories.

[roughiain]

It is up to Magento to respond to ensure out the box functionality works in Chrome, Firefox and Edge.

Not sure where you have got that from.

Any project the size of Magento, Drupal, WordPress etc needs to respond to browsers as the browser is the applications platform. Chrome does what chrome thinks is best for its users, if a choice they make breaks some functionality on Magento that is included by default in a clean install, Magento needs to fix it.

[roughiain]

It has been more than 10 days, no one is assigned yet on this task. Please try to do it ASAP as many customers complain that they are not able to checkout using paypal.

Sorry but this is the opensource edition.

Being the open source edition does not give Magento on a pass on fixing issues that affect checkout. Checkout is the core of the product. If this issues is affecting open source edition users then it will 99% affect the companies that pay for the enterprise product.

[DanielRuf]

Sorry but you are wrong in many places. See the license files (GPL and guarantee) and fixing browser bugs is not really recommended. Chrome decided to block popups initiated by scripts without a user gesture. If there is some contributor who knows the solution, he/she will pick this issue and provide a fix.

magento.com is just the registry like packagist for a few thirdparty / contributed modules by partners.

[DanielRuf]

Enterprise customers have a dedicated and paid support.

Does this issue occur in previous Chrome releases and which release of the module introduced this issue (makes bisecting eassier)?

[magento-engcom-team]

Hi @hiren0241. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if your want to validate it one more time, please, go though the following instruction:

• [ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento-engcom-team give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 3. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento-engcom-team give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

[simonmaass]

any update here? this seems very important for our customers!

[fabio-fafle]

Possibly relates to https://stackoverflow.com/questions/50095021/paypal-braintree-pop-blocked-in-chrome.
file: module-braintree/view/frontend/web/js/view/payment/method-renderer/paypal.js
method Braintree.checkout.paypal.initAuthFlow() used as async callback, see changelog of file

[fabio-fafle]

Temporary workaround:

app/code/My/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Braintree/js/view/payment/method-renderer/paypal': {
                'My_Module/js/view/payment/method-renderer/paypal-mixin': true
            }
        }
    }
};

app/code/My/Module/view/frontend/web/js/view/payment/method-renderer/paypal-mixin.js (override payWithPayPal as 2.2.5)

define([
    'Magento_Braintree/js/view/payment/adapter',
    'Magento_Checkout/js/model/payment/additional-validators',
    'mage/translate'
], function (Braintree, additionalValidators, $t) {
    'use strict';

    return function (Component) {
        return Component.extend({
            payWithPayPal: function () {
                if (additionalValidators.validate()) {
                    try {
                        Braintree.checkout.paypal.initAuthFlow();
                    } catch (e) {
                        this.messageContainer.addErrorMessage({
                            message: $t('Payment ' + this.getTitle() + ' can\'t be initialized.')
                        });
                    }
                }
            }
        });
    }
});

[gulatipriyanka]

Temporary workaround:

app/code/My/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Braintree/js/view/payment/method-renderer/paypal': {
                'My_Module/js/view/payment/method-renderer/paypal-mixin': true
            }
        }
    }
};

app/code/My/Module/view/frontend/web/js/view/payment/method-renderer/paypal-mixin.js (override payWithPayPal as 2.2.5)

define([
    'Magento_Braintree/js/view/payment/adapter',
    'Magento_Checkout/js/model/payment/additional-validators',
    'mage/translate'
], function (Braintree, additionalValidators, $t) {
    'use strict';

    return function (Component) {
        return Component.extend({
            payWithPayPal: function () {
                if (additionalValidators.validate()) {
                    try {
                        Braintree.checkout.paypal.initAuthFlow();
                    } catch (e) {
                        this.messageContainer.addErrorMessage({
                            message: $t('Payment ' + this.getTitle() + ' can\'t be initialized.')
                        });
                    }
                }
            }
        });
    }
});

Yes, it worked. Thank you.

[vetshopdeveloper]

Just as an FYI: this response was received from Braintree support regarding another issue.

To be completely honest, the Magento Community plugin wasn't developed by Braintree

[simonmaass]

can confirm - workaround works on m2.3

[Adr79]

I am having the same problem in my magento 2.2.7 - php 7.1
Does workaround work on magento 2.2.7?

[kpitn]

Thank for the workaround, it works on M2.2.8 too

[Adr79]

Can someone explain to me how to apply the temporary workaround?
Should i create a 'fix module? or just modify some files?
Please help :-(

[DanielRuf]

You can use composer-patches to apply the patch or native patch.

[magento-engcom-team]

Unfortunately, we are archiving this ticket now as it did not get much attention from both Magento Community and Core developers for an extended period. This is done in an effort to create a quality, community-driven backlog which will allow us to allocate the required attention more easily.

Please feel free to comment or reopen according to the Issue reporting guidelines
the ticket if you are still facing this issue on the latest 2.x-develop branch. Thank you for collaboration.