> **Description:** Visual walkthrough of the online payment flow for PSPs using card passthrough with the ePayment API.

# How it works with online payments

How online payments work for PSPs using `CARD_PASSTHROUGH` with the ePayment API.

## Details

### 1. Customer selects their payment method

On the checkout page, the customer chooses to pay with Vipps or MobilePay.

Screenshot: Mobile merchant cart page showing product details and a Pay with Vipps or Pay with MobilePay button.

### 2. The PSP creates a payment request

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

* `paymentMethod.type` set to `CARD_PASSTHROUGH`
* [`cardPassthrough`](https://developer.vippsmobilepay.com/docs/APIs/psp-epayment-api/epayment-psp-api-guide.md#cardpassthrough) object with their server URL specified in the `cardCallbackUrl` field
* [Other required parameters](https://developer.vippsmobilepay.com/docs/APIs/psp-epayment-api/epayment-psp-api-guide.md#parameters)

Detailed example for payment request

**Example request** (PSP-specific fields are highlighted):

```bash {3,20-28}
curl -X POST https://apitest.vipps.no/epayment/v1/payments \
-H "Content-Type: application/json" \
-H "Psp-Id: YOUR-PSP-ID" \
-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" \
-d '{
  "amount": {
    "currency": "DKK",
    "value": 49900
  },
  "customer": {
    "phoneNumber": "4512345678"
  },
  "paymentMethod": {
    "type": "CARD_PASSTHROUGH"
  },
  "cardPassthrough": {
    "pspReference": "payment-ref-1234567",
    "cardCallbackUrl": "https://example.com/psp-callback",
    "allowedCardTypes": ["VISA_DEBIT", "VISA_CREDIT", "DANKORT", "MC_CREDIT", "MC_DEBIT"],
    "publicEncryptionKeyId": "3f1c2e90-7a4b-4c9d-8f21-6b3e2d7a91c4"
  },
  "reference": "acme-shop-123-order123abcd",
  "userFlow": "WEB_REDIRECT",
  "returnUrl": "https://example.com/redirect?orderId=15122022",
  "paymentDescription": "Danish sweater"
}'
```

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

If the payment was started on a mobile device, the Vipps  or MobilePay  app opens automatically.

If the payment was started on a desktop device, the [landing page](https://developer.vippsmobilepay.com/docs/knowledge-base/landing-page.md) opens. The customer enters their phone number and the payment request is sent to the app on their phone.

Screenshot: Vipps MobilePay landing page with phone number entry on the left and a waiting screen on the right.

### 4. Customer selects a card and confirms

The customer selects a card stored in their Vipps  or MobilePay  app and confirms the payment.

Screenshot: Vipps or MobilePay app payment screen showing the merchant name, order description, selected payment card, and a Pay button.

### 5. Vipps MobilePay sends the card token to the PSP

When the user confirms the payment in the Vipps MobilePay app and selects their card, Vipps MobilePay sends a card token to the PSP's server, specified as `cardCallbackUrl` in the create payment request.

See [Card callback](https://developer.vippsmobilepay.com/docs/APIs/psp-epayment-api/epayment-psp-api-guide.md#card-callback) for the request format, HMAC authentication, and expected response.

Vipps MobilePay posts the card token (and optionally an encrypted PAN) to the PSP's `cardCallbackUrl`. The PSP must respond within 20 seconds. See [Card callback](https://developer.vippsmobilepay.com/docs/APIs/psp-epayment-api/epayment-psp-api-guide.md#card-callback).

### 6. The PSP processes the payment

The PSP processes the payment through its own acquiring infrastructure using the card token.

### 7. The PSP updates the payment status

The PSP captures, refunds, or cancels the payment via the ePayment API, keeping the Vipps MobilePay app status in sync. The customer is redirected to the merchant's `returnUrl` and sees the order confirmation.

## More information

For technical details, see the [ePayment PSP API guide](https://developer.vippsmobilepay.com/docs/APIs/psp-epayment-api/epayment-psp-api-guide.md).

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