Button guidelines
Web component
Make it super easy for customers to check out straight from a product page with our button!
The button is provided in multiple variants and colors and can be tailored to your page.
To use the badge on your site, add the Vipps MobilePay Button JavaScript library.
The library should preferably be added between your page's <head>...</head> tags and only once per page:
<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 code directly, you can place the JavaScript library just before the button tag.
Button designer
Attributes
The following are the attributes you can modify to change the look of your button. All attributes are optional, and the default values are shown below.
| Attribute | Description | Default |
|---|---|---|
brand | The brand that the button uses. This will impact what color and logo is displayed. Supported values: vipps, mobilepay. | vipps |
variant | The color variant of the button. Supported values: primary, dark, light. | primary |
language | ISO 639-1 alpha-2 language code. Supported values: en, no, fi, dk. | no |
rounded | The button will have rounded corners (oval shape) when set to true | false |
verb | The text variant of the button. Supported values: buy, pay, login, register, continue | buy |
stretched | Will fill the whole with of the parent container when set to true | false |
branded | Whether or not the company logo should be displayed. | false |
Customization
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 requirements mentioned below.
The button is an inline element by default, which means it will stay on the same line as sibling elements.
Buttons WCAG AA
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).
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.
For example:
| Rectangular button | Pill button |
|---|---|
 |  |
 |  |
Exceptions for WCAG AAA
Both our orange buttons and blue buttons with white text meet the WCAG demands for AA. If your website needs WCAG AAA, we allow to render our buttons in higher contrast, either white or black background. Use prefers-contrast and -ms-high-contrast CSS media queries to detect if your users have settings that ask for high contrast.
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:
| Rectangular button | Pill button |
|---|---|
 |  |
 |  |
Approved button text with Vipps
- English
- Norwegian
- Pay with Vipps
- Log in with Vipps
- Continue with Vipps
- Register with Vipps
- Betal med Vipps
- Logg inn med Vipps
- Fortsett med Vipps
- Registrer med Vipps
Approved button text with MobilePay
- English
- Danish
- Finnish
- Pay with MobilePay
- Log in with MobilePay
- Continue with MobilePay
- Register with MobilePay
- Continue as [first name]
- Betal med MobilePay
- Log in med MobilePay
- Fortsæt med MobilePay
- Registrer med MobilePay
- Fortsæt som [fornavn]
- Maksa MobilePaylla
- Kirjaudu sisään MobilePaylla
- Jatka MobilePaylla
- Rekisteröidy MobilePaylla
- Jatka nimellä [etunimi]
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.
