VisaCheckout_BrandingAndUXRequirements_201604

Visa Checkout
Branding & User Experience Requirements
For 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 note
Nothing 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
01
Brand 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 space
Clear 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 size
To 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.
5
Visa Confidential
d
4
65
1 2
3
CHECKOUT
Visa Checkout: Brand Standards
v1.2 August 2015 Visa Co
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.
1. Do not create new color variations of the
mark.
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 mark
6. Do not create a lockup with another mark
Visa Checkout Mark
Incorrect use
4
65
1 2
3
CHECKOUT
5
Visa Confidential
4
6
2
CHECKOUT
v1.2 August 2015
5
Visa Confidential
configurations.
mark.
mark.
Visa Checkout Mark
Incorrect use
4
65
1 2
3
CHECKOUT
5
Visa Confidential
sa Checkout
andards detailed
pply to all
iations of the
m the mark.
ments into the
nts of the mark
another mark
k
4
65
1 2
3
CHECKOUT
v1.2 August 2015
5
Visa Confidential
configurations.
mark.
mark.
Visa Checkout Mark
Incorrect use
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
Backgrounds)
Neutral
(or on Dark Neutral
Backgrounds)
Visa Checkout Button
Overview

Clear space
Clear 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 size
To 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

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

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 Mark
Lockups

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 Statement
Visa 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 Statement
With 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
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 flow
Early 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 flow
Late 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.
Standard
Acceptance Mark
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
Standard
Acceptance Mark
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
Standard
Acceptance Mark
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
Visa Checkout ••••1234••••1234
Visa ••••1234
Visa ••••1234
Card Art unavailable
••••1234
Implementation
Pay/Order review

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 ••••1234
Visa ••••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
Visa Checkout ••••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

VisaCheckout_BrandingAndUXRequirements_201604

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to VisaCheckout_BrandingAndUXRequirements_201604

Similar to VisaCheckout_BrandingAndUXRequirements_201604 (20)

VisaCheckout_BrandingAndUXRequirements_201604