Skip to main content

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=""></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



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.

brandThe brand that the button uses. This will impact what color and logo is displayed. Supported values: vipps, mobilepay.vipps
variantThe color variant of the button. Supported values: primary, dark, light.primary
languageISO 639-1 alpha-2 language code. Supported values: en, no, fi,
roundedThe button will have rounded corners (oval shape) when set to truefalse
verbThe text variant of the button. Supported values: buy, pay, login, register, continuebuy
stretchedWill fill the whole with of the parent container when set to truefalse
brandedWhether or not the company logo should be displayed.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 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 buttonPill button
Vipps orange rectangular buttonVipps orange pill button
MobilePay blue rectangular buttonMobilePay blue 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 buttonPill button
Vipps Rectangular blackVipps Pill black
Vipps Rectangular whiteVipps Pill white

Approved button text with Vipps

  • Pay with Vipps
  • Log in with Vipps
  • Continue with Vipps
  • Register with Vipps

Approved button text with MobilePay

  • Pay with MobilePay
  • Log in with MobilePay
  • Continue with MobilePay
  • Register with MobilePay
  • Continue as [first name]

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.

Vipps cart with two buttons

Help us improve our documentation

Did you find what you were looking for?