Getting Started with Visa Developer
First time to the Visa Developer Center? Watch this tutorial to learn where to find the Visa APIs th...
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.
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.
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())
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:
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
First time to the Visa Developer Center? Watch this tutorial to learn where to find the Visa APIs th...
Watch the recording of my How to Run a Visa Direct Transaction using Python webinar as you follow al...
Learn how to create a project and where to find test data, credentials and sample code. Leave a comm...
We feel that the Visa Developer Center has come full circle since launch in 2016. It hosts many APIs...