Client-side Connect Flow

JavaScript v3SDK

• Current Braintree SDKs
• Android v4
• iOS v6
• JavaScript v3
• Previous Versions
• Android v3
• iOS v5
• JavaScript v2

availability

OAuth is in closed beta in production, and open beta in sandbox. Contact us to express interest in the production beta release.

iOS OAuth sequence

While the high-level OAuth sequence on the Overview still holds true, we recommend this iOS-specific client-side flow, which avoids exposing your client_secret:

1. The merchant taps a Connect with Braintree button in your app
2. Your app sends the merchant to Braintree for authorization using an SFSafariViewController
3. After the merchant has authorized and your server has created an access token, your server redirects the merchant to a URL that is captured by a custom URL scheme in your app

Display the button

We provide a Connect with Braintree button that allows you to send merchants to Braintree to log in and agree to your requested OAuth scopes. To display this button in your app:

1. Download the connect-braintree-ios assets
2. Add the button images as a new image set in your Xcode project's Asset Catalog
3. Add a button object to your view, using the assets you added as the button's image
4. Create an action for your button in your view's controller

Send the merchant to Braintree

Import SafariServices in your view's controller and extend SFSafariViewControllerDelegate.

Once that's done, create a property that holds SFSafariViewController, which you'll define later.

//  ViewController.swift

import UIKit
import SafariServices

class ViewController: UIViewController, SFSafariViewControllerDelegate {
    var safariVC: SFSafariViewController?

In the button action you created earlier, instantiate an SFSafariViewController with a connect URL retrieved from your server:

@IBAction func connectAction(sender: UIButton) {
  self.safariVC = SFSafariViewController(url: URL(string: CONNECT_URL_FROM_SERVER)!)
  self.safariVC!.delegate = self
  self.present(self.safariVC!, animated: true, completion: nil)
}

Prepare for the merchant to return

Now that you have a way of sending the merchant to Braintree, you'll need to make sure they have a way of returning to your app.

First, define a global constant at the top level of your view's controller to be used as the event name:

//  ViewController.swift

extension Notification.Name {
    static let braintreeConnectedRedirectNotification = Notification.Name(rawValue: "braintreeConnectedRedirectNotification")
}

class ViewController: UIViewController, SFSafariViewControllerDelegate { ... }

Add an observer in the viewDidLoad method of your view's controller to handle the redirect from Braintree:

override func viewDidLoad() {
  super.viewDidLoad()

  NotificationCenter.default.addObserver(self, selector: #selector(braintreeLogin(notification:)), name: .braintreeConnectedRedirectNotification, object: nil)
}

Then, define the corresponding braintreeLogin callback to dismiss the Safari view:

func braintreeLogin(notification: NSNotification) {
  self.safariVC?.dismiss(animated: true, completion: nil)
  // perform any additional actions like transitioning to another view here
}

Capture the custom URL

After your server uses the query parameters in the redirect URI to create an access token for the merchant, your server should redirect them back to a custom URL that your app captures. To do that, you'll need to define URL schemes and define a function in your app's AppDelegate.

URL schemes

Update your project's Info.plist CFBundleURLTypes property to enable your app to handle custom URL schemes:

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLName</key>
      <string>authredirect</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>examplescheme</string>
      </array>
    </dict>
  </array>

Application delegate

Define a function to handle the custom URL in your AppDelegate that will ensure the URL is from a trusted source and broadcast an event to our view:

// AppDelegate.swift

func application(application: UIApplication, openURL url: NSURL, sourceApplication: String?, annotation: AnyObject) -> Bool {
    NotificationCenter.default.post(name: .braintreeConnectedRedirectNotification, object: url)
    return true
}

important

Your server should not send sensitive information to the client via the custom URL, since multiple iOS apps are able to intercept custom URL schemes.

Broadcasting this event will trigger the braintreeLogin callback you defined earlier in your view's controller. This brings the merchant back into your application and completes the authorization flow.