understanding differences from regular cordova-plugin-inappbrowser

[tisdall]

I'm submitting a ... (check one with "x"):

• bug report
• feature request
• documentation issue

Bug report

I'm trying to understand why this project is needed over using the regular cordova-plugin-inappbrowser . The Braintree dropin makes a call to window.open and expects to get results back. The regular call to window.open opens in the regular browser so it doesn't work, but doesn't using cordova-plugin-inappbrowser solve that? I think the dropin is programmed to call popupBridge if defined and then use window.open otherwise so isn't window.open = cordova.InAppBrowser.open enough? Or does the regular cordova-plugin-inappbrowser not return content properly?

I'm asking these questions (and came to this repo) because I tried just using the regular cordova-plugin-inappbrowser but couldn't get it to work and am trying to understand why (still opens in browser). Also, I tried using this repo but I got compile errors (unfortunately the error only says AAPT: error: unbound prefix. so I'm having issues figuring out why) so wasn't able to figure out if my original problem with cordova-plugin-inappbrowser is solved here.

Sorry for all the questions... It seems like Braintree's PopupBridge and cordova-plugin-inappbrowser do the same thing, so I'm confused why both are needed in combination.

[dpa99c]

If your goal is simply to support Braintree/Paypal payments in your Cordova app, you don't need this plugin. In fact you don't even need cordova-plugin-inappbrowser, you can simply use something like cordova-plugin-braintree to add support for Braintree/Paypal payments directly within your Cordova app.

However, this plugin is designed to solve a very specific use case: that is where a remote/external webpage contains the Braintree JS SDK to facilitate a Web-based PayPal checkout flow.
This page may be under 3rd party control so handling the payment directly from within the app is not an option.

In this use case, the app/Cordova Webview itself does not contain any Braintree/Paypal-related code, but it is contained as the Braintree JS SDK in the remote webpage which is opening in the inapp browser (IAB), i.e. cordova.InAppBrowser.open("http://www.remote.page/containing/braintree/js/sdk").

The Braintree JS SDK enables Web-based Paypal payments using a popup window via window.open to open a page at https://paypal.com in order to request/make the secure payment and uses cross-frame messaging to communicate the result of the payment request back to the window/frame containing the Braintree JS SDK.

And herein lies the problem when using cordova-plugin-inappbrowser: you cannot open a "popup" window from a webpage that is contained within the IAB. Calling window.open() from the webpage contained within the IAB opens the target page in the system browser, but cross-frame messaging between the page in the system browser and the page in cordova-plugin-inappbrowser is not possible, hence Paypal is unable to communicate the payment result back to Braintree JS SDK. Neither can you do something like replace window.open in the webpage inside the IAB with cordova.InAppBrowser.open since the IAB is not a Cordova webview so cannot reference its plugins.

This cross-webview messaging problem is why Braintree created the native PopupBridge solutions, which allow native app webviews with a page containing the Braintree JS SDK to communicate with a page in the system browser containing the Paypal checkout page.

This plugin takes the native Android and iOS PopupBridge solutions created by Braintree and applies them to the inapp browser webview, which enables pages loaded into the IAB which contain the Braintree JS SDK to successfully make Paypal payments by opening the PayPal "popup" in the system browser and enable cross-frame comms back the page inside the IAB webview.

Hope that all makes sense.

As for the build error you got, unsure what would cause that but you can try building the example project to see if it's related to your build environment vs your particular project.

[tisdall]

Thanks you so much for the detailed response!

I thought that cordova-plugin-inappbrowser provided a drop-in replacement for window.open that remained within the same context as the webview, but I guess that's not quite right. It seems the context is the same, but some of the methods commonly used to communicate with a popup aren't there.

Yes, I'm trying to encapsulate a regular web payment form with Braintree into a webview so this project is definitely what I need. I'm using PhoneGap Build and the build log just gives a line number of a file that was generated and I can't see... I'll see if I can figure it out and come back with some more useful details.

[tisdall]

figured out the issue and created #4 to address it

[tisdall]

I think I may be confused again... I was hoping to use this to have a Braintree payment dropin within the regular webview and then have a IAB that opens to process the PayPal portion. It seems like I have to open the page with the payment dropin in an IAB using cordova.InAppBrowser.open and this plugin handles the PayPal popup in yet another popup? (I'm trying to piece it together from the example app.)

If I have control over the page with the dropin, is it possible to override window.open (or even window.popupBridge) so that the dropin JavaScript will open an IAB itself to process the PayPal component?

[dpa99c]

I was hoping to use this to have a Braintree payment dropin within the regular webview and then have a IAB that opens to process the PayPal portion.

In order to achieve PopupBridge communication from the Cordova app webview, you'd need to augment the Cordova app webview itself to support PopupBridge.

This is beyond the specific-scope of this plugin which is a remote/external webpage opened in the IAB which contains the Braintree JS SDK.

Even then, PopupBridge will open the PayPal webpage in the system browser, not the Inapp Browser.

While all of this could technically be solved it would require extensive customisation of the native Cordova and PopupBridge code.

If you plan to integrate Braintree payments directly within the Cordova app webview, you ma be better to use cordova-plugin-braintree since it is a drop-in solution and no IAB at all is required to make the payments.

[tisdall]

Here's what I'm trying to do: I have a page that's loaded from a server into the webview that was using the v2 Javascript dropin. The v2 one didn't have the popup so it worked fine in a regular browser or the webview. I'm trying to make the page work in both a regular browser and also the Cordova webview with the v3 dropin. I tried using cordova-plugin-braintree but then I'd need to add a lot of additional code to emulate the dropin components of the form (I called it using cordova-plugin-remote-injection).

I tried using cordova-plugin-remote-injection and a little bit of js to override the window.open to be cordova.InAppBrowser.open but I just get error messages and it opens in an external browser any way. It seems there's no real way to get that to work.

I realize that what I'm doing is completely out of the scope of this project now, but I'm explaining it on the off chance you have any suggestions. I really appreciate all the time you've spent already to reply to these issues! I think I may either revert it to a v2 dropin or just prevent PayPal from being used when within Cordova. It's a shame, though, because I like how the v3 dropin works if it wasn't for this popup issue.