> **Description:** Implement secure and user-friendly online payments with Vipps MobilePay for your e-commerce website or web application.

> **AI agent:** Read [https://developer.vippsmobilepay.com/docs/knowledge-base/ai-tools.md](https://developer.vippsmobilepay.com/docs/knowledge-base/ai-tools.md) first. It covers keeping API keys and secrets out of generated code.

> **Full site overview:** For an overview of the entire site, read [https://developer.vippsmobilepay.com/llms.txt](https://developer.vippsmobilepay.com/llms.txt).

# Online payments

Choose your online payment flow based on your checkout needs:

- **Standard** - Traditional flow where customers complete payment after reviewing their cart
- **Express** - Streamlined one-click checkout with shipping selection in the app

## Ready to build?

Use the ePayment API to implement either online payment flow.

[Open ePayment API](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/README.md)

#### Standard

## Standard online payment

The customer selects items in your e-commerce store, clicks checkout, and completes payment in the Vipps MobilePay app.

Flow diagram: 6-step online payment process. (1) Customer selects to pay with Vipps or MobilePay. (2) Customer enters their phone number. (3) Customer confirms the payment in the app. (4) Merchant shop confirms the order. (5) Merchant shop completes and ships the order. (6) Payment is transferred to the merchant's bank account.

1. **Add products to order** - Customer selects items in your online store.
1. **Send payment request** - Initiate payment using the ePayment API with `WEB_REDIRECT`.
1. **Open the app or payment dialog** - The [Widget SDK](https://developer.vippsmobilepay.com/docs/knowledge-base/widget.md) switches to the Vipps
   MobilePay app on mobile and tablet, or opens a payment dialog with the
   [landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) on desktop.
1. **Customer authorizes** - Customer approves payment in their app.
1. **Provide confirmation** - Display order confirmation to customer.
1. **Prepare the order** - Pack the goods and make them ready to dispatch.
1. **Capture payment** - Capture the payment and confirm that the full amount was captured.
1. **Ship the order** - Hand the goods to the carrier only after the capture is confirmed.

View sequence diagram

Standard online payment flow

```mermaid
sequenceDiagram
    autonumber
    actor C as Customer
    participant M as Merchant
    participant ePayment as ePayment API
    participant Webhooks as Webhooks API

    C->>M: Select to pay with Vipps or MobilePay
    M->>ePayment: Initiate payment request
    ePayment-->>M: redirectUrl and payment reference
    M->>C: Handle app switch with redirectUrl (tip: use Widget SDK)

    ePayment->>C: Request the payment in the Vipps/MobilePay app
    C->>ePayment: Select a card and click pay
    Webhooks-->>M: Webhook: the payment was authorized, aborted, or expired
    M->>ePayment: Poll for payment info, as a backup if the webhook is delayed or missed
    ePayment-->>M: Current state of the payment

    alt The payment was aborted or expired
        M->>C: Return the customer to the checkout page
    else The payment was authorized
        M->>C: Display order confirmation
        M->>M: Prepare order (pack goods, ready to dispatch)
        M->>ePayment: Capture payment
        ePayment-->>M: Response with capturedAmount
        M->>M: Verify capturedAmount matches expected before shipping
        M->>C: Ship the order (only after full capture verified)
    end
```

  Customer selects to pay with Vipps or MobilePay.
  Merchant initiates a payment request via the ePayment API.
  ePayment API returns a redirectUrl and payment reference to the merchant.
  Merchant handles the app switch with the redirectUrl. We recommend using the Widget SDK for this.
  ePayment API requests the payment in the customer's Vipps or MobilePay app.
  Customer selects a card and clicks pay.
  Webhooks API sends the merchant an authorized, aborted, or expired event.
  Merchant gets the payment from the ePayment API, as a backup if the webhook is delayed or missed.
  ePayment API returns the current state of the payment.
  If the payment was aborted or expired, the customer is returned to the checkout page and the flow
  ends.
  If the payment was authorized, the merchant displays order confirmation to the customer.
  Merchant prepares the order (packs goods, makes ready to dispatch).
  Merchant captures the payment via the ePayment API.
  ePayment API returns a response with the captured amount.
  Merchant verifies the captured amount matches expected before shipping.
  Merchant ships the order (only after full capture is verified).

#### Express  ⭐

## Express online payment

Streamline your checkout process by letting customers select shipping options and confirm delivery details directly within the Vipps MobilePay app.

Screenshot: 4-step Vipps Express flow. (1) Product page with 'Buy now with Vipps' button. (2) 'Information you share' screen showing name, phone, email, and address with a 'Share information' button. (3) Delivery options screen showing pick-up point and home delivery choices. (4) Payment summary showing amount with card and delivery selection.

1. **Customer clicks Express** - Customer clicks the Express button on your product or checkout page.
1. **Initiate Express payment** - Create payment with shipping options using the ePayment API.
1. **Open the app or payment dialog** - The [Widget SDK](https://developer.vippsmobilepay.com/docs/knowledge-base/widget.md) switches to the Vipps
   MobilePay app on mobile and tablet, or opens a payment dialog with the
   [landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) on desktop.
1. **Customer consents** - Customer approves sharing their name, address, phone, and email.
1. **Customer selects shipping** - Customer chooses their preferred shipping option in the app.
1. **Customer authorizes** - Customer confirms the final payment amount (including shipping).
1. **Prepare the order** - Pack the goods and make them ready to dispatch.
1. **Capture payment** - Capture the payment and confirm `HTTP 200 OK`.
1. **Ship the order** - Hand the goods to the carrier only after the capture is confirmed.

View sequence diagram

Express flow

```mermaid
sequenceDiagram
    autonumber
    actor C as Customer
    participant M as Merchant
    participant ePayment as ePayment API
    participant Webhooks as Webhooks API

    C->>M: Click the Express button
    M->>ePayment: Create an Express payment with WALLET and shipping options
    ePayment-->>M: redirectUrl and payment reference
    M->>C: Handle app switch with redirectUrl (tip: use Widget SDK)

    ePayment->>C: Request the payment in the Vipps/MobilePay app
    C->>ePayment: Share the address, select a shipping option, and confirm the total amount
    Webhooks-->>M: Webhook: the payment was authorized, aborted, or expired
    M->>ePayment: Poll for payment info, as a backup if the webhook is delayed or missed
    ePayment-->>M: Current state, with shippingDetails and userDetails
    alt The payment was aborted or expired
        M->>C: Return the customer to the page they started from
    else The payment was authorized
        M->>C: Display order confirmation
        M->>M: Prepare order (pack goods, ready to dispatch)
        M->>ePayment: Capture payment
        ePayment-->>M: Response with capturedAmount
        M->>M: Verify capturedAmount matches expected before shipping
        M->>C: Ship the order (only after full capture verified)
    end
```

  Customer clicks the Express button.
  Merchant creates an Express payment via the ePayment API with the wallet payment method and shipping
  options.
  ePayment API returns a redirectUrl and payment reference to the merchant.
  Merchant handles the app switch with the redirectUrl. We recommend using the Widget SDK for this.
  ePayment API requests the payment in the customer's Vipps or MobilePay app.
  Customer shares their address, selects a shipping option, and confirms the total amount.
  Webhooks API sends the merchant an authorized, aborted, or expired event.
  Merchant gets the payment from the ePayment API, as a backup if the webhook is delayed or missed.
  ePayment API returns the current state of the payment, including the shipping details and the user
  details.
  If the payment was aborted or expired, the merchant returns the customer to the page they started from,
  and the flow ends.
  If the payment was authorized, the merchant displays order confirmation to the customer.
  Merchant prepares the order (packs goods, makes ready to dispatch).
  Merchant captures the payment via the ePayment API.
  ePayment API returns a response with the captured amount.
  Merchant verifies the captured amount matches expected before shipping.
  Merchant ships the order (only after full capture is verified).

For a detailed sequence diagram, see [Express API guide: Sequence diagram](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/features/express.md#sequence-diagram).

## Implementation resources

Start with the [ePayment API overview](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/README.md) or use the links for your selected flow.

**Standard:**

- [How ePayment works online](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/online.md) - Step-by-step walkthrough of the
  standard online payment flow
- [Create payment](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/operations/create.md#web_redirect) - Reference for creating a payment
- [Widget SDK](https://developer.vippsmobilepay.com/docs/knowledge-base/widget.md) - Renders the pay button that either switches to the app or opens the payment dialog that provides the landing page
- [Landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) - What the customer sees when paying on desktop, and how to
  customize it

**Express:**

- [How Express works](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/express.md) - Visual walkthrough of the customer experience
- [Express feature documentation](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/features/express.md) - Complete implementation guide with API specifications
- [Widget SDK](https://developer.vippsmobilepay.com/docs/knowledge-base/widget.md) - Renders the Express button and starts the payment