Skip to main content
View as Markdown (opens in a new tab)

Button generator

Generate on-brand payment buttons dynamically using our JavaScript library.

New brand - no worries

In the Danish and Finnish markets: By using this button generator, the new change in brand from MobilePay to Vipps will automatically happen for you.

Is this right for you?​

The Button generator shows an on-brand button on a website, or in an app that uses a WebView. It doesn't start the payment, so you add that yourself.

For a library that creates a button as well as starting a payment or agreement, use the Widget SDK.

Use the button generator to create your buttons. The generated buttons:

  • Use an approved Vipps MobilePay caption, font, color, and style.
  • Show the button text in the language you choose.
  • Have square or rounded corners to match the style of your UI.
  • Have a text label that screen readers announce.
  • Work with keyboard navigation.
  • Update the MobilePay logo automatically.

If you can't use the button generator, download static button images from the brand book.

In an online checkout, also follow the requirements for where to put the button.

JavaScript button library​

You can dynamically generate your buttons with our vipps-mobilepay-button JavaScript library.

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

Select the options for your button

Button appearance
Brand
Language
Finnish is currently only available with the MobilePay brand in the button generator.
Verb
Variant
Use the following with the JavaScript button library to dynamically generate the button in your code:

Step 1: Include the library script​

First, you need to include the 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://cdn.vippsmobilepay.com/js/button/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://cdn.vippsmobilepay.com/js/button/button.js"
    ></script>
  </head>
  <body>
    <vipps-mobilepay-button
      brand="vipps"
      language="en"
      rounded="true"
      verb="login"
    ></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, da, 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, express, add-card). Default: buy.
  • stretched: Set to true to fill the whole width of the parent container. Default: false.
  • compact: Set to true to display the button using a minimalistic 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.

When you style the button, follow the brand rules:

  • Don't make the button smaller than your other buttons.
  • Don't add hover effects or a border.
  • Don't make the button transparent, or place it on a background color similar to the button color.
  • Use the button only to start a Vipps MobilePay flow, such as opening the app or a Vipps MobilePay landing page.

The button is an inline element by default, which means it will stay on the same line as sibling elements.

Where to put the button in your checkout​

If you offer Vipps MobilePay as a payment method in an online checkout, these requirements apply.

Following the terms and conditions for Vipps MobilePay Business Solutions:

  • Make Vipps MobilePay just as visible and easy to access as other payment methods, including digital wallets and payment apps.
  • Make Vipps MobilePay directly accessible, with no secondary menus or extra steps.
  • Show Vipps MobilePay at the same level as comparable payment methods.
  • Avoid consistently giving Vipps MobilePay a lower priority in the display or checkout flow.
  • Present Vipps MobilePay in a way that keeps checkout fair, easy to understand and quick to use.
See logos, text, and dos and don'ts for the checkout (opens in a new tab)

Troubleshooting​

Button label wraps or is clipped​

If a parent container is too narrow to fit the button label on one line, the text wraps to multiple rows. The minimum width needed to display the label on a single line varies depending on the language and variant chosen.

In some cases, the container may still clip the button if width constraints are too strict. To fix a container-width issue:

  • Remove or increase width constraints on the parent container.
  • Reduce the container's horizontal padding to give the button more room.
  • Move the button outside the restricting element.

The button text wraps regardless of browser font size, in line with WCAG guidelines to keep the button accessible to all users.

Last updated on