Vipps design guidelines

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

Table of Contents

• Vipps buttons
• Vipps logo and mark
• Vipps custom QR code
• Using Vipps in text
• Best practices

Vipps buttons

Style

Vipps buttons are only available in one style: white text on orange.

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.
• Don't add hover effects.

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

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 mark in .svg and .png formats.

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

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.

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

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

Pay marks

Here are paymarks that can be used on frontpage or productpages:

• Orange
• White
• Bubble

See this PDF for more examples.

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.

Vipps custom QR code

With an agreement with Vipps, it is possible to link directly to a merchant domain by scanning a merchant URL with the camera in the Vipps app.

Vipps QR code frame

Always embed your QR codes pointing to you chosen URL inside a Vipps QR code frame. To improve your conversion rate, the frame and QR code should be placed somewhere natural and visible in the chosen purchase flow.

The QR code frame can be downloaded from https://github.com/vippsas/vipps-design-guidelines/tree/master/vipps-qr

Custom merchant QR code

Your QR code, embedded into a Vipps QR code frame must follow Vipps colour scheme. The eyeballs should be rounded. You may add your own logo in the center of the QR code. The URL in the QR code should not be too long, as it impedes readability.

For an example, see https://github.com/vippsas/vipps-design-guidelines/blob/master/vipps-qr/vipps_qr_code_instructions.pdf

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.

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

👍 "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.

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.