PopupBridge is an iOS library that allows WKWebViews to open popup windows in an SFSafariViewController browser and send data back to the parent page in the WKWebView.
PopupBridge is also available for Android.
See the Frequently Asked Questions to learn more about PopupBridge. See Using PayPal in a WebView to use PopupBridge with PayPal.
To integrate using CocoaPods, add the following line to your Podfile:
pod 'PopupBridge'
To integrate using Carthage, add github "braintree/popup-bridge-ios"
to your Cartfile
, and add the frameworks to your project.
To integrate using Swift Package Manager, select File > Swift Packages > Add Package Dependency and enter https://github.com/braintree/popup-bridge-ios
as the repository URL. Tick the checkbox for PopupBridge
.
If you look at your app target, you will see that PopupBridge
is automatically linked as a framework to your app (see General > Frameworks, Libraries, and Embedded Content).
To run the sample app, clone the repo, open PopupBridge.xcworkspace
and run the Demo
app target.
Register a URL type for your app:
com.my-app.popupbridge
In your application delegate's didFinishLaunchingWithOptions
method, set the return URL scheme.
#import <PopupBridge/POPPopupBridge.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[POPPopupBridge setReturnURLScheme:@"com.my-app.popupbridge"];
return YES;
}
PopupBridge:openURL
from either your app delegate or your scene delegate.If you're using UISceneDelegate
(introduced in iOS 13), call PopupBridge:openURL
from within the scene:openURLContexts
delegate method. Pass the URL on the appropriate UIOpenURLContext
.
- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
for (UIOpenURLContext *urlContext in URLContexts) {
NSURL *url = [urlContext URL];
if ([url.scheme localizedCaseInsensitiveCompare:@"com.my-app.popupbridge"] == NSOrderedSame) {
[POPPopupBridge openURL:urlContext.URL];
}
}
}
If you aren't using UISceneDelegate
, call PopupBridge:openURL
from within the application:openURL:
delegate method of your app delegate.
- (BOOL)application:(UIApplication *)app
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
if ([url.scheme localizedCaseInsensitiveCompare:@"com.my-app.popupbridge"] == NSOrderedSame) {
return [POPPopupBridge openURL:url];
}
return NO;
}
Integrate PopupBridge with the WKWebView:
#import <PopupBridge/POPPopupBridge.h>
@interface MyViewController () <POPPopupBridgeDelegate>
@property (nonatomic, strong) WKWebView *webView;
@property (nonatomic, strong) POPPopupBridge *popupBridge;
@end
@implementation MyViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[self.view addSubview:self.webView];
self.popupBridge = [[POPPopupBridge alloc] initWithWebView:self.webView delegate:self];
// replace http://localhost:3099/ with the webpage you want to open in the webview
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3099/"]]];
}
- (void)popupBridge:(POPPopupBridge *)bridge requestsPresentationOfViewController:(UIViewController *)viewController {
[self presentViewController:viewController animated:YES completion:nil];
}
- (void)popupBridge:(POPPopupBridge *)bridge requestsDismissalOfViewController:(UIViewController *)viewController {
[viewController dismissViewControllerAnimated:YES completion:nil];
}
Use PopupBridge from the web page by writing some JavaScript:
var url = 'http://localhost:3099/popup'; // or whatever the page is that you want to open in a popup
if (window.popupBridge) {
// Open the popup in a browser, and give it the deep link back to the app
popupBridge.open(url + '?popupBridgeReturnUrlPrefix=' + popupBridge.getReturnUrlPrefix());
// Optional: define a callback to process results of interaction with the popup
popupBridge.onComplete = function (err, payload) {
if (err) {
console.error('PopupBridge onComplete Error:', err);
} else if (!err && !payload) {
console.log('User closed popup.');
} else {
alert('Your favorite color is ' + payload.queryItems.color);
}
};
} else {
var popup = window.open(url);
window.addEventListener('message', function (event) {
var color = JSON.parse(event.data).color;
if (color) {
popup.close();
alert('Your favorite color is ' + color);
}
});
}
Redirect back to the app inside of the popup:
<h1>What is your favorite color?</h1>
<a href="#red" data-color="red">Red<src="https://raw.github.com/braintree/popup-bridge-ios/master/ <a href="#green" data-color="green">Green</a>
<a href="#blue" data-color="blue">Blue</a>
<script src="jquery.js"></script>
<script>
$('a').on('click', function (event) {
var color = $(this).data('color');
if (location.search.indexOf('popupBridgeReturnUrlPrefix') !== -1) {
var prefix = location.search.split('popupBridgeReturnUrlPrefix=')[1];
// Open the deep link back to the app, and send some data
location.href = prefix + '?color=' + color;
} else {
window.opener.postMessage(JSON.stringify({ color: color }), '*');
}
});
</script>
WKWebView can open popups through its WKUIDelegate
, which can be implemented to present the popup in a new WKWebView.
However, WKWebViews do not display an address bar or an HTTPS lock icon. If the popup receives sensitive user information (e.g. login credentials), users must implicitly trust that the web page is not redirecting them to a malicious spoofed page that may steal their information. PopupBridge solves this by using an SFSafariViewController.
window.popupBridge
) for the web page to interact with the iOS codewindow.popupBridge
; if so, it uses popupBridge.open
to open the popup URL
popupBridge.open
creates a SFSafariViewController to open the popup URL and has its delegate present the view controllerpopupBridge.onComplete
as a callbackThe deep link URL should match a deep link URL type in Xcode
The app delegate handles the deep link URL and forwards it to PopupBridge
One way to avoid hard-coding the deep link is by adding it as a query parameter to the popup URL:
popupBridge.open(url + '?popupBridgeReturnUrlPrefix=' + popupBridge.getReturnUrlPrefix());
popupBridge.onComplete
popupBridge.onComplete
gets called with the error and payload as null
and the delegate dismisses the view controllerWe are engineers who work on the Developer Experience team at Braintree.
Short answer: to accept PayPal as a payment option when mobile apps are using a WebView to power the checkout process.
PayPal authentication occurs in a popup window. However, this causes issues with Braintree merchants who use a web page to power payments within their apps: they can't accept PayPal because WebViews cannot open popups and return the PayPal payment authorization data to the parent checkout page.
PopupBridge solves this problem by allowing braintree-web
or PayPal's Checkout.js to open the PayPal popup from a secure mini-browser.
WebView-based checkout flows can accept PayPal with PopupBridge and the Braintree JS SDK or PayPal's Checkout.js. For the authentication flow, PayPal requires a popup window—which can be simulated with PopupBridge.
WKWebView
(See steps 1-3 of the quick start instructions)pod 'Braintree/PayPalDataCollector'
Although PopupBridge's primary purpose is to handle popups, it can be used in a more general use case to send URLs from the app to the JavaScript context in the WebView. These URLs can contain arbitrary data.
Register a URL type for your app, as described in the Quick Start.
In your application delegate, set up PopupBridge with the URL scheme:
#import <PopupBridge/POPPopupBridge.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[POPPopupBridge setReturnURLScheme:@"com.my-app.popupbridge"];
return YES;
}
Add a handler to the onComplete
callback:
if (window.popupBridge) {
popupBridge.onComplete = function (err, payload) {
if (err) {
console.error('PopupBridge onComplete Error:', err);
return;
}
console.log("Payload path:", payload.path);
console.log("Payload query items:", payload.queryItems);
console.log("Payload fragment:", payload.hash);
};
}
Create a URL that begins with your app's URL scheme and has a path of popupbridgev1
, e.g. com.my-app.popupbridge://popupbridgev1
. Add any additional data in the form of URL paths, query items, and fragments.
Call the PopupBridge openUrl:options:
method with that URL. The onComplete
handler will receive the URL as the payload. For example, if the URL is com.my-app.popupbridge://popupbridgev1/hi/there?foo=bar#baz=qux
:
console.log("Payload path:", payload.path); // "/hi/there"
console.log("Payload query items:", payload.queryItems); // {foo: "bar"}
console.log("Payload fragment:", payload.hash); // "baz=qux"
Braintree, [email protected]
PopupBridge is available under the MIT license. See the LICENSE file for more info.
link |
Stars: 32 |
Last commit: 1 week ago |
Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics