VisaCheckout_BrandingAndUXRequirements_201604

Visa Checkout Branding & User Experience RequirementsFor merchants

© 2016 Visa. All rights reserved. Visa confidential. ii2016 APRIL | Visa Digital Solutions

Assets and best-practice recommendations are provided for informational purposes only and should not be relied upon for marketing, legal, regulatory or other advice. Guidelines and principles should be independently evaluated in light of your specific business needs and any applicable laws and regulations.

Legal noteNothing in this document constitutes legal advice. Before any of the turnkey promotional assets contained in this section are produced or distributed, it is your responsibility to have all materials reviewed and approved by your legal counsel. Visa is not responsible for your use of the guidelines, assets, creative recommendations, or other information, including errors of any kind, contained in this document.

Foreword

© 2016 Visa. All rights reserved. Visa confidential. iii2016 APRIL | Visa Digital Solutions

Visa Checkout is a digital payment service that makes completing online purchases faster, easier, and more secure. Users simply enroll any major credit or debit card in Visa Checkout to speed through online checkout by signing in. Users no longer need to re-enter card number or address on merchant sites, increasing conversion and purchase volume. Visa Checkout can be used across multiple devices, such as computer, mobile phone, and tablet.

Introduction to Visa Checkout

© 2016 Visa. All rights reserved. Visa confidential. iv2016 APRIL | Visa Digital Solutions

The purpose of this document is to provide guidelines and assets for the optimal Visa Checkout user experience on all platforms. It includes UX guidance on the Visa Checkout button, acceptance marks, and integration in the checkout flow. These requirements are designed to improve your site conversion, increase your number of registered customers, and help grow your business. All assets are hosted by Visa Checkout. For details on how to integrate Visa Checkout on your site, please refer to the Integration Guide or contact a Visa Checkout representative.

Document overview

© 2016 Visa. All rights reserved. Visa confidential. v2016 APRIL | Visa Digital Solutions

Brand Elements ...............................................................1

Configurations ............................................................................................2

Clear space & minimum size ..............................................................3

Color Specifications ................................................................................4

Brand mark violations ............................................................................5

Name usage ................................................................................................6

Visa Checkout Button ...................................................................... 7–8

Visa Checkout Acceptance Mark .............................................9–10

Tell me more ..................................................................................... 11–14

Messaging ................................................................................................. 15

Card Art ....................................................................................................... 16

Unselected state .................................................................................... 17

Implementation ............................................................18

Summary, Visa Checkout Button .................................................. 19

Summary, Visa Checkout Acceptance Mark ...........................20

Payment flow ....................................................................................21–22

Visa Checkout Button .........................................................................23

Acceptance marks ........................................................................ 24–25

Radio selection–Horizontal Tiles .......................................... 26–27

Radio selection–Small Tiles, with text ...............................28–29

Radio selection–Small Tiles, no text ................................... 30–31

Expand/collapse ............................................................................. 32–33

Tabs ........................................................................................................34–35

Pay/Order review ...........................................................................36–38

Order review with payment option ................................... 39–40

Order confirmation ............................................................................... 41

Best practices ........................................................................................... 42

Contents

© 2016 Visa. All rights reserved. Visa confidential. 12016 APRIL | Visa Digital Solutions

01Brand Elements


The Visa Checkout Mark is a Visa-owned mark used to represent the Visa Checkout service. The mark has two components: the Visa Brand Mark and Checkout word mark. These elements form the mark and may not be altered or removed.

The mark exists in two configurations, horizontal or vertical as shown at right. The horizontal configuration is preferred and must be used whenever possible. Use of the vertical configuration is restricted to situations where space constraints prohibit use of the preferred horizontal configuration.

The position, size, color, proportions, and spatial relationships of the mark may not be altered. Always use the approved artwork. Do not redraw or recreate the mark.

The Visa Checkout Mark is always in Visa Blue or White and placed on a background that provides adequate contrast between the mark and the background.

Horizontal Configuration (Preferred)

Vertical Configuration (Restricted)

Brand Mark

Configurations


Clear spaceClear space is the area surrounding the mark that must always be free of any text or graphic elements. It ensures that the mark appears distinctively in any environment.

Clear space is measured by the height of the upright winged-V in the mark, shown as the value X in the exhibit on this page. The minimum clear space must always be one half of that measurement (0.5X) on all sides of the mark.

Minimum sizeTo maintain visual presence and impact, the Visa Checkout mark must never appear smaller than:

• horizontal configuration 0.75 in/19 mm/54 px in length

• vertical configuration 0.4375 in/11 mm/32 px in length

To ensure legibility when using reproduction processes that provide a lower quality image (e.g., silk-screen), it may be necessary to increase this minimum size.

0.5X

0.5X0.5X

0.5X

0.5X

0.5X

0.5X

0.5X

X

X

0.75 in/19 mm/54 px 0.4375 in/11 mm/32 px

Brand Mark

Clear space & minimum size


The Visa Checkout Mark must appear in Visa Blue or White and placed on a background that provides adequate contrast between the mark and the background. Do not create new color variations of the mark.

For print applications

• Visually match Visa Blue to the appropriate Pantone colors when printing in spot color. Unless media demands four-color process, always print in spot color

• Visa Blue (coated, uncoated): Pantone 280

• Visually match Visa Blue to appropriate CMYK formulas when printing in four-color process

• Visa Blue: CMYK C100 M85 Y0 K25

For screen applications

• Use the Visa Blue RGB color formula Visa Blue: R26 G31 B113 / HEX 1A1F71

• When copying artwork from one application to another, convert the new document to RGB before pasting the artwork into the file

Visa Blue (Mark only)

Pantone 280C CMYK 100-85-0-25 RGB 26-31-113 HEX 1A1F71

White on Visa Blue (or on Dark Neutral Backgrounds)

Visa Blue on Light Grey (or on Light Neutral Backgrounds)

Brand Mark

Color Specifications


To preserve the integrity of the Visa Checkout mark, never alter reproduction standards detailed in these guidelines.

The rules outlined on this page apply to all configurations.

Visa Checkout: Brand Standards v1.2 August 2015

5Visa Confidential



1. Donotcreatenewcolorvariationsofthemark.

2. Do not remove elements from the mark.3. Do not incorporate new elements into the

mark.4. Do not recreate the mark. 5. Do not rearrange any elements of the mark6. Do not create a lockup with another mark

Visa Checkout MarkIncorrect use

4

65

1 2

3

CHECKOUT


5Visa Confidential







4

65

1 2

3

CHECKOUT


5Visa Confidential







4

65

1 2

3

CHECKOUT


5Visa Confidential







4

65

1 2

3

CHECKOUT


5Visa Confidential







4

65

1 2

3

CHECKOUT


5Visa Confidential







4

65

1 2

3

CHECKOUT

Do not create new color variations of the mark. Do not remove elements from the mark. Do not incorporate new elements into the mark.

Do not recreate the mark. Do not rearrange any elements of the mark. Do not create a lockup with another mark.

Brand Mark

Brand mark violations


When using the Visa Checkout name in headlines and text, follow these do’s and don’ts to maintain consistent brand communications.

Do’s

• Use the provided messaging, tools and graphics for easiest integration

• Always use the full name: Visa Checkout

• The full name, Visa Checkout, must be used and appear as two separate words

• The “V” in “Visa” and “C” in “Checkout” must always be capitalized

• Use the same visual treatment (font, size and color) for the Visa Checkout name as the surrounding headline or text information

Don’ts

• The name, in part or whole, must not be translated

• Do not refer to Visa Checkout as “a digital wallet”

• Do not describe Visa Checkout with words such as “fastest” or “easiest”

Additional considerations when describing or representing Visa Checkout:

• Visa Checkout is payment-brand, issuer-brand and partner-brand agnostic and gives consumers choice and control when setting preferences, selecting payment methods and optimizing the experience, where permitted, to meet their needs

• Visa Checkout is not a component of another product or service

• Visa Checkout must not be combined verbally or visually with any other name unless in the instance of harmonious co-branding (wherein logos can appear alongside one another)

• It must always be clear to consumers that they are enrolling in, and using Visa Checkout, a service provided by Visa

Correct Use

• Check out online safely, use Visa Checkout

• Enroll your [Issuer Name] Visa card in Visa Checkout

• Enroll your [Issuer Name] Visa card online at www.visacheckout.com or [Bank URL]

Incorrect Use

• Check out online safely, use [Issuer Name] Visa Checkout

• Introducing [Issuer Name] Checkout powered by Visa

Brand Mark

Name usage


The Visa Checkout button is used when an active button is required at the point of sale. The consumer is invited to click the button if they want to use the Visa Checkout service to pay on a merchant website or mobile application.

The Visa Checkout button may also be used as follows in limited applications when promoting the Visa Checkout service:

In context

• Show the Visa Checkout button in context, where a checkout screen on a device or monitor is shown

To educate

• Show the Visa Checkout button with “Look for the Visa Checkout button” or similar language to educate consumers about how to use Visa Checkout

For all other marketing purposes, use of the Visa Checkout Mark is preferred.

Only use the Visa-provided artwork for the Visa Checkout button. Scale the Visa Checkout button as needed but do not alter the proportions or elements of the Visa Checkout button in any way. The Visa Checkout button must appear in full color.

To minimize inconsistencies and to keep with the most updated branding configurations, you must use the link hosted by Visa instead of hosting the image locally.

Standard (or on Light Neutral Backgrounds)

Neutral (or on Dark Neutral Backgrounds)

Visa Checkout Button

Overview


Clear spaceClear space is the area surrounding the button that must always be free of any text or graphic elements. It ensures that the button appears distinctively in any environment.

Clear space is measured by the height of the gray card-shaped element, shown as the value X in the exhibit on this page. The minimum clear space must always be one half of that measurement (0.5X) on all sides of the button.

Minimum sizeTo maintain visual presence and impact, the Visa Checkout button must never appear smaller than:

• online and mobile merchant locations 188 px in length

• marketing and promotional use 2.17 in/55 mm length

The Visa Checkout button should be clearly separated from other marks, graphic elements, text, or photographic background elements.

X

0.5X

0.5X

0.5X0.5X

188 px 2.17 in/55 mm


Clear space & minimum size


The Visa Checkout acceptance mark is the element used to represent the service at point of sale. The vertical and horizontal marks are recommended as the most common uses of the acceptance mark. The vertical-medium option is available for smaller sizes. The smaller alternate sizes should only be used when it achieves best parity with surrounding designs.

Best practice to ensure consistent experience:

• The Mark must be in a size at least equal to the largest mark of other payment marks displayed on the site or application.

• The Mark should be displayed in full color on-screen and for all other use.

• Always surround the Mark with appropriate margins. This may adjust depending on proportions within the applied context.

• The Mark should be placed against neutral backgrounds and with appropriate contrast.

• The Mark should be positioned horizontally

Dependent on the interaction pattern on the merchant’s website or application, a mark may be used with or without the Visa Checkout button.

To minimize inconsistencies and to keep with the most updated branding configurations, you must use the link hosted by Visa instead of hosting the image locally.

Medium

w 40px x h 30px

URL: https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30.png

URL: https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31.png

Vertical Large

w 49px x h 31px

URL: https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34.png

Horizontal

w 99px x h 34px

All acceptance marks on this page are clickable links to their individual assets.

Visa Checkout Acceptance Mark

Overview

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34.png


Medium

w 40px x h 30px

Vertical Large

w 49px x h 31px

Horizontal

w 99px x h 34px

Light neutral background Dark neutral background White (Mark only)Visa Blue (Mark only)

All acceptance marks on this page are clickable links to their individual assets.


Lockups

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30_wht01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31_wht01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34_wht01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34_blu02.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30_blu02.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31_blu02.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30_blu01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34_blu01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31_blu01.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_medium_40x30_wht02.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_horizontal_99x34_wht02.png

https://assets.secure.checkout.visa.com/VmeCardArts/partner/POS_vertical_large_49x31_wht02.png


Button

Acceptance Mark

“Tell me more” link is presented with the Visa Checkout Button and Acceptance Mark for customers to learn more about the Visa Checkout anywhere Visa Checkout is presented on the merchant’s website. Upon clicking on the link, customers will be able to learn more of the service and the features through a dismissable module window.

The “Tell me more” link may be omitted from the button lock-up in mobile device use cases.

Tell me more

Medium

w 40px x h 30px

Button with Tell me more

Vertical Large

w 49px x h 31px

Horizontal

w 99px x h 34px

Tell me more

Tell me more

Tell me more

Tell me more

Overview


Medium

w 40px x h 30px

Vertical Large

w 49px x h 31px

Horizontal

w 99px x h 34px

Lockup A Lockup B Lockup C (Mark only)

Tell me more

Tell me more

Tell me more

Tell me more

Tell me more

Tell me more

Tell me more

Tell me more

Tell me more

Acceptance MarkLockups


Upon clicking on the link, customers will be able to learn more about the service and the features through a dismissable module window.

The benefits and usage of Visa Checkout are described in the module. Users can continue by creating an account or signing in using the links provided.

Tell me more

Module


CREDIT CARD CASHGIFT CARD

Tell me more

CREDIT CARD CASHGIFT CARD

Tell me more

Before clicking “Tell me more” After clicking “Tell me more”

Tell me more

Module example


Long StatementVisa is making it easier to pay with your card online.

• Enroll a card 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 Checkout is backed with advanced security tools, so you can shop online with confidence.

• Consistent, simple experience across desktop, mobile web and apps.

• Enroll 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 the merchant site.

These examples provide specific content that you can use to describe Visa Checkout to consumers. Use either the short statement or long statement. These applications are helpful in situations where the “Tell me more” link invoking the module is unavailable. For example, use of this text may be on the payment method page along with the selection of Visa Checkout.

Short StatementWith Visa Checkout, you now have an easier way to pay with your card online, from the company you know and trust. Enroll any major credit or debit card once to speed through your purchase without re-entering payment or shipping information wherever you see Visa Checkout.

Tell me more

Messaging


For recognized, signed-in customers, card art will replace the chevron slider element in the Visa Checkout Button. Card art must never be distorted or obstructed by other graphics.

The default Visa Checkout Acceptance Mark will be displayed as is.

Best practices to ensure consistent experience for recognized, signed-in customers:

• Text identifying the payment card last four digits should be displayed next to the standard Acceptance mark for customer review page during checkout

• Center graphics vertically within applied area for best balance

If the corresponding issuer card art cannot load, the chevron slider will be displayed on Visa Checkout Button.

Button

Recognized, card art

Medium

w 40px x h 30px

Vertical Large

w 49px x h 31px

Horizontal

w 99px x h 34px

Standard Tell me more

Acceptance Mark

Tell me more

Tell me more

Tell me more

Card Art

Overview


The visual style of unselected state may vary depending on the interface pattern. When the interface pattern indicates selection, such as a check mark, background color or selected radio button, the mark does not require any special treatment.

If there is not a clear visual indicator of the selection pattern, such as in use of expand/collapse or tabs pattern, the merchant can dim the acceptance mark to 50% opacity with any UI text remaining in 100% opacity. When Visa Checkout is selected, the mark should be displayed at full opacity.

Medium

w 40px x h 30px

Vertical Large

w 49px x h 31px

Horizontal

w 99px x h 34px

Lockup B (Mark only)Lockup A

Unselected state

Overview


Implementation

02


The configuration Visa Checkout Button is displayed on a merchant site or application is the main entry point to invoke the Visa Checkout experience.

Ensure that the buttons are placed on an equal level with other action buttons on the page. Use of horizontal or stacked implementation may be accepted.

Use the standard button whenever possible. The neutral version should only be used when the site or application has a dark background and requires better contrast. The user’s card art will always replace the chevron if the user is a recognized, sign in user.

Standard Card art

Standard (or on Light Neutral Backgrounds)

Neutral (or on Dark Neutral Backgrounds)

Summary



Depending on the purpose of the specific page in which you are implementing a Visa Checkout acceptance mark, certain configurations of the mark would be more appropriate. While these are recommendations of graphic sets based on the most common e-commerce applications, the final use will depend on context.

Selection of the asset set will depend on these main criteria:

• Proportions available for graphics Is the application area for square, rectangular or wide graphics?

• Background color Based off your website’s UI, does the graphic require background color?

Radio selection (Horizontal Tiles)

Graphics selection

Expand/collapse

Tabs

Acceptance marks

Cart

Checkout–payment selection:

Standard

Radio selection (Small Tiles)

Summary



Cart

• Visa Checkout button should be used as a way for customers to continue with the payment flow.

Integrating Visa Checkout as early as possible into the flow allows the customer flow to be shorter and more streamlined. The areas where the Visa Checkout button and mark need to appear in this flow should be:

• Cart

• Sign in/buyer info (if applicable)

• Pay/order review

Pay/Order review

• Visa Checkout, an image of the user’s card art, and the last four digits of the card should be displayed for customers to review.

1 2 3 4 5 6

Shopping cart

OR

CHECKOUT

Sign in/buyer info

OR

SIGN IN

Pay/Order review

PAY

Order confirmationShipping info

CONTINUE

Payment method

CARD

CARD

Visa Checkout includes this information

SIGN IN

CARD

CONTINUE

PAY WITH

Implementation

Payment flowEarly Placement Integration


Checkout–payment selection

• The Mark should be used to present Visa Checkout as an option for payment selection.

• Merchants may present more information about Visa Checkout in an expanded area after the customer has selected the payment mark if the application allows.

• The Visa Checkout button will replace the merchant site’s “Continue” button. Customers will complete payment with Visa Checkout. This will allow customers to be presented the recognized consumer experience when applicable.

Pay/Order review

• Visa Checkout, an image of the user’s card art, and the last four digits of the card should be displayed for customers to review.

If the customer has entered a merchant checkout flow, they will have the opportunity to use Visa Checkout after they selected it as the payment option. For proper checkout integration flow, the Visa Checkout button and mark need to appear in the following pages:

• Checkout-payment selection

• Pay/order review

1 2 3 4 5 6

Shopping cart

OR

CHECKOUT

Sign in/buyer info

OR

SIGN IN

Pay/Order review

PAY

Order confirmationShipping info

CONTINUE

SIGN IN

CARD

CONTINUE

PAY WITH

Payment method

CARD

CARD

Implementation

Payment flowLate Placement Integration


The Visa Checkout Button may be implemented side-by-side in a horizontal layout or in a stacked format in relation to other checkout buttons on the site.

Ensure buttons are placed on equal level against other action buttons on the page, regardless of orientation or device size.

If the checkout buttons fall below the fold, it is recommended that the checkout button is placed and displayed at the top of the page for user convenience and higher conversion.

Final application of the button should be determined by the payment flow. These pages may be on cart, user sign in/buyer info, and on the payment method. Examples on the right show the checkout button on the cart page.

For additional details on implementing the Visa Checkout button, please refer to the integration guide.

Side-by-side button implementation

Stacked button implementation

payment flow

1. shopping cart 2. sign in/buyer info 3. shipping info 4. payment method 5. pay/order review 6. order confirmation

Implementation



Acceptance marks are informational displays of the payment brands the merchant accepts on its site or application. The full brand mark is available for this use.

While the horizontal configuration is preferred in most cases, the vertical configuration may be used when horizontal space is limited or to provide parity with other payment brands displayed in context.

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

Credit/debit cards

Other ways to pay

Vertical configuration

Separated brands for payment methods

payment flow


Implementation

Acceptance marks


Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

payment flow


Implementation

Acceptance marks example


In radio selection, Visa Checkout may be presented as an option on the payment selection page. In selecting Visa Checkout as the payment form, customers do not need to fill in any payment forms on the merchant site.

Select the best proportions of the Mark based on the available area. Use the full brand mark whenever possible. Standard Acceptance Mark requirements of proportions, colors and appropriate padding around the Mark apply.

“Visa Checkout” should be identified as part of the payment selection, either as a word mark or through text.

When payment selections are placed within a border, the Mark should not include any background or bounding box.

The Mark may be used placed against merchant site’s color as long as it does not cause distortion or distraction to the Visa Checkout brand. Any backgrounds used with the Acceptance Mark should be of neutral colors and without the use of heavy gradients or patterns.

Standard Acceptance Mark

Correct Incorrect

Horizontal Tiles

payment flow


Implementation

Radio selection–Horizontal Tiles


Standard Acceptance Mark Card Art

CREDIT CARD CREDIT CARDCASH CASHGIFT CARD GIFT CARD

payment flow


Implementation

Radio selection–Horizontal Tiles example


The acceptance mark should occupy the area edge-to-edge and without extra padding as much as possible without resizing, especially in a 4:3 ratio area.


Correct Incorrect

Small Tiles (with text)

Visa Checkout Visa Checkout

payment flow


Implementation

Radio selection–Small Tiles, with text



payment flow


Implementation

Radio selection–Small Tiles, with text example


The full Brand Mark should be used when Visa Checkout is not identified through text. The use of “Tell me more” with the Visa Checkout acceptance mark is dependent on the context of the application. Final use should clearly represent the service and have parity with other elements in the surrounding site environment.

Correct Incorrect

Small Tiles


Tell me more Tell me more

payment flow


Implementation

Radio selection–Small Tiles, no text



Tell me more Tell me more

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

Other Brand

payment flow


Implementation

Radio selection–Small Tiles, no text example


The expand/collapse implementation for payment options presents the payment options in multiple lines that expand upon selection with more information or form fields. With this pattern, text is the main element with acceptance marks and graphics used as support. Both horizontal and vertical configuration are allowed to be used.

Upon selection of Visa Checkout, details about the service and the Visa Checkout button should be displayed in the expanded area.

Correct

Expand/collapse


Visa Checkout

payment flow


Implementation

Expand/collapse


Collapsed Expanded

payment flow


Implementation

Expand/collapse example


Visa Checkout should be placed as a section when tabs are used for payment selection. Use the full brand mark when possible with appropriate padding. When the Visa Checkout tab is selected, the Visa Checkout button must be displayed and selected to complete the payment.

Payment option Payment option

Correct

Expand/collapse

payment flow


Implementation

Tabs


Credit Card

payment flow


Implementation

Tabs example


The Pay/Order review page is the optional final step before the payment flow is completed. Merchant should display the full set of information here for customers to review and make final changes.

When card art is available, text should always display the card’s last four digits. Text used for displaying the card brand is optional but preferred.

When card art is not available, text should display the card brand as well as the card’s last four digits.

* wherever brand marks are currently displayed, the card art should be used in it's place

*

payment flow


Correct Incorrect

Pay/Order review

Card Art

Card Art + Card Brand as text

Visa••••1234

VisaCheckout••••1234••••1234

Visa••••1234

Visa••••1234

Card Art unavailable

••••1234

Implementation

Pay/Order review


payment flow


Implementation

Pay/Order review example


payment flow


Implementation

Pay/Order review example


The Order review + Payment option page is the step where the customer can review his order and must select his payment option. Merchant should display the full set of information here for customers to review and make final changes.

Whether card art is available or not, text should always display the card brand and the card’s last four digits.

Payment options should show a distinct separation from card information and card art so as not to confuse users.

Correct Incorrect

Pay/Order review



Visa Checkout

Visa••••1234

Visa Checkout

Visa••••1234Visa••••1234

••••1234

Implementation

Order review with payment option

payment flow



Implementation

Order review with payment option example

payment flow



The Order Confirmation page displays the summary of the purchase and any relevant details to the customer about the transaction they just completed.

If there are payment details displayed on the page, the same lock up used in the Pay/Review page should be used.

payment flow


Correct Incorrect

Order Confirmation

Card Art

VisaCheckout••••1234••••1234

Implementation

Order confirmation


Standard best practice in integrating Visa Checkout Mark:

and shipping information in the Visa Checkout experience. Returning users will already have their personal and payment information stored with Visa Checkout.

• Only display detailed information related to the Visa Checkout service before and after selection, as part of the payment option. Do not show promotions for other services, since they confuse customers and cause cart abandonment.

• Separate Visa Checkout as its own payment method. Unlike traditional payment methods, Visa Checkout will not require customers to fill in payment information forms on the merchant site.

• Merchant should integrate the mark through the link hosted by Visa. This will minimize inconsistencies and the merchant will not have to change anything on site if there are updates.

• Placement of the Mark does not replace the function of the Visa Checkout Button. Customers are required to complete the payment flow by clicking the Visa Checkout Button available after selection.

• The Mark should not be used with traditional payment information fields customers fill out. New users will be prompted to enroll in Visa Checkout by entering their payment

• Be aware that presentation level may change based on applied interaction pattern and context of the Mark.

• Visa Checkout should be integrated into the payment flow as early as possible. Refer to payment flow details on following pages for overview on how the Acceptance mark should be integrated.

Implementation

Best practices


If you still have questions or need more information after reading this Visa Checkout Branding and User Experience Principles document for Merchants, please contact your Visa Checkout representative.

If you do not have a Visa Checkout representative, please visit the Visa Developer Center.

https://developer.visa.com

Contact

https://developer.visa.com

Date post:	07-Jan-2017
Category:	Documents
Upload:	erica-lee
View:	61 times
Download:	0 times

VisaCheckout_BrandingAndUXRequirements_201604

Documents