> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vipps via Checkout.com

> Let customers pay using Vipps via Checkout.com in Norway and Sweden.

export const paymentMethodType_2 = "CHECKOUT_VIPPS"

export const displayName_2 = "Vipps"

export const paymentMethodType_1 = "CHECKOUT_VIPPS"

export const displayName_1 = "Vipps"

export const paymentMethodType_0 = "CHECKOUT_VIPPS"

export const displayName_0 = "Vipps"

Vipps via Checkout.com is a Norwegian mobile wallet (part of the Vipps MobilePay brand) available to consumers in Norway and Sweden. NOK and EUR are supported; merchants must be registered in Norway. Auto-capture is not supported — manual capture is required.

| One off payment | Refunds | Recurring | Cancel |
| - | - | - | - |
| ✓ | ✓ | x | x |

<Note>
  Auto-capture is not supported for Vipps via Checkout.com. You must manually trigger capture after authorization. Merchants must be registered in Norway. Contact your Checkout.com account manager to enable this payment method.
</Note>

## Get started with Vipps via Checkout.com

### Before you begin

If this is your first payment method, follow the [Get started guide](/docs/get-started/overview) to begin processing payments with Primer.

### Configure in the Dashboard

1. **Add Checkout.com to your Dashboard**<br />
   Go to [Integrations](https://dashboard.primer.io/integrations), click **New Integration**, and search for Checkout.com. Enter your Checkout.com credentials.

2. **Activate on the Checkout**<br />
   Go to [Checkout](https://dashboard.primer.io/checkout) and activate Vipps.

3. **Configure a Workflow**<br />
   Ensure a Workflow with an **Authorization** action is set up to process APMs. Add a **Capture** step — Vipps does not auto-capture.

### Prepare the client session

Pass the following fields in addition to the standard `orderId`, `currencyCode`, `amount`, and `customer` fields.

| Parameter | Required | Description |
| - | - | - |
| `customer.mobileNumber` | Recommended | Customer's mobile number in E.164 format. Used to identify the Vipps account and prefill the payment screen. |

## Prepare the SDK for payments

<Tabs>
  <Tab title="Web">
    <Info>
      Use the payment method type <code>{paymentMethodType_0}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    <Tabs>
      <Tab title="Primer Checkout (recommended)">
        Primer Checkout is our latest web SDK, built around declarative web components. Once {displayName_0} is enabled in your [Dashboard](https://dashboard.primer.io/checkout), the default `<primer-checkout>` layout renders it automatically alongside your other methods — no payment-method-specific markup is required.

        ```html theme={"dark"}
        <primer-checkout client-token="your-client-token"></primer-checkout>
        ```

        #### Custom layouts

        Only reach for [primer-payment-method](/docs/sdk/primer-checkout-web/components/primer-payment-method) if you're building a custom layout and need to place {displayName_0} at a specific position. The element only renders when the type is enabled in your Dashboard and returned by the server for this checkout.

        ```html theme={"dark"}
        <primer-checkout client-token="your-client-token">
          <primer-main slot="main">
            <div slot="payments">
              <primer-payment-method type="YOUR_PAYMENT_METHOD_TYPE"></primer-payment-method>
            </div>
          </primer-main>
        </primer-checkout>
        ```

        For dynamic rendering based on what the server returns, listen to [primer:methods-update](/docs/sdk/primer-checkout-web/events-reference) or use [primer-payment-method-container](/docs/sdk/primer-checkout-web/components/primer-payment-method-container) for declarative filtering.
      </Tab>

      <Tab title="Universal Checkout (legacy)">
        ##### Set up redirects

        If {displayName_0} can't be shown in a popup, Universal Checkout redirects the customer back to your site using the `returnUrl` passed in the `redirect` options. See [Handle redirects & deep links](/docs/sdk/web/v2.x.x/handle-redirects-and-deeplinks#set-up-redirects) for the full flow.

        ```typescript theme={"dark"}
        const options = {
          container: "#checkout-container",
          redirect: {
            returnUrl: "https://mystore.com/checkout",
          },
          onCheckoutComplete({ payment }) {
            console.log("Checkout complete.", payment);
          },
        };
        ```

        ##### Show Universal Checkout

        {displayName_0} is automatically presented when calling [Primer.showUniversalCheckout](/docs/sdk/web/v2.x.x/primer/methods/showUniversalCheckout).

        ```typescript theme={"dark"}
        import { Primer } from "@primer-io/checkout-web";

        try {
          await Primer.showUniversalCheckout(clientToken, options);
        } catch (e) {
          // handle error
        }
        ```

        Check the [customization guide](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout (legacy)">
        Create a `RedirectPaymentMethodManager` for {displayName_0} using [createPaymentMethodManager](/docs/sdk/web/v2.x.x/primer-headless-checkout/methods/createPaymentMethodManager#redirect), then call `start()` to begin the redirect flow.

        ```typescript theme={"dark"}
        const manager = await headless.createPaymentMethodManager("YOUR_PAYMENT_METHOD_TYPE");

        if (manager) {
          manager.addEventListener("click", () => {
            // Optional: run custom logic before the redirect flow starts.
          });

          await manager.start();
        }
        ```

        Refer to the full guide for [handling payment methods with redirect](/docs/checkout/headless/#step-4c-handle-payment-methods-with-redirect).
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="iOS">
    <Info>
      Use the payment method type <code>{paymentMethodType_1}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    #### Set up redirects

    Redirect-based payment methods present a webpage or open a third-party app for the customer to authorize the payment. To return to your app once the customer has authorized the payment, include the `urlScheme` parameter when configuring `PrimerPaymentMethodOptions`.

    ```swift theme={"dark"}
    let settings = PrimerSettings(
      // ...
      paymentMethodOptions: PrimerPaymentMethodOptions(
        urlScheme: "your-url-scheme://" // e.g. primer://, yourscheme://
      )
      // ...
    )
    ```

    When the customer is redirected back to your app, iOS calls `application(_:continue:restorationHandler:)`. Forward the call to the Primer SDK so the checkout can continue the flow.

    ```swift theme={"dark"}
    import PrimerSDK
    import UIKit

    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate {
      // ...
      func application(
        _ application: UIApplication,
        continue userActivity: NSUserActivity,
        restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
      ) -> Bool {
        return Primer.shared.application(
          application,
          continue: userActivity,
          restorationHandler: restorationHandler
        )
      }
    }
    ```

    #### Show the payment method

    <Tabs>
      <Tab title="Universal Checkout (drop-in)">
        {displayName_1} is automatically presented when calling [Primer.shared.showUniversalCheckout](/docs/sdk/ios/v2.x.x/primer/methods/showUniversalCheckout).

        ```swift theme={"dark"}
        class MyViewController: UIViewController {
          func startUniversalCheckout() {
            Primer.shared.showUniversalCheckout(clientToken: self.clientToken)
          }
        }
        ```

        Check the [customization guide](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout">
        {displayName_1} requires a [Native UI Manager](/docs/checkout/headless/#native-ui-manager) to be presented to the customer.

        ```swift theme={"dark"}
        // 👇 Create the payment method manager
        let nativeUIPaymentMethodManager = try PrimerHeadlessUniversalCheckout.NativeUIManager(
          paymentMethodType: "YOUR_PAYMENT_METHOD_TYPE"
        )

        // 👇 Show the payment method
        try nativeUIPaymentMethodManager.showPaymentMethod(intent: .checkout)
        ```

        See [NativeUIManager.init](/docs/sdk/ios/v2.x.x/primer-headless-checkout/native-ui-manager/init) for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the [Native UI Manager guide](/docs/checkout/headless/#native-ui-manager).
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Android">
    <Info>
      Use the payment method type <code>{paymentMethodType_2}</code> wherever the code below references `YOUR_PAYMENT_METHOD_TYPE`.
    </Info>

    <Tabs>
      <Tab title="Universal Checkout (drop-in)">
        {displayName_2} is automatically presented when calling [Primer.instance.showUniversalCheckout](/docs/sdk/android/v2.x.x/primer/methods/showUniversalCheckout).

        ```kotlin theme={"dark"}
        class CheckoutActivity : AppCompatActivity() {
          private fun setupObservers() {
            viewModel.clientToken.observe(this) { clientToken ->
              showUniversalCheckout(clientToken)
            }
          }

          private fun showUniversalCheckout(clientToken: String) {
            Primer.instance.showUniversalCheckout(this, clientToken)
          }
        }
        ```

        Check the [customization guide](/docs/checkout/drop-in/customization#styling-payment-method-button) to learn how to customize payment method buttons.
      </Tab>

      <Tab title="Headless Universal Checkout">
        {displayName_2} requires a [Native UI Manager](/docs/checkout/headless/#native-ui-manager) to be presented to the customer.

        ```kotlin theme={"dark"}
        // 👇 Create the payment method manager
        val nativeUiManager = PrimerHeadlessUniversalCheckoutNativeUiManager.newInstance("YOUR_PAYMENT_METHOD_TYPE")

        // 👇 Show the payment method
        nativeUiManager.showPaymentMethod(this, PrimerSessionIntent.CHECKOUT)
        ```

        See [NativeUiManager.newInstance](/docs/sdk/android/v2.x.x/primer-headless-checkout/native-ui-manager/newInstance) for the full API. As many redirect-based payment methods share this approach, we recommend centralizing the implementation — see the worked example in the [Native UI Manager guide](/docs/checkout/headless/#native-ui-manager).
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Go live

Use production Checkout.com credentials. Merchants must be registered in Norway. NOK and EUR are supported.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.