Integrating the Visa Checkout Mobile SDK into your mobile app

[tfrank]

Ecommerce has grown to be a massive source of revenue, bringing in $517 billion to U.S. merchants in 2018(1). Furthermore, mobile commerce is predicted to account for more than 50% of all online sales in the next couple of years(2). With mobile commerce on the rise, Visa has been active in simplifying the payment process. One way we've done that is with the Visa Checkout Mobile SDKs.

Whether for iOS or Android, the mobile SDKs have allowed merchants to easily integrate a payment option into their existing apps. In their current iteration, a focus has been consistent look and functionality across multiple platforms. We accomplish this with our hybrid architecture, meaning our SDK allows merchants to configure and launch Visa Checkout with native code, but after that, the SDK presents the web experience to the user. With the use of the Visa Checkout web code, we get that consistent, familiar experience, immediate updates, smaller SDK size, and less time spent by merchants manually upgrading our SDK in their apps.

UI is consistent across iOS, Android and Web

Getting Technical

Our Android and iOS SDKs are very similar in functionality, so I'm choosing the iOS platform and Swift to dig into the details. Installing the SDK is very simple if you go the route of CocoaPods, details can be found here. Of course, there is a manual option which involves adding the .framework file to your Xcode project, details can be found in our documentation, located in the assets zip you can download from the Visa Developer Center

Once installed, there are 3 primary ways you can use the SDK, depending on your use case.

1. You have a native app with native components and would like to add Visa Checkout (VCO) to your checkout or shopping cart screen. In this case, we recommend using the VisaCheckoutButton
2. You have a native app with native components and would like to add VCO to your app, but would like to use your own button to actually launch VCO. In this case, we recommend using the custom checkout button implementation.
3. You have a native app mostly consisting of WKWebView instances that contain your existing web application that is already integrated with the Visa Checkout web SDK. In this case, we recommend using the hybrid plugin implementation to avoid issues with third-party cookies getting blocked.

To go even deeper, lets walk-through that first option and show what is needed to implement the VisaCheckoutButton. Before doing anything, we need to do an initial configuration call in the application:didFinishLaunchingWithOptions:

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

Now, go to the view controller in your app where you want the button to be placed. Next, we need to create a VisaCheckoutButton, which is a subclass of UIView. Either programmatically or in Storyboard, create it and save a reference on your view controller. The SDK works best when we can preload in the background so we will initialize the SDK from the viewDidLoad method.

This part is where a merchant can do most of their customization if they so choose. We will need to create a Profile and a PurchaseInfo before calling our setup method. The Profile object is full of details about your application and what environment you want to use. While the PurchaseInfo object is more about the specific transaction you are trying to complete for a user. Your VCO configuration could be as simple as this:

let profile = Profile(environment: .production, apiKey: "mySampleApiKey", profileName: nil)
let amount = CurrencyAmount(double: 23.09)
let purchaseInfo = PurchaseInfo(total: amount, currency: .usd)

Or it could be more detailed based on your needs as a merchant, like this:

let profile = Profile(environment: .sandbox, apiKey: "mySampleApiKey", profileName: nil)
profile.acceptedCardBrands = [CardBrand.visa.rawValue, CardBrand.mastercard.rawValue, CardBrand.discover.rawValue]
profile.acceptedShippingCountries = [Country.canada.rawValue, Country.mexico.rawValue, Country.unitedStates.rawValue]
profile.acceptedBillingCountries = [Country.canada.rawValue, Country.mexico.rawValue, Country.unitedStates.rawValue]
profile.acceptCanadianDebitCards = true
profile.displayName = "MerchantName"
profile.datalevel = DataLevel.full
profile.enableTokenization = true
profile.locale = "fr-CA"
profile.countryCode = "CA"
        
let amount = CurrencyAmount(double: 23.09)
let purchaseInfo = PurchaseInfo(total: amount, currency: .usd)
purchaseInfo.reviewAction = ReviewAction.continue

Note, the only properties that are required to be set are the ones included in the object init parameters. So clearly, there is a lot of customization to fit different needs, but once that is done, it's time to initialize the SDK.

checkoutButton.onCheckout(
    profile: profile,
    purchaseInfo: purchaseInfo,
    presenting: self,
    onReady: { [weak self] launchHandle in
        self?.launchCheckoutHandle = launchHandle
    }, onButtonTapped: { [weak self] in
        self?.launchVisaCheckout()
    }, completion: resultHandler())

1. Using the checkoutButton we created earlier, we call the onCheckout method to initialize VCO.
2. We pass in the profile and purchaseInfo objects we just created.
3. Pass in a reference to the view controller that will be presenting VCO.
4. We setup the onReady handler which will return another handler to be used later in launching VCO.
5. Since our SDK handles the button and it's listeners in this use case, we also provide a onButtonTapped callback so the merchant can know when to launch VCO.
6. Lastly, we have a callback that receives the result of a transaction, like cancel, success, or error.

A quick note about the onReady callback is that it gets called twice by our SDK. The first time is immediate so if a merchant is ready to launch right away, we can present a loading view while the SDK finishes initialization. The second time it's called is when VCO is done initializing so if the launchHandle is invoked at this point, VCO will be presented like normal. Therefore, if using the launchHandle directly from the onReady callback, be careful not to invoke it twice. Additionally, we don't want to launch VCO before the launchHandle has come in, meaning the SDK has initialized, so something like the following could help.

    func launchVisaCheckout() {
        guard let launchCheckout = self.launchCheckoutHandle else {
            return
        }
        launchCheckout()
    }

Next we have an example of what the result handler could look like in deciding how to handle different results.

func resultHandler() -> VisaCheckoutResultHandler {
    return { result in
        switch (result.statusCode) {
        case .statusInternalError:
            print("ERROR");
        case .statusNotConfigured:
            print("NOT CONFIGURED");
        case .statusDuplicateCheckoutAttempt:
            print("DUPLICATE CHECKOUT ATTEMPT");
        case .statusUserCancelled:
            NSLog("USER CANCELLED");
        case .statusSuccess:
            print("SUCCESS");
        case .default:
            print("SUCCESS");
        }
    }
}

That should cover all the setup you need to get running with Visa Checkout in your mobile iOS app. For more details, you can view the documentation in the VCO asset zip available on the Visa Developer Center.

Visa Developer Center

The Visa Developer Center is your home for learning and consuming the various SDKs and APIs that Visa provides. From there, with an account, you can download the VCO iOS SDK zip which contains the framework, documentation, and sample apps for reference. Here are the steps:

1. From the developer center website, click the "Sign In" link.
2. On that page, you should find a link to register your account or just click this.
3. Please fill out the required information and go through the email verification to complete your registration.
4. Then, once you sign-in, you should be taken to the dashboard where you can click "Add new Project".
5. Give your project a name, select the Visa Checkout checkbox, then create project.
6. Now, on the dashboard of your project, there should be a "Credentials" button on the left, click that.
7. Here you will find the API key needed to initialize the VCO mobile SDKs.
8. Click on the "Assets" button on the left and you will see all the Visa Checkout assets available for download.
9. In this example, select the latest version of "Visa Checkout SDK for iOS" and it will be downloaded.
10. If you unzip the downloaded file, you will find the "VisaCheckoutSDK.framework" which can be used for manual installation of the SDK. Additionally, you will find these directories:
    1. Assets - contains various branding elements you might need to use in your application.
    2. Documentation - all documentation about installing, usage, and class methods/properties.
    3. SampleApps - sample apps to better understand usage of the SDK.

The Future of Visa Checkout

Later this summer, Visa will be enabling a new digital shopping experience by adopting the standards-based approach of EMV Secure Remote Commerce. This will make things easier for consumers through consistency and availability. These are standards that can be adopted by any card brand, creating a more unified experience across many merchants. What does this mean for the mobile VCO SDKs? It should mean few changes for the merchant developer and an enhanced experience for the end consumer. There will be small branding changes like an updated button logo, but our goal is to make the transition as seamless as possible. For more info, please check out this article.

We hope Visa Checkout helps you in simplifying the payment process for your mobile applications. Remember, there is a Visa Checkout web SDK to help you to do the same for your website. For more information about Visa Checkout SDKs, you can go here or view the forums on the Visa Developer Center.

Have questions? Comment below and we'll help you out. Happy Coding! 

1 Digital Commerce 360, US ecommerce sales grow 15.0% in 2018, 2019

2 Big Commerce, Your M-Commerce Deep Dive: Data, Trends and What’s Next in the Mobile Retail Revenue World, 2019

Xcode and Swift are trademarks of Apple Inc., registered in the U.S. and other countries.

iOS is a trademark of Cisco in the U.S. and other countries.