Additional Features/
Braintree Auth (Beta)/
Client-side Connect Flow

Client-side Connect Flow

The following Connect flow will guide merchants through authorization in your iOS app without exposing your client_secret:

  1. The merchant taps the Connect with Braintree button in your app
  2. Your app sends the merchant to Braintree for authorization using an SFSafariViewController
  3. Once the merchant has authorized, Braintree redirects them to the redirect_uri specified by the connect_url
  4. Your server performs the OAuth exchange
  5. Your server redirects the merchant to a URL that is captured by a Custom URL Scheme in your mobile app

ButtonAnchorIcon

  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 BraintreeAnchorIcon

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.
  1. Swift
// 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:
  1. Swift
@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's returnAnchorIcon

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:
  1. Swift
// ViewController.swift
extension Notification.Name {
    static let braintreeConnectedRedirectNotification = Notification.Name(rawValue: "braintreeConnectedRedirectNotification")
}
class ViewController: UIViewController, SFSafariViewControllerDelegate {
    //...
}
Next, add an observer in the viewDidLoad method of your view's controller to handle the redirect from Braintree:
  1. Swift
override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(self,
                                           selector: #selector(braintreeLogin(notification:)),
                                           name: .braintreeConnectedRedirectNotification,
                                           object: nil)
}
Finally, define the corresponding braintreeLogin callback to dismiss the Safari view:
  1. Swift
func braintreeLogin(notification: NSNotification) {
    self.safariVC?.dismiss(animated: true, completion: nil)
    // perform any additional actions like transitioning to another view here
}

Capturing the custom URLAnchorIcon

After performing the OAuth exhange, your server will redirect your merchant back to a custom URL that your app will capture. To do that, we'll need to define URL schemes and define a function in your app's AppDelegate.

URL schemesAnchorIcon

Update your project's Info.plistCFBundleURLTypes property to enable your app to handle custom URL schemes:
  1. XML
<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 delegateAnchorIcon

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:
  1. Swift
// 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.