Client-Side Implementation

JavaScript v3SDK

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

availability

Masterpass, Amex Express Checkout, and Visa Checkout have been replaced with the latest unified checkout experience offered through Visa known as Secure Remote Commerce. If you were previously using Masterpass or Amex Express Checkout, you will need to integrate with SRC. If you were using Visa Checkout, you do not have to change your integration as SRC is an updated version of Visa Checkout. As such, you may see Visa Checkout referenced elsewhere in our documentation.

SRC is currently in a limited release to eligible merchants, and the API is subject to change. It is available in iOS v4+, JavaScript v3+, and Android v3.

Contact us to request access to the release.

Installation

Braintree

In your Podfile, include BraintreeVisaCheckout:

pod 'BraintreeVisaCheckout'

SRC

The Braintree Visa Checkout SDK depends on and includes VisaCheckoutSDK v7.2.0. It requires Xcode 12.0.

important

You are not required to sign up with SRC. If you already have, do not initialize the SRC component with your own SRC credentials. These details will be handled internally by the Braintree SDK.

Initialization

1. Configure the VisaCheckoutSDK when your app launches:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    VisaCheckoutSDK.configure()
    return true
}

1. Instantiate a BTAPIClient using the appropriate authorization

   • If using 3D Secure with Visa Checkout, you must use a client token from your server
   • Otherwise, you can choose between a tokenization key or a client token

2. Instantiate a BTVisaCheckoutClient:

let client = BTAPIClient(authorization: "<#CLIENT_AUTHORIZATION#>")!
self.visaCheckoutClient = BTVisaCheckoutClient(apiClient: client)

1. Create a Profile using the BTVisaCheckoutClient:

self.visaCheckoutClient.createProfile() { (profile, error) in
  guard let profile = profile as? Profile else {
      print("Failed to create Visa profile: (error!)")
      return;
  }

  // Customize the Visa Checkout experience
  profile.displayName = "My Merchant Name"
}

Generating a client token

If you choose to use a client token, you must generate it on the server and make it accessible to your client.

To use a merchant account ID other than your default, specify the MerchantAccountId when generating the client token. This merchant account ID must match the merchant account ID used to create the transaction.

Specifying payment details

note

See Visa Checkout's user interface guidelines for more information on UI and branding requirements.

1. Create a PurchaseInfo object, passing in an amount and currency
2. Specify additional payment details on this object, e.g. description, subtotal, shipping

Here is an example:

let total = CurrencyAmount(string: "1.00")
let purchaseInfo = PurchaseInfo(total: total, currency: .usd)

// Customize the purchase info
purchaseInfo.customDescription = "My Description"

Tokenizing

1. Create a VisaCheckoutButton and set it up
2. Call visaCheckoutClient.tokenize(CheckoutResult) with a CheckoutResult
3. We tokenize the result and return a VisaCheckoutNonce in the completion block

Here is an example:

let checkoutButton = VisaCheckoutButton.init(frame: CGRect.init(x: 0, y: 0, width: 213, height: 47))
self.view.addSubview(checkoutButton)

checkoutButton.onCheckout(profile: profile, purchaseInfo: purchaseInfo, presenting: self, onReady: { (launchHandler) in
    self.launchHandler = launchHandler
}, onButtonTapped: {
    self.launchHandler()
}, completion: { (result) in
    self.client.tokenize(result, completion: { (tokenizedVisaCheckoutCard, error) in
      if error != nil {
          print("Error tokenizing Visa Checkout card: %@", error.localizedDescription)
      } else if tokenizedVisaCheckoutCard != nil {
          // Send this nonce to your server, and create a transaction there.
          let nonce = tokenizedVisaCheckoutCard.nonce

          // Access Visa Checkout properties from this `VisaCheckoutCardNonce`, e.g.
          let shippingAddress = tokenizedVisaCheckoutCard.shippingAddress
      } else {
          // User canceled.
      }
    })
})