best practices guide for payments...google pay est practices for eveloers august 2018 3 overview use...

Best Practices Guide for PaymentsWeb | August 2018

August 2018 2Google Pay Best Practices for Developers

Contents

3 Overview

4-5 GooglePayPaymentButton:Do’s&Don’ts 5 Examples

6-7 GooglePayLogo&Mark:Do’s&Don’ts 7 Examples

8-9 Using Google Pay in Text 9 Examples

10-11 CreatingYourCheckoutFlow 11 Examples

12 GettingApproval


OverviewUsethisbestpracticesguidewhenyou’rereadyto

implementtheGooglePayAPIforweb.You’llfind

instructionsandexamplesforusingtheGooglePay

buttons,logo,mark,andtextonyoursite.Followthem

closelytoprovidethebestexperienceforyourusers

andupholdtheintegrityoftheGooglePaybrand.


• Use only the Google Pay buttons provided by Google.

• UseGooglePaybuttonstoinitiatethepaymentflow.

• Use the same style of button throughout your site.

• Ensure the size of Google Pay buttons remains equal to

or larger than other buttons.

• Ensureyouchooseabuttoncolorthatcontrastswith

your background.

Do Don’t

• DonotcreateyourownGooglePaybuttonsoralterthefont,

color,buttonradius,orpaddingwithinthebuttoninanyway.

• Do not use Google Pay payment buttons to initiate any other

action.

• Donotswitchbetweencolorvariationsorversions

withandwithouttext.

• Do not make the Google Pay button smaller than other buttons.

• Do not use a button color that’s similar to the background.

Forexample,don’tusethewhitebuttononawhitebackground.

Google Pay Payment Button: Do’s & Don’ts


Examples

Ifyou’replacingaGooglePaybuttonnexttoanotherbutton,makesuretheGoogle Pay button is of equal size.

AlwaysusetheaGooglePaybuttonthatcontrastswiththebackgroundonwhichitwillappear.

WhenadjustingthesitetotheGooglePaybutton,alwaysmaintainheight,width,andpaddingrules.


• Use only the Google Pay logo and mark provided by Google.

• Use the Google Pay logo or mark to indicate Google Pay as

apaymentoptionduringpaymentflows.

• Choosethelogoormarkthatbestmatchesthewayin

whichotherbrandidentitiesaredisplayed.

• Donotcreateyourownlogoormarkoraltertheminanyway.

• Donottranslatetheword“Pay.”

• Do not display the Google Pay logo or mark in a different or smaller

size than the other payment options.

Google Pay Logo & Mark: Do’s & Don’ts

Do Don’t


Examples

Ifyou’reusinglogostorepresentpaymentoptions,usetheGooglePaylogoandcontinueusingitthroughoutyourbuyflow.

Ifyou’reusingthe“creditcard”formattorepresentpaymentoptions,usetheGooglePaymarkandcontinueusingitthroughoutyourbuyflow.


Using Google Pay in Text

YoumayusetexttoindicateGooglePayasapaymentoption

andtopromoteGooglePayinyourmarketingcommunication.

Capitalize the letters “G” and “P”

Alwaysuseanuppercase“G”andanuppercase“P”followedbylowercaseletters.

Don’tcapitalizethefullname“GOOGLEPAY”unlessmatchingthetypographicstylein

yourUI.Neveruseanuppercase“GOOGLEPAY”inyourmarketingcommunication.

Do not abbreviate Google Pay

Alwayswriteoutthewords“Google”and“Pay.”

Match the style in your UI

“GooglePay”shouldbesetinthesamefontandtypographicstyleastherestofthe

text on your site. Do not try to mimic Google’s typographic style.

Do not translate Google Pay

“GooglePay”shouldalwaysbewritteninEnglish.

Do not translate it into another language.

Use the trademark symbol the first time “Google Pay” appears

in marketing communication

Whenusing“GooglePay”inyourmarketingcommunication,

you’llneedtoshowthetrademarksymbol,™,thefirstormost

prominent time it appears. Do not use the trademark symbol

whenindicatingGooglePayasapaymentoptiononyoursite.


Examples

“GooglePay”shouldbesetinthesamefontandtypographicstyleastherest of the text on your site.

Ifyouaren’tdisplayinglogosforotherpaymentoptions,“GooglePay”shouldberepresentedbytext.


Creating Your Checkout Flow Maximizeyourconversionsbyimplementingcheckoutflows

andpaymentmodalsthatallowcustomerstoquicklyandeasily

reviewtheirpaymentinformationandconfirmtheirpurchase.

Make Google Pay the primary payment option

PeoplelikeusingGooglePayforfastercheckout.Wherepossible,displaythe

GooglePaybuttonprominently,andconsidermakingitthedefaultoronlypaymentoption.

Let your customers make purchases without an account

Accountcreationslowsdownthecheckoutprocessandcanleadtoabandonedcarts.

Use Google Pay to enable faster guest checkout. If you’d like your customers to create

anaccount,allowthemtodosoaftertheycompletetheirpurchase.

Use Google Pay to initiate payment during cart checkout

TheGooglePaybuttonbringsupthepaymentmodal.Onthepaymentmodal,

customerscanonlyselectandconfirmasinglepaymentmethodandshipping

address.Besuretogetalloftheotherinformationyouneed–suchasanitem’ssize,

color,orquantity,theoptiontoaddagiftmessageorapplyapromocode,ortheability

to choose different shipping speeds and destinations for individual items – before

you give customers the option to select the Google Pay button. If a customer doesn’t

providetheinformationneeded,offerreal-timefeedbacktoletthemknowwhat’s

missing before bringing up the payment modal.

Add the Google Pay button to product detail pages in addition to cart checkout

Speedupsingle-itemcheckoutbylettingcustomersmakeindividualpurchases

rightfromyourproductdetailpages.Ifacustomerchoosesthisoption,besure

toexcludeanyotheritemstheyhaveintheirshoppingcart,sincethepayment

sheetonlyletsthemconfirmtheirpaymentandshippinginformation.

Include Google Pay on confirmation pages and receipts

Whendisplayingpaymentinformationonconfirmationpagesandemailreceipts,

makesureyouindicatethatthecustomerhaspaidwithGooglePay.Neverdisplay

fullaccountnumbers,expirationdates,orotherpaymentmethoddetailstotheuser.

Hereareafewexamples:

“Network••••1234withGooglePay”

“Network••••1234(GooglePay)”

“GooglePay(Network••••1234)”

“[email protected]”

“Paymentmethod:GooglePay”

“PaidwithGooglePay.”


Examples

ThescreensaboverepresentarecommendedGooglePayflowforashoppingcartexperience.


Getting ApprovalOnceyou’veintegratedtheGooglePayAPI,you’llneedtoget

approvalforalloftheplaceswhereyoudisplayorreference

GooglePayonyoursiteinordertogainproductionaccess.

How to submit for approval:

Complete our Integration checklist tosubmityourappforreview.Youshouldreceive

approvalorfeedbackwithin1businessday.

https://services.google.com/fb/forms/googlepayAPIenable/https://developers.google.com/pay/api/web/guides/test-and-deploy/integration-checklist

g.co/pay/developers

https://developers.google.com/pay/api/web/

OverviewGoogle Pay Payment Button: Do’s & Don’tsExamplesGoogle Pay Logo & Mark: Do’s & Don’ts ExamplesUsing Google Pay in TextExamplesCreating your Checkout Flow ExamplesGetting Approval

best practices guide for payments...google pay est practices for eveloers august 2018 3 overview use...

Documents