braintree / braintree-web-drop-in

Braintree Drop-in for the web
MIT License
200 stars 126 forks source link

Paypal payment opens up an extra window above the iframe #939

Open karolyi opened 2 months ago

karolyi commented 2 months ago

General information

Issue description

We've just turned paypal back on for our clients. Upon trying to pay with it, both Firefox and Chromium opens up a popup window on top of the iframe, while in the background some error is already displayed. I have no idea what this is, but we have many clients complaining about not being able to pay with paypal.

We initialize the dropin the following way:

  initDropin() {
    const paypalOptions = {
      flow: 'checkout',
      amount: this.options.amount,
      currency: this.options.currencyCode,
      buttonStyle: {
        color: 'blue',
        shape: 'rect',
        size: 'responsive',
      },
    }
    create({
      authorization: this.options.clientToken,
      container: '#dropin-container',
      locale: this.options.localeId,
      paypal: paypalOptions,
      threeDSecure: true,
      // dataCollector: {
      //   kount: true, // Required if Kount fraud data collection is enabled
      //   paypal: true // Required if PayPal fraud data collection is enabled
      // },
    }, ::this.onCreateDropin)
  }

What I've experienced is, it only opens up the popup the first time you try to pay. If you go back to the payment page and click on the "pay with paypal" a second time, no further popup will open.

There is not a single window.open in my code so this must be something that happens on your behalf.

Chrome screencast:

https://github.com/user-attachments/assets/59996343-073c-4066-8ce6-595f7f7fd131

Firefox screencast:

https://github.com/user-attachments/assets/63578b6c-37a7-4410-8ab3-4de8bb02125c

Here's to hoping for a fast resolution.

karolyi commented 2 months ago

Okay, here's the solution, of which you probably didn't think of:

opening a popup window for Paypal payments will need at least a same-origin-allow-popups value in the Cross-Origin-Opener-Policy header.

I use same-origin — the default in Django LTS if you have SecurityMiddleware enabled.

You might wanna at least document this, let alone to implement a better workaround for it.