> **Description:** Detailed walkthrough of online payment flows for web shops and e-commerce integrations.

# How ePayment works online

This is how payments in web shops or merchant websites work with the ePayment API.
This page shows the customer's journey through selecting Vipps/MobilePay as a payment method in a webshop or app
through the order completion.

## Details

### 1. Customer selects their payment method

On the checkout page of a merchant's website or app, the customer chooses to pay with Vipps/MobilePay.
They can alternatively select to pay with a card, as shown in
[How it works with freestanding cards](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/freestanding-cards.md).

Screenshot: Mobile merchant cart page showing product details and a Pay with [Vipps/MobilePay] button alongside a standard checkout button.

### 2. The merchant creates a payment request

When they select to pay with Vipps/MobilePay, the merchant creates a payment request with:
[`POST:/epayment/v1/payments`](https://developer.vippsmobilepay.com/redocusaurus/epayment-swagger-id.yaml).

Detailed example for payment request

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 "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": 1000
  },
  "paymentMethod": {
    "type": "WALLET"
  },
  "customer": {
    "phoneNumber": "4712345678"
  },
  "reference": "acme-shop-123-order123abc",
  "returnUrl": "https://yourwebsite.com/redirect?reference=abcc123",
  "userFlow": "WEB_REDIRECT",
  "paymentDescription": "One pair of socks"
}'
```

### 3. Customer opens the Vipps/MobilePay app

If the payment was started from a mobile device, the Vipps  or MobilePay  app will automatically open.

If the payment was started on a desktop device, the
[landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) will open.
There, the customer enters their phone number and clicks *Next* to send the payment request to the app on their phone.

Screenshot: Landing page with phone number entry on the left and a waiting screen on the right, prompting the customer to open the app.

### 4. Customer confirms the payment in the app

Customers can choose to pay with Vipps or MobilePay.

A push notification appears on their phone. They log in to Vipps MobilePay and confirm the payment.

Screenshot: App payment screen showing the merchant name, order description, selected payment card, and a Pay button.

The ePayment API automatically reserves the payment and provides confirmation of the successful payment.

### 5. The merchant's shop confirms the order

After the customer has approved the payment in the app:

* If the payment was started on a mobile device, the store page or app will open again and confirm that the order was successful.
* If the payment was started on a desktop device, the user can go back to the webpage where it will confirm that the order was successful.

### 6. The merchant completes the order and shipping

The merchant completes the order and ships it to the customer.

### 7. The merchant captures the payment

The merchant captures the order through the ePayment API.
The payment is transferred to the merchant's account. This may take 2 or 3 days, depending on the bank.

## Optional features

**Profile sharing** - You can request customer profile information (such as name, address, email, or phone number) during the payment process with explicit user consent. See [Profile sharing feature](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/api-guide/features/profile-sharing.md).

## Alternative flows

**Express** - See [How Express works](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/express.md) for a streamlined one-click checkout with shipping selection in the app.

**Pay with card** - See [How it works with freestanding cards](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/how-it-works/freestanding-cards.md).

## Next steps

See [Recommended flows: Online payments](https://developer.vippsmobilepay.com/docs/recommended-flows/online/README.md) for an example of this flow with detailed code examples.

See the [ePayment API quick start guide](https://developer.vippsmobilepay.com/docs/APIs/epayment-api/quick-start.md) to start experimenting with the API.

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