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. Initiate a payment
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 a receipt 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.