Skip to main content

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

Vipps orange rectangular button

Pill

Vipps orange rectangular button

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

MobilePay blue rectangular button

Pill

MobilePay blue pill button

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

Vipps Pill black

Vipps Pill white

Rectangle

Vipps Rectangular black

Vipps Rectangular white

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:

Select the options for your button
Code that generates this button:

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.
  • 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​

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

Help us improve our documentation

Did you find what you were looking for?