Skip to main content

Button generator

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

Is this right for you?​

Use this JavaScript library if you're building:

  • Websites
  • Progressive Web Apps (PWAs)
  • Hybrid mobile apps (Cordova, Ionic, React Native with WebView)

Building a native mobile app?

For static images, see:

JavaScript button library​

You can dynamically generate your buttons 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 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 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.

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

Troubleshooting​

Button label is clipped or cut off​

If a parent container is too narrow to fit the button label, the text will be cut off. The minimum width needed varies depending on the language and variant chosen.

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.

If the label clips when a user has increased their browser's default font size (for example, to 200% — a common low-vision accessibility setting), this is a known limitation of the button library. The inner text uses text-wrap: nowrap, which prevents wrapping as the text grows, causing clipping regardless of available container width. We will be working on a fix.

Last updated on