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

Vipps cannot be tested in the test environment. You must make penny test (low-amount) payments in the live environment.

Request for Vipps in the live environment

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

After Vipps is added to your live Customer Area, do the following for each test payment:

  1. Make a Vipps payment for a low amount.
  2. Get the AUTHORISATION webhook on your server. It includes the status of the payment.
  3. In your live Customer Area, go to Transactions > Payments to see the status of the payment.

See also