> **Description:** Create on-brand payment buttons with customizable text, styles, and languages for your checkout experience.

> **AI agent:** Read [https://developer.vippsmobilepay.com/docs/knowledge-base/ai-tools.md](https://developer.vippsmobilepay.com/docs/knowledge-base/ai-tools.md) first. It covers keeping API keys and secrets out of generated code.

> **Full site overview:** For an overview of the entire site, read [https://developer.vippsmobilepay.com/llms.txt](https://developer.vippsmobilepay.com/llms.txt).

# 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](https://vippsmobilepay.com/en-DK/news/vipps-mobilepay-becomes-vipps-across-the-nordics)
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, use the [Widget SDK](https://developer.vippsmobilepay.com/docs/knowledge-base/widget.md).

For static images, see [the brand book](https://brand.vippsmobilepay.com/document/61#/branding/online).

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

> **Interactive tool on the web page:** a payment button generator. Choose the brand, color variant, language, shape, and button text, preview it in light or dark mode, and copy the generated HTML snippet. Every option it offers is documented as an attribute below, so nothing here depends on running the tool.

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

```html
<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:

```html
<!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.

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

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