Vipps Component

Add Vipps to your Web Components integration.

On this page, you can find additional configuration for adding Vipps to your Components integration.

Before you begin

This page assumes you have already:

For Web Components v6, import the Component that you need for Vipps:

import { AdyenCheckout, Vipps } from '@adyen/adyen-web'

API reference

Select which endpoint you're integrating:

Component configuration

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="vipps-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

Your instance of AdyenCheckout.

const vipps = new Vipps(checkout).mount('#vipps-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const vippsComponent = checkout.create('vipps').mount('#vipps-container');

Test and go live

To test your integration, install a Vipps test app, and use the following credentials:

Phone number	National Identity Number (NIN)	PIN
94987289	09104226830	1236
99460821	23035007725	1236

The Vipps test app is limited to a Visa test card. You can test different scenarios by adding additionalData.RequestedTestAcquirerResponseCode to your /payments request, as described in Using additional data.

Check the status of Vipps test payments in your Customer Area > Transactions > Payments.

Go live

Before you can accept live Vipps payments, you need to submit a request for Vipps in your live Customer Area.