availability

Visa Checkout is currently in a limited release to eligible merchants, and the API is subject to change.

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.

Visa Checkout

Visa Checkout 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 Visa Checkout. If you already have, do not initialize the Visa Checkout component with your own Visa Checkout 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 →