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 or mobilepay). 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.
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.

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

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

Design guidelines​

Vipps buttons​

MobilePay buttons​

Exceptions​

Button generator for websites​

Step 1: Include the library script​

Step 2: Generate and add the button code​

Step 3:Customize the button​

Pay and Login button text​

Best practices​

Design guidelines

Vipps buttons

MobilePay buttons

Exceptions

Button generator for websites

Step 1: Include the library script

Step 2: Generate and add the button code

Step 3:Customize the button

Pay and Login button text

Best practices