MasterPass Merchant Branding Requirements Version 1.0, November 2013
Introduction This document is intended to guide merchants and their developers through MasterPass branding requirements and provide detailed information on the following: MasterPass brand elements Basic use of the brand elements on a merchant website and in marketing Effective integration of MasterPass brand elements on merchant websites so that consumer checkout is as quick and easy as possible MasterPass brand elements MasterPass Button MasterPass Alternate Button BUY WITH MasterPass Button 2013 MasterCard. All rights reserved. 2
Consistent MasterPass Brand Element Placement Consistent placement of the MasterPass brand elements on merchant websites will improve the consumer shopping experience and help reduce cart abandonment. This is especially important on checkout pages. Consumers should develop an expectation of where the brand elements will appear, how the checkout process will be streamlined, and how the consumer s information will be used across merchant experiences. Following these requirements and guidelines will: Ensure correct placement in line with current merchant checkout flows Encourage greater usage and completion of more consumer transactions Reinforce the fundamental value proposition that consumers will not need to re-key any personal information that resides within their wallet Placement Considerations 1. It is important to review the merchant website to understand current e-commerce checkout flows, including: Consumer information gathering points Checkout process Shopping cart 2. Brand element placement needs to reinforce the MasterPass consumer value proposition a safe, simple and secure transaction even on websites new to the consumer, minimizing their inputs and eliminating the need to reference their physical card. Additionally, the consumer should not have to provide CVC / CVV to the merchant as that information has been verified at the time the card is entered into the wallet. Data contained in the wallet includes: Card information Name Shipping Address Billing Address Loyalty Program Information 3. Brand element placement should support the most convenient consumer checkout experience on the merchant site. Strong placement options include: The product page for quick checkout The page where personal ID / information is first being requested 2013 MasterCard. All rights reserved. 3
MasterPass Brand Element: Button The following two pages introduce the MasterPass brand elements. Consistent use of these elements should improve the consumer shopping experience. The MasterPass Button is available in several configurations. The MasterPass Button is the element used most symbolically to represent MasterPass in marketing and is the preferred option when used on a merchant website. The Alternate Button is acceptable for use only if it provides better parity with other payment brands in a particular context/layout than the preferred Button or when horizontal space is limited. Always integrate the Button as far forward in the checkout process as possible To assist consumer recognition, the MasterPass Button generally should not be displayed in line with traditional payment brands The Button must appear in a size at least equal to the largest other payment brand marks also displayed. The Button must be used in full-color on screen and for all other use Position the Button where it will provide the most utility, generally above the fold (before scrolling) Always position the Button horizontally, not at an angle Always surround the Button with sufficient free space, which at a minimum should equal the width of the P in MasterPass Always reproduce the Button at a size that is clear and legible Always position the Identifier on a background with sufficient contrast (at least 10% lighter than the lightest tint within the Carrier Shape, or 10% darker than the darkest tint) Preferred: MasterPass Button 83 pixels wide Minimum recommended size on-screen Minimum free space, equal to the width of P MasterPass Alternate Button 37 pixels wide Minimum recommended size on-screen Minimum free space, equal to the width of P To minimize the impact of future branding updates, please use the country specific link to the appropriate Button image hosted by MasterCard rather than downloading it and hosting the image locally Position the Button on a background with sufficient contrast at least 10% lighter than the lightest tint within the Carrier Shape, or 10% darker than the darkest tint. 2013 MasterCard. All rights reserved. 4
MasterPass Brand Element: BUY WITH MasterPass Button The BUY WITH MasterPass Button, is used to represent the merchant checkout experience and trigger the MasterPass checkout process. The BUY WITH Button integrates the payment prompt directly into the Button, and therefore is used when a separate payment prompt isn t provided by the merchant. This Button can also be used for marketing purposes outside of the digital environment. Always integrate the BUY WITH Button as far forward as possible in the checkout experience (on the product page or the checkout page) To assist with consumer recognition, the BUY WITH Button generally should not be displayed with traditional payment brands The BUY WITH Button must appear in a size at least equal to the largest other checkout button also displayed. The BUY WITH Button must be used in full-color on screen and for all other use It is important that the BUY WITH button be placed where it will provide the most utility, generally above the fold (before scrolling) Always position the BUY WITH horizontally, not at an angle. Always position the BUY WITH Button on a background with sufficient contrast (at least 10% lighter than the lightest tint within the Carrier Shape, or 10% darker than the darkest tint) Always surround the BUY WITH Button with sufficient free space, which at a minimum should equal the width of the P in MasterPass Always reproduce the BUY WITH Button at a size that is clear and legible To minimize the impact of future branding updates, please use the country specific link to the BUY WITH Button image hosted by MasterCard rather than downloading it and hosting the image locally Some markets may require translation of BUY WITH. If a translation is needed, contact your MasterCard Representative BUY WITH MasterPass Button 98 pixels wide Minimum recommended size on-screen Minimum free space, equal to the width of P Translated BUY WITH MasterPass Button Position the BUY WITH MasterPass Button on a background with sufficient contrast at least 10% lighter than the lightest tint within the Carrier Shape, or 10% darker than the darkest tint. 2013 MasterCard. All rights reserved. 5
When and Where to Use the Brand Elements On a merchant website, the type of brand element displayed is dependent on the type of function it performs. Informational Display An informational display is where the merchant displays what payment brands are accepted on the merchant s site. The MasterPass Button and Alternate Button are available for this use. While the MasterPass Button is the preferred element for Informational Display, the MasterPass Alternate Button is an acceptable alternative only if it provides better parity with other payment brands in a particular context/layout than the preferred Button or when horizontal space is limited. Informational Display Merchant Home Page Enter User Name Marketing Use RETAIL WORLD now accepts MasterPass, your shortcut to checkout. Transactional Display Transactional Display is where the merchant displays the payment options for selection, and once selected, the payment transaction commences. In this case, any of the three MasterPass brand elements can be used based on the following criteria: Enter Password Forgot password? Sign In Sign Up Digital Wallets When the merchant does not provide a payment selection prompt, then the BUY WITH MasterPass Button is used. The BUY WITH Button is always the preferred option to trigger the checkout process Cards When the merchant provides a payment selection prompt such as Pay with, Select Payment Method, or similar, then the MasterPass Button is used (following the same parity/available space criteria mentioned above) Marketing The brand elements can also be used for marketing purposes, both on and offline. The choice of element used is at the merchant s discretion and should be based on the context in which it appears. Whenever possible, alternative payments should be separated from traditional payments as illustrated in each of the examples on this page Transactional Display where merchant s prompt is provided Transactional Display where merchant s prompt is not provided Merchant Payment Page Select Your Card Or Pay With Merchant Payment Page Select Your Payment Method Credit Card Cards Merchant Payment Page Card Type Please select Expires Select one Select one Select Your Card Or Pay With Card Number Security Code What is this? Credit Card Card Type Please select Expires Select one Select one With preferred MasterPass Button Alternative Payments Card Number Security Code What is this? With MasterPass Alternate Button With BUY WITH MasterPass Button 2013 MasterCard. All rights reserved. 6
MasterPass Transactional Display Best Practices Transactional Display Use Element integration: The link to the active MasterPass Transactional Display element outlined in the Merchant Integration guide must be used instead of a static image. If updates to the element are made later, the merchant will not have to change anything on the site Element click through: When a consumer clicks a MasterPass Button or another MasterPass Transactional Display element, it must take the consumer to the wallet rather than another part of the merchant website for manual inputs Placement: Place the MasterPass Transactional Display at the front of the checkout experience alongside the guest checkout option, on product pages, and / or on the checkout page to minimize manual consumer inputs Leveraging Data from the Wallet Guest checkout: Leverage wallet data to auto-fill checkout fields required during guest checkout to speed up checkout and help reduce cart abandonment Merchant Account Creation: If the merchant site requires an account to be created, leverage wallet data to auto-fill the account creation fields where possible CVC information has been collected and validated at the time the card is entered into the wallet. There should be no additional requirement for the consumer to enter it at the merchant website For more detailed information about merchant integration, refer to the MasterPass Merchant Onboarding and Integration Guide available at: https://developer.mastercard.com/portal/display/api/masterpass+- +Merchant+Checkout+-+Documentation Shopping Cart Quantity: 1 Remove Update 1 Remove Update Product Description Low Cut Socks Item #00001 Running Shoe Item #00007 Price: $12.00 $94.95 Total: $12.00 $94.95 Checkout Options BUY WITH MasterPass Button placed at parity with other payment brands Shopping Cart Quantity: 1 Remove Update Product Description Price: $12.00 Total: $12.00 Subtotal: $12.00 Estimated Shipping: $2.34 Estimated Tax: $1.10 Total: $15.44 BUY WITH MasterPass Button leveraged directly within shopping cart Ready to Checkout? Returning Customers Enter User Name Low Cut Socks Item #00001 New Customers Continue Shopping Create an account for fast checkout and easy access to order history. Subtotal...................... $106.95 Total........................ $106.95 Promo Codes/Gift Cards Enter Code or Payment Options Other Checkout Options Redeem Enter Password Sign In to Checkout Redeeming a gift certificate? We ll ask for your claim code when it s time to pay. Forgot password? Create Account Guest Customers If you don t want to create an account today, proceed to checkout now. Guest Checkout BUY WITH MasterPass Button on checkout choice page Parity with other checkout buttons 2013 MasterCard. All rights reserved. 7
Confirm Order Page Once the consumer is directed from the wallet, a MasterPass Button appears on the Confirm Order page as shown, confirming the consumer has selected MasterPass as their payment method. If a consumer chooses to change the payment method, he/she should be redirected toward all available payment options. Merchant Payment Page Review the information below, then click Place Your Order. Shipping Address: Shipping To: (Change) John Doe 123 Any Street Anytown, ST 00000 000-000-0000 Payment Info: Payment Method: (Change) johndoe@anycom.com MasterCard card *** 0000 Expires: 12/2017 Billing Address: Bill To: (Change) John Doe 123 Any Street Anytown, ST 00000 000-000-0000 Place Your Order Order Summary: Items: $123.45 Shipping & Handling: $11.00 Tax: $9.42 Order Total: $143.87 2013 MasterCard. All rights reserved. 8
Link Message A link message is required in association with the MasterPass Button presented where the MasterPass payment selection is made, and also may be used with MasterPass brand elements elsewhere on the merchant s website. The message gives the consumer the option to learn more about MasterPass and may appear as a pop-up window, rollover, or a tooltip. MasterCard will provide this feature to merchants with the Buttons and may update or change the following language and graphics at any time in order to improve the user experience: MasterPass is a free service that is a fast, simple and safe way to check out online. It cuts down on the time and effort it takes to buy the things you want and need. And because it s from MasterCard, you can trust that it s secure. Link When you are ready to check out online, click on the BUY WITH MasterPass Button. Next, unlock your MasterPass account to choose your payment method and shipping address. Then simply confirm your purchase, and you re done! Use it with all major credit, debit, and prepaid cards. Use it to easily store all your cards and addresses in one place. Use it on all your connected devices. Language versioning is available through: https://developer.mastercard. com/portal/display/api/masterpass+-+merchant+checkout+- +Documentation MasterPass info pop-up 2013 MasterCard. All rights reserved. 9
Using the MasterPass Name in Headlines and Text When MasterPass is used in communications within text or a headline, it should be set in the same typeface as the surrounding text. Always set MasterPass as a single word with no space between Master and Pass. M and P should be capital letters. NOTE: MasterPass may not be translated (with the exception of the Chinese MasterPass translation for use in China only). The MasterPass name may be used with or without reference to MasterCard, as befits the specific communication intent. MasterPass by MasterCard is permitted; MasterCard MasterPass is not permitted. If MasterCard is used, always set MasterCard as a single word with no space between Master and Card. M and C should be capital letters. RETAIL WORLD now accepts MasterPass, your shortcut to checkout. In the first or most prominent use of MasterPass or MasterCard on a page, the and symbols respectively are required. In subsequent uses, the and may be omitted. When a merchant refers to MasterPass in marketing, the following legal line must be included somewhere on the page: MasterPass and the associated brand mark are trademarks of MasterCard International Incorporated. 2013 MasterCard. All rights reserved. 10
Contact Us If after reading the MasterPass Merchant Branding Requirements document you still have questions or need more information, please contact us. For information about these brand elements, contact the Identity Specialists via email at identity_specialists@mastercard.com, or call the Brand Identity Hotline at 1-914-249-1326. For information about MasterPass Integration, please email merchant_support@masterpass.com. 2013 MasterCard. All rights reserved. 11