dpa99c / cordova-plugin-inappbrowser-popup-bridge

A fork of cordova-plugin-inappbrowser which adds Braintree's PopupBridge functionality to support PayPal payments

cordova-plugin-inappbrowser-popup-bridge

This is a fork of cordova-plugin-inappbrowser which adds support for Braintree's PopupBridge libraries for Android and iOS to support PayPal payments within the context of the InappBrowser element of a Cordova-based app.

The purpose of PopupBridge is to allow Webviews to open emulated popup windows in a browser and send data back to the parent page in the Webview. This is essential for Web-based PayPal checkout flows which use the Braintree JS SDK which supports popup emulation via PopupBridge.

See the example app project which demonstrates usage of cordova-plugin-inappbrowser-popup-bridge.

Installation

cordova plugin add cordova-plugin-inappbrowser-popup-bridge

iOS:

• PopupBridge requires WKWebView.
• Therefore, this plugin depends on cordova-plugin-wkwebview-engine which adds WKWebView support to Cordova.
  • You need to add this manually: cordova plugin add cordova-plugin-wkwebview-engine
  • Or you can use the Ionic variant: cordova plugin add cordova-plugin-ionic-webview
• This means the main Cordova app Webview will also use WKWebView on iOS 9+.

Supported platform versions

The following supported platform versions are based on the versions suppored by the Braintree PopupBridge libraries.

Android

• Requires cordova-android@10+
• Requires Gradle v7.1.1 or above
• Supports Android 5.0 / API 21 and above
• Since v5, requires the Cordova activity to run as singleTask
  • Add <preference name="AndroidLaunchMode" value="singleTask" /> to <platform name="android"> in config.xml

iOS

• Requires cordova-ios@6+
• Supports iOS 9.0+

Example app

cordova-plugin-inappbrowser-popup-bridge-test contains a Cordova project which builds a test app for Android and iOS to illustrate usage of this plugin.

cordova-plugin-inappbrowser-popup-bridge's Issues

understanding differences from regular cordova-plugin-inappbrowser

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.

On iOS setting hidden=true in the options of cordova.InAppBrowser.open makes the entire app un-clickable

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

• bug report
• feature request
• documentation issue

Bug report

Current behavior:

When firing a hidden inAppBrowser browser, the app reports the browser as having started, and continues running, but the entire UI is un-clickable - as if there is a layer over the top that is catching all click events.

Expected behavior:

The app should continue to behave as normal.

Steps to reproduce:

Using the example project, for iOS, set hidden=yes (lines 48-49):
if( device.platform === "iOS" ) { iabOpts = 'location=no,toolbar=yes,hidden=yes';
Build for iOS, and click the button on the main app screen the browser. The browser is running but the app interface is completely un-clickable.

Environment information

• Cordova CLI version
  • 8.0.0
• Cordova platform version
  • ios 4.3.1
• Plugins & versions installed in project (including this plugin)
  • cordova-plugin-device 1.1.7 "Device"
  • cordova-plugin-inappbrowser-popup-bridge 1.0.10 "InAppBrowser with PopupBridge"
  • cordova-plugin-whitelist 1.3.3 "Whitelist"
  • cordova-plugin-wkwebview-engine 1.1.5-dev "Cordova WKWebView Engine"
• Dev machine OS and version, e.g.
  • OSX
    • ProductName: Mac OS X
    • ProductVersion: 10.11.6
    • BuildVersion: 15G1510

Runtime issue

• Device details
  • iPhone 7 Plus emulator
• OS details
  • iOS 10.2

iOS build issue:

• Node JS version
  • v6.9.1
• XCode version
  • Version 8.2.1 (8C1002)

Other information:
I first noticed this in my ionic project, which uses cordova-plugin-ionic-webview, however the same issue is exhibited on the native Cordova example project using cordova-plugin-wkwebview-engine.

Many thanks in advance!

Is it not possible to upgrade to the latest version?

Apache Cordova uses GitHub Issues as a feature request and bug tracker only.
For usage and support questions, please check out the resources below. Thanks!

---

You can get answers to your usage and support questions about Apache Cordova on:

• Slack Community Chat: https://cordova.slack.com (you can sign-up at http://slack.cordova.io/)
• StackOverflow: https://stackoverflow.com/questions/tagged/cordova using the tag cordova

---

If you are using a tool that uses Cordova internally, like e.g. Ionic, check their support channels:

• Ionic Framework
  • Ionic Community Forum
  • Ionic Worldwide Slack
• PhoneGap
  • PhoneGap Developer Community

Ionic Issue

I installed your plugin cordova plugin add cordova-plugin-inappbrowser-popup-bridge

Then I initialized in main.js file :

document.addEventListener("deviceReady",function(){


  window.open = cordova.InAppBrowser.open;

});

In html used it like:

<div id="myContainerElement"></div>

In controller file I used it:

paypal.Button.render({

    env: 'sandbox', // Optional: specify 'sandbox' environment

    client: {
        sandbox:    'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        production: 'xxxxxxxxx'
    },

    payment: function() {
    
        var env    = this.props.env;
        var client = this.props.client;
    
        return paypal.rest.payment.create(env, client, {
            transactions: [
                {
                    amount: { total: vm , currency: 'USD' }
                }
            ]
        });
    },

    commit: true, // Optional: show a 'Pay Now' button in the checkout flow

    onAuthorize: function(data, actions) {
    
        // Optional: display a confirmation page here
        $scope.payment = false;
    
        return actions.payment.execute().then(function() {
            // Show a success page to the buyer
            $scope.payment = false;
        });
    },

    onCancel: function(data) {
        console.log('The payment was cancelled!');
        //$scope.payment = false;
        $scope.$apply();
    }

}, '#myContainerElement');

Still the paypal button is not getting displayed on click of button, could you please help me out:

ionic-webview

Wanted to confirm if the popup-bridge works if we embed the paypal button on the ionic-webview directly and not using an inappbrowser to open up a page that has the paypal button in it?

how to use it with ionic 2

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

• bug report
• feature request
• documentation issue

Bug report

Current behavior:

Expected behavior:

Steps to reproduce:

Environment information

• Cordova CLI version
  • cordova -v
• Cordova platform version
  • cordova platform ls
• Plugins & versions installed in project (including this plugin)
  • cordova plugin ls
• Dev machine OS and version, e.g.
  • OSX
    • sw_vers
  • Windows 10
    • winver

Runtime issue

• Device details
  • e.g. iPhone 7, Samsung Galaxy S8, iPhone X Simulator, Pixel XL Emulator
• OS details
  • e.g. iOS 11.2, Android 8.1

Android build issue:

• Node JS version
  • node -v
• Gradle version
  • ls platforms/android/.gradle
• Target Android SDK version
  • android:targetSdkVersion in AndroidManifest.xml
• Android SDK details
  • sdkmanager --list | sed -e '/Available Packages/q'

iOS build issue:

• Node JS version
  • node -v
• XCode version

If using an Ionic Native Typescript wrapper for this plugin:

• Ionic environment info
  • ionic info
• Installed Ionic Native modules and versions
  • npm list | grep "@ionic-native"

Related code:

insert any relevant code here such as plugin API calls / input parameters

Console output

console output

// Paste any relevant JS/native console output here

Other information:

Feature request

Documentation issue

Incompatibility with cordova-plugin-facebook4 on iOS platform

I'm submitting a ...

• bug report
• feature request
• documentation issue

Bug report

Current behavior:

On iOS devices the attempt to login with facebook with Facebook app always fails with the response error User cancelled..
The bug has been tested on a clean Ionic app containing a minimal plugins set, it appeared after installing this plugin.

Expected behavior:

On iOS devices the attempt to login with facebook with Facebook app correctly succeeds as the login through email or phone number does.

Steps to reproduce:

On iOS click the button to login with facebook and from the webview shown below choose to login with the Facebook app.
This bug appears only on iOS, on android everything works as expected.

Environment information

• Cordova CLI version

  • 7.1.0

• Cordova platform version

  • ios 4.5.5

• Plugins & versions installed in project (including this plugin)

  • cordova-plugin-device 2.0.2 "Device"
  • cordova-plugin-facebook4 3.1.0 "Facebook Connect"
  • cordova-plugin-inappbrowser-popup-bridge 1.0.17 "InAppBrowser with PopupBridge"
  • cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
  • cordova-plugin-splashscreen 5.0.2 "Splashscreen"
  • cordova-plugin-statusbar 2.4.2 "StatusBar"
  • cordova-plugin-whitelist 1.3.3 "Whitelist"
  • cordova-plugin-wkwebview-engine 1.1.4 "Cordova WKWebView Engine"

• Dev machine OS and version, e.g.

  • OSX
    • ProductName: Mac OS X
    • ProductVersion: 10.13.6
    • BuildVersion: 17G65

Runtime issue

• Device details
  • iPhone X
• OS details
  • iOS 11.4.1 (15G77)

iOS build issue:

• Node JS version

  • v6.5.0

• XCode version

  • Version 10.0 (10A255)

• Ionic environment info

  • ionic (Ionic CLI) : 4.3.1
  • Ionic Framework : ionic-angular 3.9.2
  • @ionic/app-scripts : 3.2.0

• Installed Ionic Native modules and versions

  • @ionic-native/[email protected]
  • @ionic-native/[email protected]
  • @ionic-native/[email protected]
  • @ionic-native/[email protected]

'tools' namespace must be added to widget element

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

• bug report
• feature request
• documentation issue

Bug report

When adding this plugin from a default Phonegap config.xml you get an error saying error: unbound prefix.. The issue (I think) is the plugin.xml has the following code:

        <!-- PopupBridge -->
        <config-file target="config.xml" parent="/*">
            <preference name="android-minSdkVersion" value="16" tools:overrideLibrary="com.braintreepayments.popupbridge" />
        </config-file>

It is using a tools prefix, but that needs to be added to the <widget> as a valid attribute namespace for it to work properly.

The default phonegap widget element looks like this: <widget id="com.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

It needs to have the tools prefix defined so xmlns:tools="http://schemas.android.com/tools" must be added to make it <widget id="com.myapp" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:tools="http://schemas.android.com/tools">.

I'm not sure the default in Cordova, but it should be mentioned somewhere in the docs that xmlns:tools="http://schemas.android.com/tools" must be contained in the widget definition for this plugin to work.

Cannot install version 4 due to unmet requirements

Bug Report

Problem

What is expected to happen?

Should install on cordova 9.0.1

What does actually happen?

Unmet project requirements for latest version of cordova-plugin-inappbrowser-popup-bridge:
    cordova (9.0.1 in project, >100 required)
Fetching highest version of cordova-plugin-inappbrowser-popup-bridge that this project supports: 2.0.0 (latest is 4.0.1)

Information

The problem is the cordova dependencies block in package.json

"engines": {
    "cordovaDependencies": {
      "0.2.3": {
        "cordova": ">=3.1.0"
      },
      "4.0.0": {
        "cordova": ">100"
      }
    }
  }

Thanks for this great plugin!

Google Pay integration?

Has anyone been able to use this plugin for Google Pay payments? As far as I understand, Google Pay also requires the ability to open popups to perform the payment.

Missing cast to FragmentActivity

Bug Report

Problem

I can't compile my Android Project
Missing cast to Fragment Activity in following two lines :
InAppBrowser.java:385
InAppBrowser.java:1125

Running "ionic cap sync" is successful, but I can't actually compile the android source code

My changes to fix the problem:

InAppBrowser.java
- 385 : popupBridgeClient.deliverPopupBridgeResult(cordova.getActivity());
+ 385 : popupBridgeClient.deliverPopupBridgeResult((FragmentActivity) cordova.getActivity());

- 1125 : popupBridgeClient = new PopupBridgeClient( cordova.getActivity(), inAppWebView, urlScheme);
+ 1125 : popupBridgeClient = new PopupBridgeClient((FragmentActivity) cordova.getActivity(), inAppWebView, urlScheme);

What is expected to happen?

Compile the application and run on emulator

What does actually happen?

ionic cap run android is failing because of 2 syntax errors

Information

Console output :

[capacitor]         > Task :capacitor-cordova-android-plugins:compileDebugJavaWithJavac FAILED
[capacitor]         C:\Users\Jiyan\Documents\Eatura\EaturaMobileNew\android\capacitor-cordova-android-plugins\src\main\java\org\apache\cordova\inappbrowser\InAppBrowser.java:385: error: incompatible types: Activity cannot be converted to FragmentActivity
[capacitor]         popupBridgeClient.deliverPopupBridgeResult(cordova.getActivity());
[capacitor]         ^
[capacitor]         C:\Users\Jiyan\Documents\Eatura\EaturaMobileNew\android\capacitor-cordova-android-plugins\src\main\java\org\apache\cordova\inappbrowser\InAppBrowser.java:1125: error: incompatible types: Activity cannot be converted to FragmentActivity
[capacitor]         popupBridgeClient = new PopupBridgeClient(cordova.getActivity(), inAppWebView, urlScheme);
[capacitor]         ^
[capacitor]         Note: Some input files use or override a deprecated API.
[capacitor]         Note: Recompile with -Xlint:deprecation for details.
[capacitor]         Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
[capacitor]         2 errors
[capacitor]
[capacitor]         FAILURE: Build failed with an exception.

Command or Code

ionic cap run android

Environment, Platform, Device

Android with min SDK > 21

Version information

What are relevant versions you are using?
Ionic Framework, CLI Version 6.18.1
Capacitor
Windows 10, Android Studio

Checklist

• [ x] I searched for existing GitHub issues
• [ x] I updated all Cordova tooling to most recent version
• [ x] I included all the necessary information above

Need MSAL Cordova plugin for the Cordova Version 6.5.0

Please since our mobile application Cordova version is 6.5.0. We are looking for the compatibility version of MSAL which will work with Cordova version 6.5.0.

Kindly help me in this.

Motivation Behind Feature

Feature Description

Alternatives or Workarounds