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 only available for our Android v3, Android v2, iOS v4, and JavaScript v3 SDKs.

Contact us to request access to the release.

Installation

Braintree

In your Podfile, include BraintreeVisaCheckout subspec:

Ruby
pod 'BraintreeVisaCheckout'

For other integration options, see the Getting Started section of our README.

SRC

SRC for Braintree requires the Visa Checkout SDK running in your app.

To install the Visa Checkout SDK, see Visa's documentation on adding Visa Checkout to a mobile application.

The Braintree SDK is currently designed to work with Visa Checkout iOS SDK v6.6.0. Braintree Visa Checkout iOS SDK and Visa Checkout SDK require Xcode 9.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. Initialize the Braintree iOS SDK using the appropriate authorization
  2. Instantiate a BTVisaCheckoutClient:

    BTAPIClient *client = [[BTAPIClient alloc] initWithAuthorization:@"<#CLIENT_AUTHORIZATION#>"];
    self.visaCheckoutClient = [[BTVisaCheckoutClient alloc] initWithAPIClient:client];
  3. Get the VisaProfile from the Visa Checkout client:

    [self.visaCheckoutClient createProfile:^(VisaProfile * _Nullable profile, NSError * _Nullable error) {
       if (error) {
           NSLog(@"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 merchant_account_id 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 VisaPurchaseInfo object, passing in an amount and currency
  2. Specify additional payment details on this object, e.g. description, subtotal, shipping

Here is an example:

VisaCurrencyAmount *total = [[VisaCurrencyAmount alloc] initWithString:@"1.00"];
VisaPurchaseInfo *purchaseInfo = [[VisaPurchaseInfo alloc] initWithTotal:total currency:VisaCurrencyUsd];

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

Tokenizing

  1. Create a VisaCheckoutButton and set it up
  2. Call tokenizeVisaCheckoutResult:completion: with a VisaCheckoutResult
  3. We tokenize the result and return a VisaCheckoutNonce in the completion block

Here is an example:

VisaCheckoutButton *checkoutButton = [[VisaCheckoutButton alloc] initWithFrame:CGRectMake(0, 0, 213, 47)];
[self.view addSubview:checkoutButton];

[checkoutButton onCheckoutWithProfile:profile
                                           purchaseInfo:purchaseInfo
                      presentingViewController:self
                                                  onReady:^(LaunchHandle  _Nonnull launchHandle) {
            self.launchHandler = launchHandle;
        } onButtonTapped:^{
            self.launchHandler();
        } completion:^(VisaCheckoutResult * _Nonnull result) {
            [self.client tokenizeVisaCheckoutResult:result completion:^(BTVisaCheckoutCardNonce * _Nullable tokenizedVisaCheckoutCard, NSError * _Nullable error) {
            if (error) {
                NSLog(@"Error tokenizing Visa Checkout card: %@", error.localizedDescription);
            } else if (tokenizedVisaCheckoutCard) {
                // Send this nonce to your server, and create a transaction there.
                NSString *nonce = tokenizedVisaCheckoutCard.nonce;;

                // Access Visa Checkout properties from this `VisaCheckoutCardNonce`, e.g.
                BTVisaCheckoutAddress *shippingAddress = tokenizedVisaCheckoutCard.shippingAddress;
            } else {
                // User canceled.
            }
        }];
    }
];

Next Page: Server-side →