---
title: "Vipps React Native Component"
description: "Add Vipps to your Components integration."
url: "https://docs.adyen.com/payment-methods/vipps/react-native-component"
source_url: "https://docs.adyen.com/payment-methods/vipps/react-native-component.md"
canonical: "https://docs.adyen.com/payment-methods/vipps/react-native-component"
last_modified: "2026-05-08T17:09:18+02:00"
language: "en"
---

# Vipps React Native Component

Add Vipps to your Components integration.

You can add Vipps to your existing integration. The following instructions show only what you must add to your integration specifically for Vipps.

If an instruction on this page corresponds with a step in the main integration guide, it includes a link to that corresponding step of the main integration guide.

What you must add to your integration depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses:

## Sessions flow Component

### Not Available

React Native Components do not support Sessions flow.

## Advanced flow Component

### Before-You-Begin

## Requirements

| Requirement           | Description                                                                                                                                                                                                                          |   |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - |
| **Integration type**  | Make sure that you have an existing Advanced flow [React Native Components integration](/online-payments/build-your-integration/advanced-flow?platform=React%2BNative\&integration=Drop-in).                                         |   |
| **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/advanced-flow/?platform=React%2BNative\&integration=Components#handle-the-redirect). `action.type`: **redirect** |   |
| **Setup steps**       | Before you begin, [add Vipps in your Customer Area](/payment-methods/add-payment-methods).                                                                                                                                           |   |

### Add-Configuration

## Add additional configuration for Vipps

You do not need to add any configuration parameters for Vipps.

### Add-Parameters-Payments-Request

## Add additional parameters to your /payments request

When you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=React%2BNative\&integration=Components#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request:

| Parameter                                                                                                                                             | Required | Description                                                                                                                                                                          |
| ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [paymentMethod.telephoneNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-paymentMethod-VippsDetails-telephoneNumber) |          | Used to prefill the shopper's phone number on the Vipps-hosted page.                                                                                                                 |
| [shopperStatement](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-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. |
| [channel](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#request-channel)                                                    |          | Specify the relevant channel, for example **Web**, **iOS**, or **Android**.                                                                                                          |
| [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/paymentMethods#request-amount)                                                |          | The value of the payment, in [minor units](/development-resources/currency-codes/). For Vipps, the minimum amount allowed is **100**, which is 1.00 NOK.                             |

**Example payment request for Vipps**

```bash
curl https://checkout-test.adyen.com/v72/payments \
-H 'x-API-key: ADYEN_API_KEY' \
-H 'idempotency-key: YOUR_IDEMPOTENCY_KEY' \
-H 'content-type: application/json' \
-X POST
-d '{
  "amount":{
    "currency":"NOK",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "paymentMethod": {
      "type": "vipps",
      "telephoneNumber": "PHONE_NUMBER"
  },
  "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..",
  "merchantAccount":"ADYEN_MERCHANT_ACCOUNT",
  "shopperStatement": "Vipps shopper statement",
  "channel": "React-native"
}'
```

The response includes `action.type`: **redirect**.

**Example response with a redirect action**

```json
{
    "resultCode":"RedirectShopper",
    "action":{
        "paymentMethodType":"vipps",
        "method":"GET",
        "url":"https://checkoutshopper-test.adyen.com/checkoutshopper/checkoutPaymentRedirect?redirectData=...",
        "type":"redirect"
    }
}
```

## 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](https://ca-live.adyen.com/).

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](/development-resources/webhooks/webhook-types/#default-event-codes) 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.