> **Description:** Take payments in your web shop or app, where the customer approves in the Vipps or MobilePay app. > **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 The standard payment flow. The customer checks out in your web shop or app and approves the payment in the Vipps or MobilePay app. **TIP** For a visual walkthrough of the customer's experience with online payments, see [How ePayment works online](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/online.md). Three-screen app-switch payment flow: (1) WebShop checkout with the app selected as payment method. (2) Payment app screen. (3) WebShop order confirmation page. ## Scenario In your user interface, offer Vipps and/or MobilePay as a payment option. When the user selects their preferred method, send the payment request to us. We'll then prompt the user in their Vipps or MobilePay app to complete the payment. The basic online flow is: 1. Customer selects to pay with Vipps or MobilePay 2. The merchant creates a payment request 3. The Vipps or MobilePay app will open with the request for payment. * If the customer is on a phone with the app installed, they get an automatic switch over to the Vipps/MobilePay app. * Otherwise, the [Vipps/MobilePay landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) will open and they enter their phone number. 4. Customer confirms the payment in the app 5. The merchant's shop confirms the order 6. The merchant completes the order and shipping 7. The merchant captures the payment In a physical store, you need the customer's phone number before creating the payment request. See [Personal QR](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/features/personal-qr.md) and [One-time payment QR](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/features/qr-payments.md) for the in-person alternatives. ## Authorization All ePayment API requests must include a valid Bearer token in the `Authorization` header. See [Authorization](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/concepts.md#authorization) for how to obtain one. ## Request Create the payment with [`POST:/epayment/v1/payments`](https://developer.vippsmobilepay.com/redocusaurus/epayment-swagger-id.yaml). Specify `"userFlow": "WEB_REDIRECT"` and a `returnUrl`. For example: ```bash curl -X POST https://apitest.vipps.no/epayment/v1/payments \ -H "Content-Type: application/json" \ -H "Authorization: Bearer YOUR-ACCESS-TOKEN" \ -H "Ocp-Apim-Subscription-Key: YOUR-SUBSCRIPTION-KEY" \ -H "Merchant-Serial-Number: YOUR-MSN" \ -H "Idempotency-Key: YOUR-IDEMPOTENCY-KEY" \ -H "Vipps-System-Name: acme" \ -H "Vipps-System-Version: 3.1.2" \ -H "Vipps-System-Plugin-Name: acme-webshop" \ -H "Vipps-System-Plugin-Version: 4.5.6" \ -d '{ "amount": { "currency": "NOK", "value": 49900 }, "paymentMethod": { "type": "WALLET" }, "reference": "acme-shop-123-order123abc", "returnUrl": "https://example.com/redirect?reference=acme-shop-123-order123abc", "userFlow": "WEB_REDIRECT", "paymentDescription": "One pair of socks" }' ``` `WEB_REDIRECT` handles the app switch for you, with the landing page as fallback when the app is not installed. The response contains a `redirectUrl`. Send the customer to that URL to start the payment. When the payment session ends, the customer is returned to your `returnUrl`. See [`userFlow`](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/operations/create.md#userflow) for the other options, such as `PUSH_MESSAGE`, which sends the request straight to a phone number you already have. To determine that the user has authorized the payment, get notifications via the [Webhooks API](https://developer.vippsmobilepay.com/docs/APIs/webhooks-api/api-guide.md) and/or poll for the status, according to the [polling guidelines](https://developer.vippsmobilepay.com/docs/knowledge-base/polling-guidelines.md). Once the order is ready to ship, [capture](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/operations/capture.md) the payment. ## 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). ## Related pages * [How ePayment works online](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/online.md) * [Recommended flows: Online payments](https://developer.vippsmobilepay.com/docs/recommended-flows/online/README.md) * [Create payment](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/operations/create.md)