The first piece of any integration effort is placing a Visa Checkout button on your shopping cart or payment pages. Before you start, you must set up a Sandbox account and credentials, consisting of an API key and shared secret, to communicate with Visa Checkout. You must also create an encryption key with its associated shared secret in your Sandbox account. Click Create Account in the Visa Developer Center or contact your Visa Checkout representative to get set up. Your API key and shared secret are created for you when you create your project (see Credentials) and you must create an encryption key and associated shared secret (see Configuration). For tutorial steps, see Visa Checkout Getting Started.
Note: The page you add a Visa Checkout button to must be hosted on a web server for the lightbox and JavaScript library to perform properly.
Step One: Add the onVisaCheckoutReady JavaScript function to the <head> and include the V. init initialization handler with your API key and encryption key. For example:
Start a Project
API Overview
API Reference
<head>
<script type="text/javascript">
function onVisaCheckoutReady (){
V.init({ apikey: "...", encryptionKey: "..."});
}
</script>
</head>
You can go back later and specify your logo and other settings to customize the appearance of the Visa Checkout lightbox. (For more details, refer to Visa Checkout Integration Guide.)
Step Two: Inside V.init, you also need to specify the amount and currency of the consumer’s payment request in the paymentRequest properties. For example:
paymentRequest:{
currencyCode: "USD",
subtotal: "11.00"
}
This is the simplest payment request you can implement. Using other paymentRequest properties, you can also specify amounts for tax, discounts and shipping, which will be shown to the consumer in the lightbox or, if you don’t have all that information in advance, you can include these amounts in the payment update after the lightbox closes. (For more details, refer to Visa Checkout Integration Guide.)
Step Three: Add V.on event handlers, one for each of the three possible payment events: payment.success (the consumer agreed to the payment request), payment.cancel (the consumer cancelled the payment request), or payment.error (an error occurred).
V.on("payment.success", function(payment) {alert(JSON.stringify(payment)); });
V.on("payment.cancel", function(payment) {alert(JSON.stringify(payment)); });
V.on("payment.error", function(payment,error) {alert(JSON.stringify(error));});
In addition to the Visa Checkout payment request ID (callId), Visa Checkout optionally returns the encrypted payload. (For more details about handling payment events and an encrypted payload, refer to Visa Checkout Integration Guide.)
Step Four: Place one or more Visa Checkout buttons in the body of the page. For example:
<body>
<img alt="Visa Checkout" class="v-button" role="button"
src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"/>
...
You can define additional properties for the button (for example, such as size, color or card brands accepted). Note: Some of these additional properties may override those set in the V.init handler. (For more details, refer to Visa Checkout Integration Guide.)
Step Five: At the end of the body, load the Visa Checkout JavaScript library sdk.js. For example:
<script type="text/javascript"
src="https://sandbox-assets.secure.checkout.visa.com/
checkout-widget/resources/js/integration/v1/sdk.js">
</script>
</body>
After completing these steps, you should have a web page whose source looks like this:
<html>
<head>
<script type="text/javascript">
function onVisaCheckoutReady(){
V.init( {
apikey: "...",
encryptionKey: "...",
paymentRequest:{
currencyCode: "USD",
subtotal: "11.00"
}
});
V.on("payment.success", function(payment)
{alert(JSON.stringify(payment)); });
V.on("payment.cancel", function(payment)
{alert(JSON.stringify(payment)); });
V.on("payment.error", function(payment, error)
{alert(JSON.stringify(error)); });
}
</script>
</head>
<body>
<img alt="Visa Checkout" class="v-button" role="button"
src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"/>
<script type="text/javascript"
src="https://sandbox-assets.secure.checkout.visa.com/
checkout-widget/resources/js/integration/v1/sdk.js">
</script>
</body>
</html>
When you are ready to begin testing your integration, you will need to create Visa Checkout consumer test accounts in the sandbox and add at least one payment method to them. You can start by creating your own test consumers when the Visa Checkout lightbox is opened. You will be shown an Add a New Payment Method screen in which you must enter a card number.
Note: You can enter any values on this screen which make sense to you, except that you must use one of the following card numbers. The name on card, expiration date and security code are not validated in the sandbox, so you can enter any valid value. Because card numbers are validated by Visa Checkout on entry, you should only use these numbers for sandbox testing.
Visa: 4005520201264821
MasterCard: 5500005555555559
American Express: 340353278080900
Discover: 6011003179988686
Contact your Visa Checkout representative for card numbers that return token information.
For an example of obtaining and decrypting the payload, refer to Visa Checkout Getting Started.
The Visa Checkout Mobile SDKs allow merchants to quickly build and implement a native and hybrid checkout application for iOS or Android-enabled devices. Visa Checkout enabled within a mobile application allows consumers to seamlessly and securely complete purchases on the go when using their iPhones or Android devices.
In addition to offering consumers Visa Checkout within a mobile application, the mobile SDKs have features that take advantage of device functionality, which includes:
To view and download all Visa Checkout assets, such as SDKs, login to Visa Developer > Project Dashboard. Please refer to Access Assets for more details.
While each SDK provides the same kind of tools, the actual integration methodology depends on the platform. (See the respective SDK for detailed information.)
To integrate the Visa Checkout iOS SDK into your Xcode project using CocoaPods, specify it in your Podfile.
The following Podfile takes the latest version of the VisaCheckoutSDK Pod:
platform :ios, '10.0'
use_frameworks!
target '<Your Target Name>' do
pod 'VisaCheckoutSDK'
end
Then, run the following command in your terminal:
$ pod install
For more info on CocoaPods, click here.
For a full list of VisaCheckoutSDK versions supported by CocoaPods, click here.