Vipps Component

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');

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