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.

Vipps

MobilePay

2. The merchant creates a payment request

When they select to pay with Vipps/MobilePay, create a payment request with: POST:/epayment/v1/payments.

Detailed example for payment request

For example:

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 will open. There, the customer enters their phone number and clicks Next to send the payment request to the app on their phone.

Vipps

MobilePay

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.

Vipps

MobilePay

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.

Alternative flow: Pay with card

See How it works with freestanding cards.

Next steps

See Recommended flows: Online payments for an example of this flow with detailed code examples.

See the ePayment API quick start guide to start experimenting with the API.