Skip to main content

Buttons

Let your customers know that you accept payment in Vipps and MobilePay by using our branded buttons. The buttons are customized programmatically to use the correct brand colors and text.

Getting the buttons​

info

If you have an application that can integrate JavaScript, you can use our JavaScript button library to dynamically generate the button in your code.

If you're looking for standalone images, many buttons can be downloaded from:

You can also log in and find buttons on Figma. This will allow you to change the text to another language, if needed:

Guidelines for using buttons​

✅ 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.

Button Colors​

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 pill 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.

Special cases​

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 text​

Here are several versions of text in all our languages.

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

JavaScript button library​

You can dynamically generate your button here. with our vipps-checkout-button JavaScript library.

Select the desired options and it will be updated immediately. Preview the button in dark or light mode by clicking the button.

Select the options for your button
Use the following with the JavaScript button library to dynamically generate the button in your code:

Finnish is currently only available with the MobilePay brand in the button generator.

Step 1: Include the library script​

First, you need to include the vipps-checkout-button.js 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: Add the button​

The button generator above provides you with a code snippet. Add this to your HTML page in the desired location. For example:

<!DOCTYPE html>
<html>
<head>
    <script
      async
      type="text/javascript"
      src="https://checkout.vipps.no/checkout-button/v1/vipps-checkout-button.js"
    ></script>
</head>
<body>
    <vipps-mobilepay-button
      brand="vipps"
      language="en"
      rounded="true"
      verb="login"
      branded="true"></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). Note that fi is not allowed with brand="vipps", and will be rendered in English. Note also that there is a bug in the library, and it currently only renders one language per page.
  • rounded: Set to true for rounded corners. Default: false.
  • 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.

Additional information​

For more information, see:

Last updated on

Help us improve our documentation

Did you find what you were looking for?