Vipps Component

Add Vipps to your Web Components integration.

This page explains how to add Vipps to your existing Web Components integration.

Requirements

Select the server-side flow that your integration uses:

Import resources for v6

If you are using Web Components v6, import the Component that you need for Vipps:

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

API reference

Select which endpoint you are using:

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.