Button generator
If your application supports JavaScript integration, you can use our JavaScript button library to dynamically generate the button in your code.
For button resources, 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 button.
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
ormobilepay
). 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 thatfi
is not allowed withbrand="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.
Additional information​
For more information, see: