User Interface Guidelines for Visa Checkout

Branding Requirements

Your implementation of Visa Checkout must meet the Visa Checkout branding requirements, which address the appearance and placement of the Visa Checkout button, the appearance and placement of the Visa Checkout Acceptance Mark, and the Tell Me More Link. You are required to implement the Visa Checkout branding requirements on all pages where you are displaying Visa Checkout digital assets: either the Visa Checkout Button or the Visa Checkout Acceptance Mark.

Use the Visa Checkout Acceptance Mark to let your consumers know that you accept Visa Checkout. Place it on pages such as your shopping cart page, login page, product page, and/or payment page. Place the Visa Checkout button on any page or in any flow on your web site or mobile application where a consumer is asked to type in their billing and payment information. Common examples include shopping cart pages, payment pages, card-on-file management pages, or immediately before a flow wherein a consumer is prompted for the type of personal information that could be obtained from a Visa Checkout account.

These rules apply to the Visa Checkout Button and Acceptance Mark:

  • Do not change the functionality of these assets
  • Do not alter the size, shape, orientation or any other aspect of the images (except through the use of the V.init properties).
    Note: In the event that an image is not sized properly, Visa will give you an alternate version.
  • Ensure that the buttons are placed on an equal level with other calls to action on the page, regardless of the page orientation.
    Note: If the buttons are below the fold, it helps to place an additional button at the top of the page.

Visa Checkout Buttons

There are three styles of Visa Checkout buttons that you can choose to add. For instance, refer to the following choices.

  • Standard button without card art
  • Neutral button without card art
  • Standard button with card art
Visa Checkout buttons graphic

If you offer guest checkout, a best practice is to prefill any account creation form you may have with the consumer information provided by Visa Checkout after the lightbox closes. If you require the consumer to sign in to your site, another best practice is to link the consumer’s Visa Checkout account to the consumer’s account on your site, so that the consumer does not have to login multiple times to check out. By linking accounts, you can recognize the consumer’s account on your site based on the consumer’s successful sign in to Visa Checkout.

You are required to implement the Visa Checkout branding requirements on all pages where the consumer is presented payment method options, such as Visa Checkout or another payment method. Common examples include the shopping cart page, login page, product page and payment page. Your actual implementation depends on your specific flow.

General Visa Checkout Button Placement and Flow Requirements

You can use Visa Checkout on any page or in any flow on your site or app where a consumer is asked to type in their billing and payment information. The most common examples include:

  • cart pages (both mini and full) pages 
  • payment pages
  • card-on-file management pages

An exception would be if you needed to add the Visa Checkout information immediately before a flow where a consumer is prompted for specific personal information. This data may be available, at least partially within Visa Checkout.

Because Visa Checkout already has consumer shipping information and payment options, giving consumers the opportunity to specify these kinds of choices at the beginning of the checkout process may enable them to complete the transaction with less effort than might otherwise be required. The following diagram shows how placing Visa Checkout buttons on the shopping cart page and your log in page might work.

Visa Checkout graphic for shopping cart

Initially, if consumers do not click the Visa Checkout button—they should also have the option to choose a payment method which enables them to use Visa Checkout for payment. For instance, refer to the following kinds of examples.

Visa Checkout graphic for shopping cart

The implementation shown above shows a radio button with a Visa acceptance mark. When the consumer chooses the Visa Checkout radio button, the Visa Checkout button appears. This gives the consumer the ability to log into Visa Checkout to choose the card and continue to the payment page.

Visa Checkout Acceptance Mark Requirements

Use the Visa Checkout acceptance mark to let consumers know you accept Visa Checkout on your pages, such as on your payment pages and other pages that display a payment method. If you no longer accept Visa Checkout, or temporarily disable Visa Checkout, please use the disabled acceptance marks. Visa Checkout provides 4 sizes of marks, which are identified in the table below. You can choose the size, color and background based on the needs of your site. Make sure to link to the Visa Checkout acceptance mark. The tables below display all of the available acceptance marks with the links hyperlinked to the image.

The Visa Checkout acceptance marks are dynamic, meaning the acceptance mark will display an image of the customer's default issuer card art with Visa Checkout. The kinds of acceptance marks that are dynamic are versions blue 01, blue 02, white 01 and white 02 in sizes 40x31, 49x31 and 99x34. To ensure that the acceptance marks on your site are dynamic, work with your Visa representative or integrate your site with the proper URL's from the table above. 

Example of a standard versus dynamic acceptance mark 

Visa Checkout graphic sample websites

Do not create your own acceptance marks. Only use them through the associated URL, which is provided by Visa Checkout. 

The following rules are specific to applying the Visa Checkout acceptance mark on a page.

  • Add Visa Checkout as the alternative (alt) text for the image.
  • The Visa Checkout acceptance mark is not a substitute for the Visa brand mark.
  • If the pay layout cannot accommodate the acceptance mark, you can use the full Visa Checkout text instead. 
  • The Visa Checkout acceptance mark is not a substitute for the Visa brand mark.

PDFs for Merchants Integrating with Visa Checkout

To view and download all Visa Checkout assets, such as PDFs, log into Visa Developer > Project Dashboard. Please refer to Access Assets for more details.

Become a Partner

A partner provides services on behalf of a merchant. Partners typically onboard the merchant and own the relationship with their merchants, although once a partner has been registered with Visa Checkout, merchants can choose the partner directly. A partner must enable a merchant to accept the Visa Checkout Merchant Services Agreement during onboarding; Visa Checkout makes this step easy. Once the partner-merchant-Visa Checkout relationship has been established, direct interactions are between the partner and the merchant, not between Visa Checkout and the merchant.

Partner integrations with Visa Checkout are similar to merchant integrations, with the addition that partners must specify the merchant on whose behalf they are acting. Partners also decide the division of integration effort between themselves and their merchants. Partners can integrate by simply onboarding merchants, in which case the merchant handles the bulk of the integration, to hosting a complete Visa Checkout solution, in which requires virtually no integration effort by the merchant.

If you would like to work with Visa Checkout as a partner, send email to developer@visa.com and request further information. You should be prepared to provide company and contact information, a valid business identification ID, such as a tax ID, and an estimate of anticipated transaction volume (monetary value).