Buttons
For websites, please check out our button generator.
For other use cases, please follow these guidelines. Some assets can be downloaded from:
Design guidelines
Both our orange buttons and blue buttons with white text meet the Web Content Accessibility Guidelines (WCAG) demands for AA.
Vipps buttons
Rectangle
Pill
Vipps buttons are in white text on orange. The contrast ratio is 3.10:1 and the text size is 18.5 pt, the demand is 3.10:1 for large text (18pt).
Size: Fixed height (44px). Flexible width as long as padding on each side of the text is at least 24px.
MobilePay buttons
Rectangle
Pill
MobilePay buttons are in white text on blue. The contrast ratio is 3.77:1 and the text size is 18.5 pt, the demand is 3.10:1 for large text (18pt).
Size: Fixed height (44px). Flexible width as long as padding on each side of the text is at least 24px.
Exceptions
If WCAG AAA, is required, we allow you to render our buttons in higher contrast, either white or black background.
This exception only applies to color. Don't make your own Vipps/MobilePay buttons or alter the font, button radius, or padding within the button in any other way. For example:
Pill
Rectangle
Use prefers-contrast
and -ms-high-contrast
CSS media queries to detect if your users have settings that request high contrast.
Button generator for websites
Use our JavaScript button library to automatically generate Vipps MobilePay buttons into your website.
The buttons can be customized programmatically to use the correct brand colors and text.
For example, you can make your selections below and see how the button will look on your site:
Step 1: Include the library script
First, you need to include the Vipps MobilePay button library script in your HTML. This script should be added to the <head>..</head>
section of your HTML document to ensure it loads correctly.
<script
async
type="text/javascript"
src="https://checkout.vipps.no/checkout-button/v1/vipps-checkout-button.js"
></script>
If you don't have access to edit your website's <head>
section directly, you can place the script just before the button tag in your HTML. This ensures the script is loaded before the button is rendered.
Step 2: Generate and add the button code
The button generator above provides you with a code snippet like this:
<vipps-mobilepay-button
brand="vipps"
variant="primary"
language="no"
rounded="false"
verb="pay"
stretched="false"
branded="false"
></vipps-mobilepay-button>
Copy the generated code and paste it into your HTML where you want the button to appear.
Full example of code for a webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<script
async
type="text/javascript"
src="https://checkout.vipps.no/checkout-button/v1/vipps-checkout-button.js"
></script>
</head>
<body>
<h1>Welcome to Our Store</h1>
<p>Click the button below to pay with Vipps:</p>
<vipps-mobilepay-button
brand="vipps"
variant="primary"
language="no"
rounded="false"
verb="pay"
stretched="false"
branded="false"
></vipps-mobilepay-button>
</body>
</html>
Step 3:Customize the button
You can customize the button by modifying the attributes in the <vipps-mobilepay-button>
tag. Here are some of the attributes you can use:
- brand: The brand that the button uses (
vipps
ormobilepay
). Default:vipps
. - variant: The color variant of the button (
primary
,dark
,light
). Default:primary
. - language: ISO 639-1 alpha-2 language code (
en
,no
,fi
,dk
,sv
). Default:no
(Norwegian Bokmål). - rounded: Set to
true
for rounded corners. Default:false
. - verb: The text variant of the button (
buy
,pay
,login
,register
,continue
,confirm
). Default:buy
. - verb: The text variant of the button (
buy
,pay
,login
,register
,continue
,confirm
,donate
). Default:buy
. - stretched: Set to
true
to fill the whole width of the parent container. Default:false
. - branded: Set to
true
to display the company logo. Default:false
.
You can customize the placement and size of the button by applying your own CSS-style with the class
or style
attribute.
Remember to meet the design guidelines.
The button is an inline
element by default, which means it will stay on the same line as sibling elements.
Pay and Login button text
- English
- Danish
- Finnish
- Norwegian Bokmål
- Nynorsk
- Swedish
Vipps payment
- Pay with Vipps
- Buy now with Vipps
- Donate with Vipps
Vipps login
- Log in with Vipps
- Continue with Vipps
- Register with Vipps
- Confirm with Vipps
MobilePay payment
- Pay with MobilePay
- Buy now with MobilePay
- Donate with MobilePay
MobilePay login
- Log in with MobilePay
- Continue with MobilePay
- Register with MobilePay
- Confirm with MobilePay
Vipps payment
- Betal med Vipps
- Køb nu med Vipps
- Doner med Vipps
Vipps login
- Log in med Vipps
- Fortsæt med Vipps
- Registrer med Vipps
- Bekræft med Vipps
MobilePay payment
- Betal med MobilePay
- Køb nu med MobilePay
- Doner med MobilePay
MobilePay login
- Log in med MobilePay
- Fortsæt med MobilePay
- Registrer med MobilePay
- Bekræft med MobilePay
Vipps payment
- Maksa Vipps
- Osta nyt Vipps
- Lahjoita Vipps
Vipps login
- Kirjaudu sisään Vipps
- Jatka Vipps
- Rekisteröidy Vipps
- Vahvista Vipps
MobilePay payment
- Maksa MobilePaylla
- Osta nyt MobilePaylla
- Lahjoita MobilePaylla
MobilePay login
- Kirjaudu sisään MobilePaylla
- Jatka MobilePaylla
- Rekisteröidy MobilePaylla
- Vahvista MobilePaylla
Vipps payment
- Betal med Vipps
- Kjøp nå med Vipps
- Bidra med Vipps
Vipps login
- Logg inn med Vipps
- Fortsett med Vipps
- Registrer med Vipps
- Bekreft med Vipps
MobilePay payment
- Betal med MobilePay
- Kjøp nå med MobilePay
- Bidra med MobilePay
MobilePay login
- Logg inn med MobilePay
- Fortsett med MobilePay
- Registrer med MobilePay
- Bekreft med MobilePay
Vipps payment
- Betala med Vipps
- Kjøp no med Vipps
- Bidra med Vipps
Vipps login
- Logg inn med Vipps
- Hald fram med Vipps
- Registrer med Vipps
- Bekreft med Vipps
MobilePay payment
- Betala med MobilePay
- Kjøp no med MobilePay
- Bidra med MobilePay
MobilePay login
- Logg inn med MobilePay
- Hald fram med MobilePay
- Registrer med MobilePay
- Bekreft med MobilePay
Vipps payment
- Betala med Vipps
- Köp nu med Vipps
- Bidra med Vipps
Vipps login
- Logga in med Vipps
- Fortsätt med Vipps
- Registrera med Vipps
- Bekräfta med Vipps
MobilePay payment
- Betala med MobilePay
- Köp nu med MobilePay
- Bidra med MobilePay
MobilePay login
- Logga in med MobilePay
- Fortsätt med MobilePay
- Registrera med MobilePay
- Bekräfta med MobilePay
Best practices
✅ Do
- Use only the buttons provided by Vipps MobilePay.
- Use the same style of Vipps/MobilePay button throughout your site.
- The button text should only use a verb approved by Vipps MobilePay.
- Ensure that the size of the Vipps/MobilePay buttons remains equal to or larger than other buttons.
- Ensure that you choose a background color that contrasts with the Vipps/MobilePay button color.
🔥 Don’t
- Don't create your own Vipps/MobilePay buttons or alter the font, color, button radius, or padding within the button in any way.
- Don't use Vipps/MobilePay buttons to initiate any action other than a flow controlled by Vipps MobilePay (either open our app or a Vipps/MobilePay landing page).
- Don't make the Vipps/MobilePay button smaller than other buttons.
- Don't use a background color that's similar to the button color (transparent buttons is not allowed).
- Don't add hover effects.
- Don’t add stroke.