💥 Work in progress 💥
Please note: These guidelines are under revision. Contact us if you have questions.
These guidelines will help you use the payments buttons, logo, and marks within your websites.
Vipps buttons are only available in one style: white text on orange.
- 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 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.
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.
See https://github.com/vippsas/vipps-design-guidelines/tree/master/vipps-buttons.
Download the Vipps logo and mark in .svg and .png formats.
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, use the Vipps logo instead of 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.
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, use the Vipps mark instead of 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.
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.
Here are paymarks that can be used on front page or product pages:
See this PDF for more examples.
- 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 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.
You may use text to indicate Vipps as a payment option and to promote Vipps in your marketing communication.
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.
"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.
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:
People like using Vipps for faster checkout. Where possible, display the Vipps button prominently, and consider making it the default or only payment option.
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.
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.