Payment-method icon

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:

Requirement Description
Integration type Make sure that you have built a Sessions flow Web Components integration.
Setup steps Before you begin, add Vipps in your Customer Area.

Import resources for v6

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

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

API reference

Select which endpoint you are using:

Parameter name Required Description
shopperStatement The description of this payment shown in the Vipps app. If you do not specify a shopperStatement, we'll use the value that you provided as the reference to populate this field.

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:

Copy code
 <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.
Copy code
const vipps = new Vipps(checkout).mount('#vipps-container');

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

Copy code
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.

See also