Skip to main content

Checkout button

Make it super easy for customers to check out straight from a product page with Checkout Direct and our Buy now checkout button!

The button is provided in multiple variants and colors and can be tailored to your page.

To use the badge on your site, add the Vipps Checkout Button JavaScript library. The library should preferably be added between your page's <head>...</head> tags and only once per page:

<script async type="text/javascript" src=""></script>

If you don't have access to edit your website's code directly, you can place the JavaScript library just before the Checkout button.

Example button

You can find a demo and examples of all the variants on the checkout button demo page.

Checkout Button

<vipps-checkout-button variant="orange" branded="true"></vipps-checkout-button>


All attributes are optional.

variantThe color variant of the button. Supported values: orange, purple,
languageISO 639-1 alpha-2 language code. Supported values: en,
roundedThe button will have rounded corners (oval shape) when set to truefalse
stretchedWill fill the whole with of the parent container when set to truefalse
brandedBrand with the Vipps-logofalse


You can customize the placement and size of the Checkout button by applying your own CSS-style with the class or style attribute.

If the button is too small or too large to fit your content, you can override the font-size to scale it as follows:

<vipps-checkout-button variant="orange" variant="purple" style="font-size: 1.5rem;"></vipps-checkout-button>

This will scale the button to 1.5x the size of the root font size. You can also use px or em values to scale the button.

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

So, to center or fill the button, you must set display: block on the element to prevent it from being inline.

Use text-align with display:block to align the button. For example:

<vipps-checkout-button variant="stroked" style="display: block; text-align: center;"></vipps-checkout-button>


Read more about integrating with Checkout Direct in the Checkout API guide.

Example integration

<title>Merchant website</title>
<script async type="text/javascript" src=""></script>
<script async type="text/javascript" src=""></script>
<vipps-checkout-button id="checkout-button" variant="orange" branded="true"></vipps-checkout-button>
.addEventListener("click", function () {
// Relay an initiate session request to Vipps Checkout API through the merchant's backend
method: "POST",
.then((response) => response.json())
.then((data) => {
checkoutFrontendUrl: data.checkoutFrontendUrl,
language: "no",
token: data.token,
.catch((error) => {
// Handle at least these two types of errors here:
// 1. Fetch to create session endpoint failed
// 2. VippsCheckout SDK not loaded resulting in VippsCheckout not being defined

Help us improve our documentation

Did you find what you were looking for?