Vipps design guidelines
Switch branches/tags
Nothing to show
Clone or download
Latest commit d7c13a2 Nov 30, 2018

README.md

Vipps design guidelines

These guidelines will help you use the Vipps payments buttons, logo and mark within your websites.

Table of Contents

Vipps buttons

Style

Vipps buttons are only available in one style: white text on orange. The Vipps Hurtigkasse button is always in Norwegian. Don’t create buttons with your own localized text.

Vipps payment button styles

Dos and Don’ts

Do

  • Use only the buttons provided by Vipps.
  • Use the same style of button throughout your site.
  • Ensure that the size of the Vipps buttons remains equal to or larger than other buttons.
  • Ensure that you choose a background color that contrasts with the button color.

🔥 Don’t

  • Don't create your own Vipps buttons or alter the font, color, button radius, or padding within the button in any way.
  • Don't use Vipps buttons to initiate any action other than a payment flow.
  • Don't make the Vipps button smaller than other buttons.
  • Don't use a background color that's similar to the button color.

Cart with two buttons

👍 If you place a Vipps button next to another button, make sure the Vipps button is of equal size.

Vipps logo and mark

Use either the Vipps logo or the Vipps mark when showing Vipps as a payment option. Choose the option that best matches the way in which other payment options are displayed.

Assets

Download the Vipps logo and the Vipps mark in SVG file formats.

LINK TO DOWNLOAD

Logo

Vipps logo

Use the Vipps logo with other brand logos.

If you're using the full logos of other brands to indicate different payment options in your payment flow, favor the Vipps logo over the Vipps mark. Display "Vipps" in text next to the logo if you're doing so for other brands. Don't alter the Vipps logo in any way. Use only the logo provided by Vipps.

Mark

Vipps mark

Use the Vipps mark with other brand identities in credit card format.

If you're using brand identities displayed in credit card format to indicate different payment options in your payment flow, favor the Vipps mark over the Vipps logo. Display "Vipps" in text next to the mark if you're doing so for other brands. Don't change the color or weight of the mark's outline or alter the mark in any way. Use only the mark provided by Vipps.

Size

Adjust the height to match the other brand identities displayed in your payment flow. Don't make the Vipps logo or mark smaller than other brand identities.

Checkout with Vipps logo

👍 If you use logos to represent payment options, use the Vipps logo and continue to use it throughout your buy flow.

Checkout with Vipps mark

👍 If you use the credit card format to represent payment options, continue to use the Vipps mark throughout your buy flow.

Dos and Don’ts

Do

  • Use only the Vipps logo and mark provided by Vipps.
  • Use the Vipps logo or mark to indicate Vipps as a payment option during payment flows.
  • Choose the logo or mark that best matches the way in which other brand identities are displayed.

🔥 Don’t

  • Don't create your own logo or mark or alter them in any way.
  • Don't display the Vipps logo or mark in a different or smaller size than the other payment options.

Using Vipps in text

You may use text to indicate Vipps as a payment option and to promote Vipps in your marketing communication.

Capitalize the letter "V"

Always use an uppercase "V" followed by lowercase letters. Don't capitalize the full name "Vipps" unless matching the typographic style on your website. Never use an uppercase "Vipps" in your marketing communication.

Match the style on your website

"Vipps" should be set in the same font and typographic style as the rest of the text on your website. Don't try to mimic Vipps's typographic style.

Don't translate Vipps Hurtigkasse

"Vipps Hurtigkasse" should always be written in Norwegian. Don't translate it to another language.

Checkout with Vipps in text

👍 If you don't display logos for other payment options, "Vipps" should be represented by text.

Confirm with Vipps mark

👍 "Vipps" should be set in the same font and typographic style as the rest of the text on your site.

Best practices

Maximize your conversions with checkout flows that let customers quickly and easily review their payment information and confirm their purchase.

The following are best practices:

Make Vipps the primary payment option

People like using Vipps for faster checkout. Where possible, display the Vipps button prominently, and consider making it the default or only payment option.

Let your customers make purchases without an account

Account creation slows down the checkout process and can lead to abandoned carts. Use Vipps to enable faster guest checkout. If you'd like your customers to create an account, allow them to do so after they complete their purchase.

Add the Vipps Hurtigkasse button to product detail pages in addition to cart checkout

Speed up single-item checkout by letting customers make individual purchases right from your product detail pages.

Include Vipps on confirmation pages and receipts

When displaying payment information on confirmation pages and email receipts, make sure you indicate the customer has paid with Vipps and ensure that Vipps is displayed consistently with how other payment methods are displayed.