Best Practices Guide for Payments...Google Pay est Practices for eveloers August 2018 3 Overview Use...
Transcript of 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
-
August 2018 3Google Pay Best Practices for Developers
OverviewUsethisbestpracticesguidewhenyou’rereadyto
implementtheGooglePayAPIforweb.You’llfind
instructionsandexamplesforusingtheGooglePay
buttons,logo,mark,andtextonyoursite.Followthem
closelytoprovidethebestexperienceforyourusers
andupholdtheintegrityoftheGooglePaybrand.
-
August 2018 4Google Pay Best Practices for Developers
• 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
-
August 2018 5Google Pay Best Practices for Developers
Examples
Ifyou’replacingaGooglePaybuttonnexttoanotherbutton,makesuretheGoogle Pay button is of equal size.
AlwaysusetheaGooglePaybuttonthatcontrastswiththebackgroundonwhichitwillappear.
WhenadjustingthesitetotheGooglePaybutton,alwaysmaintainheight,width,andpaddingrules.
-
August 2018 6Google Pay Best Practices for Developers
• 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
-
August 2018 7Google Pay Best Practices for Developers
Examples
Ifyou’reusinglogostorepresentpaymentoptions,usetheGooglePaylogoandcontinueusingitthroughoutyourbuyflow.
Ifyou’reusingthe“creditcard”formattorepresentpaymentoptions,usetheGooglePaymarkandcontinueusingitthroughoutyourbuyflow.
-
August 2018 8Google Pay Best Practices for Developers
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.
-
August 2018 9Google Pay Best Practices for Developers
Examples
“GooglePay”shouldbesetinthesamefontandtypographicstyleastherest of the text on your site.
Ifyouaren’tdisplayinglogosforotherpaymentoptions,“GooglePay”shouldberepresentedbytext.
-
August 2018 10Google Pay Best Practices for Developers
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)”
“Paymentmethod:GooglePay”
“PaidwithGooglePay.”
-
August 2018 11Google Pay Best Practices for Developers
Examples
ThescreensaboverepresentarecommendedGooglePayflowforashoppingcartexperience.
-
August 2018 12Google Pay Best Practices for Developers
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