Paypal-checkout-components: Electron Support - Can't open popup in electron

[standayweb]

In electron when using checkout js it throws this error "Uncaught Error: Can not open popup window - blocked". Is there support for using paypal-checkout with electron? I did find something called popupBridge which seems like it might be related.

[bluepnume]

Assuming you're talking about these:

https://github.com/braintree/popup-bridge-ios
https://github.com/braintree/popup-bridge-android

We have support for these in checkout.js -- so long as you're rendering the paypal.Button in a webview, and you're loading the popup-bridge in your app, things should work pretty seamlessly and it should allow popup windows to be used via a safari-view-controller.

I haven't tried it with electron but you might want to ask on one of those repos if there's any reason it wouldn't work.

[standayweb]

I was talking about some stuff named popupBridge https://github.com/paypal/paypal-checkout/blob/324cb911c28fa07fb1b7bccfd556f1354b7973e8/src/components/checkout/popupBridge.js I found when poking around the paypal-checkout code. Looking at those repos you linked they seem to be relating to mobile applications. We have a desktop app here in which the popup is being blocked.

Electron seems to block opening the new window so is there any way to force paypal to always open in the modal? Or is there some sort of hook for overriding the window opening behavior so electron can manage the opening of the window. I'm not sure how the new window paypal opens up communicates with the current one so it's hard for me to know if this would work. I could also possibly override the browser method paypal is using to open the new window. Not sure.

[bluepnume]

We can't force the modal 100% of the time due to infosec requirements on our side.

Yeah that file you linked is specifically to interface with the braintree/popup-bridge module

Feel free to experiment with forcing the popup some other way. I'm not sure off the top of my head what would work, if window.open doesn't. All communication right now is done using the native postMessage function in the browser.

[standayweb]

Ok ty, haven't had the chance to try it out yet but I'll get back to you when I do.

[AdrienFery]

I have the same problem, did you find a solution @standayweb ?

[standayweb]

Nope not yet @AdrienFery

[jookyboi]

Also having the same problem in my Electron app. Would love to at least get a workaround I can patch into my own fork of the repo.

[standayweb]

One idea is to try overwriting window.open with a function to open a new electron window, if that doesn't work then idk if this is possible to solve without changes to the lib. I haven't had a chance to test it yet since the thing I was working on involving this has been deprioritized for quite some time.

[jookyboi]

This is the error I'm getting when I click on the Checkout with Paypal button:

In Electron, it is possible to get OAuth2 to work without any modifications to window.open or postMessage so it puzzles me what's causing Paypal to fail. I'm seeing a webview open up but it instantly hits that exception.

[bipavesi]

Hi everyone, have someone found a solution? I have the same problem and I can not solve it. Every hint could be precious! Thank you

[jookyboi]

What's nice about the newest version of paypal-checkout is that it will fall back to using an iframe modal when the popup fails to load. With this functionality, you can basically close the blank BrowserWindow when Paypal tries (and fails) to navigate it to the checkout flow.

See my snippet at:
https://snippets.cacher.io/snippet/2b53c1618de354e301d4

[bluepnume]

Is there a specific user-agent for electron that we can detect in the checkout.js script?

[jookyboi]

@bluepnume Yes. You can either use window && window.process && window.process.type or process.versions['electron']. Discussion here: https://github.com/electron/electron/issues/2288

[bluepnume]

Thanks! Added a check to disable popups for electron for the next release, and default to iframe mode.

[jookyboi]

Awesome! Thanks @bluepnume. I'll be sure to try it.

[AleksMeshkov]

Thanks! Added a check to disable popups for electron for the next release, and default to iframe mode.

Hello, @bluepnume! Was it released already?

[bluepnume]

Should be -- do you see an issue still?

[AleksMeshkov]

Yep. I still have to use @jookyboi workaround. Seems paypal-checkout can't manage to detect the electron platform because new window still opens.

Let's check the platform detection code. Do you use this snippet? I suppose this is the best way. (https://github.com/electron/electron/issues/2288)

var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf(' electron/') > -1) {
   // Electron-specific code
}

[AleksMeshkov]

Awesome! Thanks @bluepnume. I'll be sure to try it.

@jookyboi , do you still have the issue? Have you tried the new release?

[bluepnume]

This is the current electron check: https://github.com/paypal/paypal-checkout/blob/master/src/lib/device.js#L130

Happy to add the useragent check too -- or feel free to PR it in, if you like. Thanks for the reference

[AleksMeshkov]

@bluepnume thanks for the opportunity! I've just made the PR. You can accept it if you'll find it ok.

[mcntsh]

@AleksMeshkov Thanks for your contribution! I went ahead and merged it in since @bluepnume is out. We do releases every Wednesday at 13:00 PST, so you can expect to see it then.

[AleksMeshkov]

@mcntsh thank you, Jon!

[AleksMeshkov]

@bluepnume @mcntsh
I still don't see an updated version in production even though today is Thursday. Has the deploy process went fine?

[masterkain]

I still see the issue, electron 8.3.0.

I render a remote web page in a mainWindow that is loading

https://www.paypal.com/sdk/js?client-id=xxxx&currency=EUR&debug=true

is the detection script process.versions && process.versions.electron working in this case?