brand guidelines for payu merchants · 2017-10-03 · payu / erchants master brand guideline / une...

Brand guidelines for PayU merchantsVersion 1.0 22/06/15

PayU / Merchants master brand guideline / June 2015 Version 1.0 / 2

Introduction Welcome to PayU!

We are so excited to see U.

To ensure that your customers know and trust that their transactions are as safe and secure as ever.

We recommend the following guidelines be followed.

Where ever possible include the “Payment secured by PayU” logo so that you educate your customers that their payment is safe and secure.

This also educates them on the link between your brand and PayU.

Payments secured by


Contents Introduction Our Branding Elements

1. Wallet Setup Screens

Mobile Application

Contents

Branding guidelines for PayU logo set

Logo – Master - PayU

Logo – Master - Payments Secured by PayU

Logo – Master - Secured Payments by PayU

2. Payment flow Screens

3. Help / FAQ’s

1. PayU logo to your website

2. Adding PayU wallet as a payment type to your website

Website

Notification Mailer

Print Ads

3D Secure

Trust in online payments Video

Logo – Exclusion/Minimum

Logo – Appropriate Usage

Logo – DOs & DON’Ts

PayU – U Icon

Colour Palette - Overview

Colour Palette - Usage

Typography - Our Typeface

Typography - Digital

Typography - Spacing

2 4

19

18

3

4 7

8

9

20

22

23

24

23

25

26

27

28

4

10

11

12

13

14

15

16

17

PayU / Merchants master brand guideline / June 2015 Version 1.0 / 4Version 1.0 / 15PayU / Corporate master brand guidelines / March 2015

The PayU logo should be given a place of prominence on a page. The logo should not appear more than once on a single page or screen. Always maintain the required clear space around the logo. The solid white or black versions should be used only where the full colour logo is not an option.

DO NOT use the logo as part of a sentence within a block of copy.

Our Logo Exclusion zone and minimum size

Clear Space - Print

In print materials, the preferred amount of clear

space around the logo is equal to the height

of the ‘a’.

Minimum Logo Size - Print

for print use, the logo should never be reduced

below the minimum size of 25 x 11mm.

Minimal Clear Space - Digital Maintaining a 25 pixel clear space

is always preferable.

Minimal Logo Size - Digital In digital executions, the logo should

appear no smaller than 50px wide.

25px

25mm

50px

11mm9px

25px

25px

25px










25mm

50px

11mm9px

Clear Space - PrintIn print materials, the preferred amount of clear


of the ‘a’.

25px

25px

25px

25px












25mm

50px

11mm9px

Clear Space - PrintIn print materials, the preferred amount of clear


of the ‘a’.



25px 25px

25px

25px


PayU Mono Logo

The mono versions are only to be used if necessary

due to colour restriction or background colour.

Note: These versions have been altered for

printing restrictions

Please note: These logos are only to be used where, due to printing restrictions will not allow our primary gradient and reverse logos to be used.

PayU Reverse logo

Our reverse logo is to only be used over our brand

colours or an image. Please do not place over a busy

image and if legibility is a problem, please house

in our block device. (for example - refer to page 36)

PayU Gradient Logo

Our gradient logo is our primary logo.

To aid comprehension, this is used only on

a white background and wherever possible.

Note: The gradient should not be altered

in any way.

Our logo is our most universally recognised asset, therefore it should always be on a white background wherever possible.

Only use our mono versions when required.

PayU Lime

C M Y K: 35 0 100 0

R G B: 166 195 7

PMS: 382C

HEX: A6C307

PayU Green

C M Y K: 70 0 100 25

R G B: 67 143 41

PMS: 370C

HEX: 438F29

Our Logo Master

Our Branding Elements


Our Branding Elements

Payments secured byPayments secured by

PayU Mono Logo






PayU Reverse logo



image and if legibility is a problem.

PayU Gradient Logo





in any way.




PayU Mono Logo






PayU Reverse logo



image and if legibility is a problem.

PayU Gradient Logo





in any way.



Our Branding Elements PayU Secure logo


Our gradient logo should ONLY be used on a white background. DO NOT use over colour or image of any sort. This is to ensure legibilty and allow logo to stand out.

Our reversed (white) logo is a little more versatile. This should be used across both our brand colours and imagery. When using over imagery please ensure the logo is legible. DO NOT place over image if logo is fighting for attention and/or washed out.

Our Logo Appropriate usage


Take care to treat our logo with respect, only use the provided logo artwork. This page shows what NOT to do.

DO use the provided logo artwork and the correct logo version for the right materials e.g. Pantone®, CMYK versions for print and RGB, HEX for digital and websites.

Our Logo DOs & DON’Ts

DO NOT position logo on angle

DO NOT stretch or distort DO NOT alter the colours

DO NOT place the coloured logo

on an image of any sort. If required

please house in our block device

DO NOT place the logo over the

“U” icon

DO NOT skew the logo or use a keyline

or stroke around the logo

DO NOT place the coloured logo on

a coloured background - even our

brand colours

DO NOT change proportions

of elements

DO NOT re-arrange building blocks


The ‘PayU’ wordmark is our logo. The ‘U’ icon is meant to be used where size limitations don’t allow for the PayU logo, and/or where we need a shortcut graphic, such as a favicon. The ‘U’ should only be used in executions:

1. To represent PayU when the full logo is already present in the experience.

2. In environments clearly controlled by PayU (e.g. PayU’s web page etc.).

PayU U Icon

3. When spacial restrictions make the use of the full logo impossible (e.g. favicon).

4. Within the PayU mobile experience.

Please don’t use it as a repeating background pattern as it has been altered slightly from the existing ‘U’ to help balance the icon within the housing device.

PayU lime version

This lime version should only be

used on our lime green background,

in design instances where space

is limited and the full logo is not

feasible.

Note: This must only be

used when housed in the device.

The keyline must be removed.

Reverse white version

The reversed white version was

originally created for the PayU

mobile experience. This is

the preferred version.

Note: This must only be

used when housed in the device.

PayU Lime

C M Y K: 35 0 100 0

R G B: 166 195 7

PMS: 382C

HEX: A6C307

5.5mm or 14px

Minimal Clear Space - Digital In digital executions, the logo should



Primary

PayU’s signature colour is the PayU lime on a white background. This should always be considered as the primary colour. Our primary colour palette should be used across the majority of our materials – whether that’s adverts, product posters, customer communications or promotional items.

Primary - Web

Primary lime should always be the dominant colour used online (see RGB & HEX values). If required tints of our PayU green can be used sparingly.

Colour Palette Overview

C. 35 M. 0 Y. 100 K. 0

R. 166 G. 195 B. 7

HEX: A6C307

C. 20 M. 15 Y. 10 K. 40

R. 148 G. 150 B: 155

HEX: 94969B

C. 80 M. 0 Y. 30 K. 0

R. 0 G. 173 B: 186

HEX: 00ADBA

C. 100 M. 45 Y. 50 K. 45

R. 0 G. 72 B: 82

HEX: 004852

Pantone 382C

PayU lime

Cool Gray 7C

Pantone 3262C

PayU Blue

Pantone 316C

Blue Pairing

Pantone 370C

PayU Green

Cool Gray 2C

Pantone 233C

PayU Pink

Pantone 1955C

Pink Pairing

Rich Black

Warm Gray 2C

Pantone 109C

PayU Yellow

Pantone 166C

Yellow Pairing

White

Warm Gray 5C

Pantone 259C

PayU Purple

Pantone 2627C

Purple Pairing

Pantone 3265C

PayU Aqua

Pantone 335C

Aqua Pairing

C. 70 M. 0 Y. 100 K. 25

R. 67 G. 143 B: 41

HEX: 438F29

C. 10 M. 5 Y. 3 K. 5

R. 227 G. 228 B: 226

HEX: E3E4E2

C. 10 M. 100 Y. 0 K. 0

R. 215 G. 0 B: 127

HEX: D7007F

C. 25 M. 100 Y. 40 K. 30

R. 149 G. 18 B: 71

HEX: 951247

C. 30 M. 30 Y. 30 K. 100

R. 19 G. 16 B: 13

HEX: 13100D

C. 15 M. 5 Y. 25 K. 5

R. 225 G. 220 B: 216

HEX: e1dcd8

C. 0 M. 10 Y. 100 K. 0

R. 255 G. 221 B: 0

HEX: FFDD00

C. 0 M. 60 Y. 100 K. 0

R. 239 G. 125 B: 0

HEX: EF7D00

C. 0 M. 0 Y. 0 K. 0

R. 255 G. 255 B: 255

HEX: FFFFF

C. 10 M. 15 Y. 15 K. 30

R. 181 G. 171 B: 168

HEX: B5ABA8

C. 60 M. 100 Y. 0 K. 0

R. 131 G. 31 B: 130

HEX: 831F82

C. 70 M. 100 Y. 0 K. 50

R. 71 G. 15 B: 81

HEX: 470F51

C. 65 M. 0 Y. 40 K. 0

R. 84 G. 187 B: 171

HEX: 54BBAB

C. 100 M. 15 Y. 80 K. 5

R. 0 G. 133 B: 88

HEX: 008558

Primary

Secondary

Neutral

Secondary

Use the accent palette to create visual interest, engagement and show diversity. Please note the colour pairings – the colours that appear on top of one another are intended to be used together, DO NOT MIX. The colour on top should always be the dominant colour - see next page.

Neutral

The neutral palette is intended to be used sparingly to organise information and create functional environments.


Ample Soft Bold 40/42pt









Ample Soft Regular 20/22pt









Body copy: Ample Soft Regular @ 10/12pt, Where possible use the grid lines to hang copy from to create consistency.

quidi aligene sciendae nat quia nones porepe voloritiis ut el et, ut diae qui nonem.





DOs

• The more vibrant colour should always

be the dominant colour

• Headlines are to be displayed in our primary

accent palette except over an image or solid colour

• Our secondary accent palette is to be used in

headlines and copy when placed over the primary

accent colour

• Body copy is to be set as 80% black except when

reversed over solid colour or image

• Tints of the primary accent colour can be

used more sparingly

• Our palette should compliment our imagery

DON’Ts

• Our palette has been selected to have a

primary colour acompanied by a secondary of the

similar tone. THESE ARE NOT TO BE MIXED.

Primary Secondary Secondary

Colour Palette Usage


abcdABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@£$%^&*()

Our typeface is Ample Soft. It’s a typeface that allows us to communicate how we’re different but it also has the softness and simplicity to communicate our human and straight-forward personality.

Please see the appendix for alternate typefaces for different languages.

Ample Soft

Ample Soft Medium

Ample Soft Regular

Light

Preferred font choice

for pull quotes

Regular


for body copy

Medium

Preferred font

choice for page/

section headers

& headlines

Bold


for body intro header.

Alignment: left align is preferred. Right align is okay when required

by the design, but centre align should be avoided.

Headlines and Subheads: you can use sentence case but never all caps.

Intro Copy, Body Text, and Legal Disclaimers: should always be

in sentence case.

Initial Caps: only use on buttons, marks, labels, and PayU entities.

Italics: can only be used where required by style conventions,

such as names, titles or quotes.

Kerning and Tracking: in Adobe applications, kerning should always

be set to optical and tracking should never be set to less than -10

or greater than 10 for body copy and -30 for headlines.

Typography Our Typeface


Ample Soft is our primary and preferred digital typeface. Content and hierarchy will determine typeface weight. Open Sans is our secondary typeface, this is usually used within body copy, site navigation and buttons etc. If either two typefaces are unavailable please use Arial regular, this may be required across PC operating systems or electronic internal documents.

Please see the appendix for alternate typefaces for different languages.

DO NOT use Open Sans or Arial for any print materials.

Typography Digital

Ample Soft - Medium

Open Sans - Regular

Arial - Regular





Typography Hierarchy and Spacing Headline:

Ample Soft mediumSub head message: Ample Soft medium

Body Copy Sub Header: Ample Soft Medium Etiam volutpat conse quat augue sit amet rutrum.

Body copy: Ample Soft Regular Adipiscing elit. Aliquam vitae consequat mi, vel interdum urna. Ut eget tristique metus, in egestas dolor. Adipiscing elit. Aliquam vitae consequat mi.

Footer/Legal Copy: Ample Soft Regular. Adipiscing elit. Aliquam vitae consequat mi, vel interdum urna. Ut eget tristique metus, in egestas dolor. Adipiscing elit. Aliquam vitae consequat mi.

Body Copy Header: Ample Soft Bold. Adipiscing elit. Aliquam vitae consequat mi, vel interdum urna. Ut eget tristique metus, in egestas dolor. Adipiscing elit. Aliquam vitae consequat mi, vel inter-dum urna. Ut eget tristique metus, in egestas dolor.

Headlines

Leading:

Desired value is headline type size +2pt (e.g. 60pt +2pt = 62pt leading). Adjust as required.

Tracking:

-30 and set to optical kerning wherever possible.

Body copy

Leading:

Should be the body copy type size +3pt (e.g. 15pt +3pt = 18pt leading).

Tracking:

-10 and set to optical kerning wherever possible.


Mobile Application


1. User needs to accept the PayU T&C and privacy policy to sign up for a wallet

The below needs to be included in your mobile app flows:

2. The user can read the user agreement or privacy policy from the PayU website.

3. Option for the user to opt in to receive PayU marketing communications and merchant special offers

• Please include links to the User Agreement and Privacy policy which can be found in our API

I agree to the PayU User Agreement and Privacy Policy

I’d like to receive PayU and our merchant special offers

4. All wallet sign up screens to have the “payments secured by payu (logo) on screen



Mobile Application

6. User to select a security question

5. User needs to set up 4 digit pin


2. Payment flow screens

1. All payment screens to have the “Payments secured by PayU (logo)” in the footer of the screen.

Mobile Application


Mobile Application2. Your payment flow should be:

2.2. Select payment method(must include the PayU SVA as a payment option)

2.1. Product / Service details 2.3. Enter pin 2.4. Payment success

2. Payment flow screens


3. Help / FAQ’s We recommend including the PayU FAQ’s on your app. Please make use of our API for the FAQ’s

Mobile Application


Website1. PayU logo to your website

We recommend including the “Secure payments by PayU (logo) to the footer of your website, to educate your customers that PayU is your trusted payment provider, ensuring payments are safe and secure. This also educates consumers on the connection between your brand and PayU.


2. Adding PayU wallet as a payment type to your website

If you are using the PayU redirect payment pages, we can automatically add the PayU wallet as a payment method to your payment pages without any work required by you. All you need to do is sign the wallet agreement. Chat to your sales representative to do so.

If you are not using the PayU redirect payment pages, please make use of our wallet API and follow the steps for integration. Here is a link to recommended wireframes for adding the PayU wallet to your website (http://gacequ.axshare.com/#p=m_payment_method_1). If you do not use the recommended Wireframes, please ensure that the PayU logo and branding is clear within the payment flow as per the screens below.

Website


Notification MailerTo educate your customers on the connection between PayU and your brand we recommend adding a “payments secured by PayU (logo), our trusted payments provider” to your payment confirmation mailers.

We are finding this working well with other merchants.


Print Ads

Payments secured byOur trusted payments provider

Follow ‘picup’O� cial Account

& register.

Download WeChat. Enter thecollection &

delivery addresses.

Add extra info to help your driver fi nd you faster.

Choose your vehicle (bicycle / scooter / car)

according to your parcel size.

We’ll debit your wallet on

WeChat & email you an invoice.

Once we picup your goods, track your

delivery online. Once delivered, you’ll

receive notifi cation.

deliver whatever. whenever.

Navigated by TomTom.Navigated by TomTom.

O&

M C

APE

TO

WN

794

60/E

Scan this QR code with WeChat, complete the simple registration

process & get R100 back into your wallet on WeChat

after your fi rst picup.

Terms & Conditions apply**

**One coupon redeemable per user. Limited to fi rst 2000 registered users and valid for 2 months.

www.picup.co.za

For print adverts, please add the Payments secured by PayU (logo) to the footer of the page. See example below


3D SecureTo avoid potential drop offs on your site due to 3D Secure we recommend adding this info graphic to your site to educate your users on 3D Secure, why its important, how they register for 3D Secure.

https://www.payu.co.za/blog/3D-secure-infographic

What is 3D Secure?

3D Secure provides an extra step during the online payment process to ensure that only you, the

cardholder, use your card. Also known as Verified by Visa, MasterCard SecureCode or Amex Safekey,

it allows you to enter your previously selected PIN/Password or a One Time Pin - helping your bank to

know it is you shopping online.

With an additional focus on the safety of e-commerce transactions, your bank may have already

registered you for the service, or you may be required to register during your next online purchase.

The Benefits of 3D Secure

Online shopping is already very secure with high levels of security and encryption whenever

you use your credit card. 3D Secure is the next layer up of security whereby your credit card is

further protected from any unauthorised use and fraud. So you can shop in total confidence

safe in the knowledge that your card is protected at all times.

How does it work?

If you have already registered or have been registered by your bank, you will be

prompted with an additional screen requesting a One Time PIN (OTP) or a PIN/

Password. OTPs are sent to the cellphone number your bank has on record for you,

whilst a PIN or Password is a secret code you have chosen when you registered for

3D Secure or was provided to you by your bank at the time of issuing your card. Simply

enter the OTP, PIN or password and proceed. If you have never registered or been

registered for 3D Secure, you will be asked to register for 3D Secure when you make

an online purchase. Simply follow the prompts on screen to register.

The first time you use your 3D Secure enabled credit card for shopping online,

the bank that issued your credit card will request that you verify that you are in fact

the correct cardholder by entering your pin or OTP.

My Card is Blocked – How do I reactivate my credit card for 3D Secure?

This depends on your bank. However, in most cases your bank will lock your card

after three unsuccessful attempts as a safety mechanism against fraud. If this

occurs, please contact your bank’s helpdesk using the toll-free number on the back

of your card.

Does every South African Online Retailer Use 3D Secure?

The Payment Association of South Africa (PASA) made it compulsory for all merchants

to be 3D Secure enabled by 28 February 2014. This is a good thing as, while it may take

a few seconds longer for each transaction, it will certainly strengthen the security of

online shopping via credit card.

Have more questions?

If you have questions related to 3D Secure or need to change your mobile number, please contact your bank for assistance.

What if I suspect Fraud on my card?

Please block your card as quickly as possible by contacting your Bank Client Services

or Card Fraud division, both of which are available 24/7. Once the card is blocked,

you will no longer be able to make purchases or use it to withdraw cash.

Tips for a good 3D Secure Experience

• Ensure you have the card you intend to use to pay for the transaction ready.

• Ensure you have your cellphone with you to receive the One Time PIN (OTP) or

you know what your PIN or Password is.

• After entering your PIN/Password, the system may take a couple of seconds to

authenticate your PIN/Password. This is normal – do not close the browser.

• If you receive an error message, read the message on the screen. If you have

entered your PIN/Password incorrectly, you will be allowed to retry. Although

infrequent, there may also be other reasons why the transaction failed, in which

case we recommend that you follow the instructions on the screen or contact

your bank for further assistance.

How do you sign up?

ABSA, Nedbank, Standard Bank, First National Bank and Investec have pre-enrolled all Visa and MasterCard credit

card clients for 3D Secure.

All you need to do is activate your card once. You can do so now by clicking on the link to your bank in the below

section and logging in to your banking profile, or you will be invited to do it at a later stage when conducting an online

purchase.

Please note: If you are an Investec cardholder, please use your credit card pin when prompted to submit the one-time password (OTP).

Why do we have 3D Secure?

South African banks and e-commerce merchants are implementing 3D Secure to help protect

you, the cardholder, against unauthorised use of your card when shopping online at 3D Secure

merchants.

3D Secure allows you to authenticate yourself while making an online payment, therefore

minimising the risk of someone else using your card fraudulently.

How much does it cost?

There is no cost to you, the cardholder.

Visa, MasterCard and the banks fund

all SMS and other costs.

What if I don’t want to activate my

credit card for 3D Secure?

If you do not activate your credit card for 3D Secure

before it becomes mandatory, you will be required to

pay for your goods or services via alternative online

payment methods supported by the merchant

website (e.g. EFT).

****

your trusted payments provider

3D Secure for online shoppers

Buy

What is 3D Secure?












How does it work?
















of your card.























How do you sign up?





purchase.





merchants.













website (e.g. EFT).

****



Buy

What is 3D Secure?












How does it work?
















of your card.























How do you sign up?





purchase.





merchants.













website (e.g. EFT).

****



Buy


Trust in onlinepayment Video Add this video to your site to educate your customers that their payments are safe and secure.

Whenever they see the PayU logo they know its safe to shop away.https://youtu.be/tXVWukEfsAo

brand guidelines for payu merchants · 2017-10-03 · payu / erchants master brand guideline / une...

Documents