Client-side Connect Flow

iOS v6

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

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 {
    ...
}

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.plistCFBundleURLTypes 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
}

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.