Visa Checkout

Visa Checkout is a digital wallet that securely stores a shopper's payment and shipping details. It supports all major credit and debit card types, including Visa, MasterCard, American Express, and Discover. Visa Checkout yields conversion rates that far exceed traditional checkout, and enables your customers to make fast and easy payments across all their devices.

Button Image

The image for the Visa Checkout button:Sandbox:https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.pngProduction:https://secure.checkout.visa.com/wallet-services-web/xo/button.png

Visa Checkout JS Library

The JS library for Visa Checkout:Sandbox:https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.jsProduction:https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js

displayName: (Optional) The merchant's name as it appears on the Review panel of the lightbox; typically, it is the name of your company. Format: Maximum 100 characters, either alphabetic, numeric, spaces, or the following characters: ! @ # $ % ^ & * -' ? and period ( . ).

Visa Checkout Requirements

Visa Checkout Asset Placement and Usage Requirements

On all pages where the shopper is presented with the Visa Checkout payment method (for example, the shopping cart page or payment page), you are required to implement the Visa Checkout branding requirements.

Clickjacking Prevention Requirement

You must provide code on each page that hosts a Visa Checkout button and headers on your server to prevent clickjacking, which could occur if malicious code is hidden beneath legitimate buttons or other clickable content on your web page. For example, malicious code might monitor keystrokes and steal confidential information. Customers could be “clickjacked” when clicking a legitimate link on an infected page in which there are actually buttons on a transparent layer they cannot see. Visa Checkout periodically reviews each page from which a Visa Checkout button is clicked to determine if adequate anticlickjacking preventions have been taken. To prevent clickjacking, you must ensure that pages cannot be loaded as an iFrame of some other page. Specifically, you must:

Ensure that the associated DOM document for the page has no child pages in which malicious code could reside.

Implement X-FRAME-OPTIONS DENY or X-FRAME-OPTIONS SAMEORIGIN filtering for headers on your server to prevent your page from being loaded from another domain.

Flow Description

Shopper clicks on Visa Checkout button, which invokes the lightbox.

Inside the lightbox, the shopper can choose their preferred payment option and shipping address.

After the shopper completes the lightbox step, the response status will be “success”, “cancel” or “error”.

You should handle each of those event types, as indicated in the onVisaCheckoutReady() function in the example above.

On a “success” event, you should get a payment object populated with a callId, which is a unique value that points to the corresponding Visa Checkout resource. Extract this call ID and use it to complete Step 3, described below.