Cloud Payments Documentation

Welcome to the Cloud Payments developer hub. You'll find comprehensive guides and documentation to help you start working with Cloud Payments as quickly as possible.

Get Started    API Reference

Visa Checkout

With Visa Checkout, your customers now have an easier way to pay with their card online, from the company they know and trust. Your customer creates an account once and speeds through purchase without re-entering payment or shipping information wherever they see Visa Checkout.

Visa Checkout Customer Workflow

  • Create an account once and speed through checkout without having to re-enter payment or shipping information wherever you see Visa Checkout.
  • Checkout with a single username and password across the sites you love to shop.
  • Visa secures access to your account with advanced security tools, so you can shop online with confidence.
  • Consistent, simple experience across desktop, mobile web and apps. Easy to activate with any major credit or debit card.
  • Earn the same great rewards with the card you already use.
  • Seamless web and mobile checkout without ever leaving merchant site.

Using Visa Checkout on your website

Cloud Payments currently has pre-built support for Visa Checkout in WooCommerce with version 1.5.0 of our plugin. We are also building plugins and extensions for other supported carts however we do not yet have an expected release date.

In order to add Visa Checkout to your eCommerce website or application:

  1. Review and accept the Visa Checkout Merchant Services agreement to create your Visa Checkout profile.
  2. Add the Visa Checkout JavaScript Integration or Mobile Application SDK to your website or application.
  3. Submit the callid from the request to Cloud Payments via our Credit Card Tokenization API or our Purchases API.

Setting up your Visa Checkout Profile

In order to setup the Visa Checkout profile you must first review and accept the Visa Checkout Merchant Service Agreement (MSA). To do this:

  1. Log into the Merchant Dashboard.
  2. Click on the My Account link on the left hand side and then click the Visa Checkout link.
  3. Review and accept the Visa Checkout MSA.
  4. Once the MSA has been accepted you will be provided with your Visa Checkout API Key.

To view your Visa Checkout API Key at a later date you can visit the same My AccountVisa Checkout page.

Integrating Visa Checkout

JavaScript SDK

The Visa Checkout JavaScript Integration consists of the following steps:

1. Add the anti-click jacking protection

One of the fundamental steps for protecting the customer from click-jacking is to include anti-click jacking protections into any website pages where the Visa Checkout lightbox is included. These protections include both the X-Frame-Options header and the anti-clickjacking code to be included in the head section of the page.

X-Frame-Options

Most newer browsers now understand and support the X-Frame-Options header. For your website you should ensure that the response header for the checkout page, or any page where the Visa Checkout widget is included, includes the following header:

X-Frame-Options: Deny

or

X-Frame-Options: SAMEORIGIN

or

X-Frame-Options: ALLOW-FROM uri

Anti-Click Jacking Markup
The following markup should be included in the head section of any page hosting the Visa Checkout lightbox:

<head>
  <style id="antiClickjack">body{display:none;}</style>
  <script type="text/javascript">
    if (self === top) {
      var antiClickjack = document.getElementById("antiClickjack");
      antiClickjack.parentNode.removeChild(antiClickjack);
    } else {
      top.location = self.location;
    }
  </script>
</head>

More information on anti-click jacking techniques can be found on the OWASP Clickjacking Defence Cheat Sheet

2. Add the onVmeReady() function to the checkout page

The following code should be added to the head section of the checkout page:

<script>
  function onVmeReady() {
    V.init({
      apikey: "API_KEY_FROM_DASHBOARD",
      // Any further initalization options can be added here
    });
  }
</script>

In the V.init method call it is possible to customise the checkout experience including:

  • Adding your logo and name
  • Customising the text displayed in the confirmation page
  • Choosing whether to display a Continue or Pay button
  • Indicate if the shipping details should be selected
  • Indicate the card types to be accepted

For full details on the options for the V.init method call please see the Visa Checkout Javascript Integration Guide (section 2-1 to 2-10).

3. Add the payment request details to the V.init call

In addition to the API Key you will need to include the payment request details as seen below:

<script>
  function onVmeReady() {
    V.init({
      apikey: "API_KEY_FROM_DASHBOARD",
      paymentRequest: {
        currency: "AUD",
        total: 150.51
      }
    });
  }
</script>

4. Add the event handlers for the Visa Checkout lightbox events

<script>
  function onVmeReady() {
    V.init({
      apikey: "API_KEY_FROM_DASHBOARD",
      paymentRequest: {
        currency: "AUD",
        total: 150.51
      }
    });

    V.on("payment.success", function(payment) {
      alert("Checkout successful. Call ID (to be sent to Fat Zebra): " + payment.callid);
    });
    V.on("payment.cancelled", function(payment) {
      alert("Visa Checkout payment cancelled. Please retry or try another payment method.");
    });
    V.on("payment.error", function(payment, error) {
      alert("Visa Checkout payment failed. Error details: " + JSON.stringify(error));
    });
  }
</script>

More details on the V.on events can be found in the Visa Checkout Javascript Integration Guide, section 2-12 to 2-14.

5. Add the Visa Checkout Button

Finally add the following code in your web page where you would like the Visa Checkout button to be displayed (note: the CSS for the Visa Checkout button can be included in an external CSS file provided it is included in any pages the Visa Checkout button is rendered):

<style type="text/css">
  #custom-visa-checkout-outer-container{
    position:relative;
  }
 
  #custom-visa-checkout-learn-more{
    width:210px;
    text-align:right;
  }
  #custom-visa-checkout-learn-more-text{
    font:bold 8.5pt arial;
    text-decoration: none;
    color: #0044AA;
  }
</style>
 
<div id="custom-visa-checkout-outer-container">
  <img alt="Button" class="v-button" data-2x-image="https://secure.checkout.visa.com/wallet-services-web/xo/button.png?locale=en_AU&amp;card_brands=VISA,MasterCard&amp;style=color&amp;size=425" height="47" id="v-checkout-button" role="button" src="https://secure.checkout.visa.com/wallet-services-web/xo/button.png?locale=en_AU&amp;card_brands=VISA,MasterCard&amp;style=color&amp;size=213" width="213" style="cursor: pointer; width: 213px;">
  <div id="custom-visa-checkout-learn-more">
    <a href="javascript:void(0)" id="custom-visa-checkout-learn-more-text" onclick="document.getElementById('custom-visa-checkout').style.display='block'" >Learn More</a>
  </div>
  <img id="custom-visa-checkout" src="https://assets.secure.checkout.visa.com/VmeCardArts/partner/Cart_LearnMore_Pop-Up_left.png" style="display:none;z-index:9999;position:absolute; top: -170px; left: 220px;" onclick="document.getElementById('custom-visa-checkout').style.display='none';" />
</div>

It is highly recommended that the Visa Checkout button markup is not modified in any way, especially with regards to the "Learn More" link. It is permitted to modify the stylesheets for the "Learn More" images or positioning to ensure it works properly in your website provided it adheres to the Visa Branding Requirements.

Mobile SDK

For information on the Visa Checkout Mobile SDK please see the guides provided at the Visa Checkout Documentation website.

Submit the callid to Cloud Payments for Tokenization of Purchase Transactions

Once you have received a successful Visa Checkout callid from the Javascript Integration or Mobile SDK there are two methods of making use of the Payment Details:

  1. Tokenize the card details for checkout workflows such as requiring confirmation or calculation of shipping costs based on the address details returned from Visa Checkout.
  2. Perform a purchase with the callid for workflows which do not need the shipping details before determining the final value of the transaction (e.g. digital products without shipping, access to online services etc).

Both options use the standard Cloud Payments Gateway API for Purchases and Credit Cards, however instead of providing card details (card holder, card number, expiry date, security code) a wallet payload is included in the request as seen below (credit card request):

{
  "wallet": {
    "type": "VISA",
    "callid": "123456789901233456789" // The payment.callid value from the Javascript integration, or the Mobile SDK result callid.
  }
}

For both a Credit Card and Purchase request a wallet payload will be included in the response which includes:

  • email address
  • first and last name
  • address
    • line 1
    • line 2
    • city
    • state
    • postcode
    • phone number
  • card source reference (the Visa Checkout callid)

An example response from tokenizing a credit card with a Visa Checkout callid can be seen below:

{
  "successful": true,
  "response": {
    "token": "kkmz2w9k",
    "card_holder": "Test",
    "card_number": "555544XXXXXX2226",
    "card_expiry": "2020-10-31T23:59:59+11:00",
    "authorized": true,
    "transaction_count": 0,
    "wallet": {
      "name": {
        "first": "Matthew",
        "last": "Savage"
      },
      "address": {
        "line_1": "1 Smith Road",
        "line_2": null,
        "city": "Test",
        "state": "NSW",
        "postcode": "2625",
        "phone": "0421858913"
      },
      "email": "matt@amasses.net",
      "card_source_reference": "4259122687658622628"
    }
  },
  "errors": [
  ],
  "test": true
}

Note: it is important to remember that an address will not be available in the response if collectShipping is not set to true in the V.init options.

For more details on creating purchases using the Visa Checkout callid, please see Create a purchase using a wallet. If the merchant needs to retrieve the customers details prior to performing a transaction, a tokenization request can be made instead of a purchase request. For more details, please see Tokenize a card with wallet credentials.

Further Help

If you require any further assistance with your Visa Checkout integration please contact Cloud Payments Support with your questions and we will be more then happy to assist or provide guidance where possible.

Visa Checkout


With Visa Checkout, your customers now have an easier way to pay with their card online, from the company they know and trust. Your customer creates an account once and speeds through purchase without re-entering payment or shipping information wherever they see Visa Checkout.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.