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

# 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 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. **Customer authorizes** - Customer approves payment in their app (via app-switch or landing page).
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

    M->>ePayment: Initiate payment request
    ePayment->>C: Request payment and add order details
    C->>C: Customer clicks pay
    Webhooks-->>M: Webhook with status of payment authorization
    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)
```

  Merchant initiates a payment request via the ePayment API.
  ePayment API requests payment from the customer and adds order details.
  Customer clicks pay.
  Webhooks API sends the merchant a webhook with the payment authorization status.
  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 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. **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 User
    participant Merchant as Merchant backend
    participant Vipps as ePayment

    %% --- Payment initiation ---
User->> Merchant: User click Express button
    Merchant->>Vipps: Create Express payment (POST /epayment/v1/payments)
    Note over Merchant,Vipps: amount=8000 NOK, paymentMethod=WALLET,<br />profile.scope="name address email phoneNumber",<br />shipping.fixedOptions or shipping.dynamicOptions,<br />userFlow=WEB_REDIRECT, returnUrl

    Vipps-->>Merchant: redirectUrl and payment reference
    Merchant->>User: Redirect user to Vipps/MobilePay app (redirectUrl)

    %% --- User consent ---

    Vipps->>User: Ask to share name, address, phone and email with merchant
    Note right of User: User does not yet see<br />the total amount including shipping
    User->>Vipps: Consents to share profile information

    %% --- Dynamic shipping (optional) ---

    opt Dynamic shipping (shipping.dynamicOptions)
        Vipps->>Merchant: Merchant dynamic shipping callback<br />(POST callbackUrl with reference and address)
        Merchant->>Merchant: Calculate shipping methods and costs
        Merchant-->>Vipps: Return shipping groups (shipping options)
    end

    %% --- Shipping selection and authorization ---

    Vipps->>User: Show available shipping methods
    User->>Vipps: Selects shipping option (e.g. 400 NOK)

    Vipps->>Vipps: Update payment amount (8000 + 400 = 8400 NOK)
    Vipps->>User: Ask user to confirm total amount 8400 NOK
    Note right of User: User can now see<br />the full amount
    User->>Vipps: Confirms payment
    Vipps->>Vipps: Reserve 8400 NOK on user card<br />(payment state = AUTHORIZED)

    %% --- Merchant notification and fulfillment ---

    Vipps-->>Merchant: Payment confirmed, 8400 NOK reserved<br />(webhook or GET /epayment/v1/payments/{reference})
    Note left of Merchant: Includes userDetails and shippingDetails<br />(address, shipping cost, option, etc.)
    Merchant->>Merchant: Package product (ready to dispatch)

    %% --- Capture before shipping ---

    Merchant->>Vipps: Capture 8400 NOK
    Vipps-->>Merchant: Response with capturedAmount
    Note left of Merchant: Verify capturedAmount = 8400 NOK<br />before dispatching goods

    Merchant->>Merchant: Hand over to carrier

    %% --- Order info ---

    Merchant->>Vipps: Add order info / tracking link<br />(Order Management API)
    Vipps->>User: Order confirmation and tracking details
    Note right of User: User can view order and tracking<br />in Vipps/MobilePay
```

  User clicks the Express button on the merchant site.
  Merchant creates an Express payment with ePayment for 8000 NOK, specifying payment method WALLET, profile scope for name/address/email/phone, shipping options, user flow WEB_REDIRECT, and a returnUrl.
  ePayment returns a redirectUrl and payment reference to the merchant.
  Merchant redirects the user to the Vipps or MobilePay app via the redirectUrl.
  ePayment asks the user to consent to sharing their name, address, phone, and email. The user does not yet see the total amount including shipping.
  User consents to sharing their profile information.
  If dynamic shipping is configured: ePayment sends the user's address to the merchant, the merchant calculates available shipping options and returns them to ePayment.
  ePayment shows available shipping methods to the user.
  User selects a shipping option (for example, 400 NOK).
  ePayment updates the total to 8400 NOK and asks the user to confirm. The user can now see the full amount.
  User confirms the payment. ePayment reserves 8400 NOK (payment becomes AUTHORIZED).
  ePayment notifies the merchant that payment is confirmed and 8400 NOK is reserved, including user and shipping details.
  Merchant packages the product and hands it over to the carrier.
  Merchant captures 8400 NOK via ePayment and verifies the captured amount before dispatching.
  Merchant adds order info and/or a tracking link via the Order Management API. ePayment sends order confirmation and tracking details to the user.

## 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)
- [Create payment](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/operations/create.md#web_redirect)
- [Landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md)

**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

> **Full site overview:** For every page in this documentation, read [https://developer.vippsmobilepay.com/llms.txt](https://developer.vippsmobilepay.com/llms.txt).