Static QR directing to the merchant site for product selection

This flow uses a static QR code that is posted on the vending machine. The QR directs the user to the merchant's landing page which provides a user interface for selecting products and paying.

When to use

This QR code can be used when you don't have a screen, and it's not possible to present the dynamic one-time payment QR and when you want to offer product selection through your user interface.

Prerequisites

QR code on the vending machine

Generate a merchant redirect QR code linking to a webshop connected to the specific vending machine.

How to create a QR code

The QR code contains a Id that connects it to the vending machine where it is located.

Here is an example HTTP POST:

POST:/qr/v1/merchant-redirect

{
  "id": "vending_machine_122_qr",
  "redirectUrl": "https://example.com/myvendingmachines"
}

Details

Step 1: The customer scans the code

When the customer scans the QR code, they are taken to the merchant's landing page, where products can select. The price is presented, and the user pays for the product in their Vipps or MobilePay app.

Step 2: Initiate a payment request

Initiate a payment request based on the selected products.

Per regulations, specify "customerInteraction": "CUSTOMER_PRESENT". Specify "userFlow": "WEB_REDIRECT" to redirect the user to the app.

Detailed example of payment request

Since the customer has scanned from their phone, you don't need their phone number. This payment command can do an app-switch and open their Vipps or MobilePay app with the payment request. Specify "userFlow": "WEB_REDIRECT" to redirect the user to the app.

You may include order details at this time.

Specify "customerInteraction": "CUSTOMER_PRESENT".

Here is an example HTTP POST:

POST:/epayment/v1/payments

With body:

{
  "amount": {
    "value": 1100,
    "currency": "NOK"
  },
  "paymentMethod": {
    "type": "WALLET"
  },
  "customerInteraction": "CUSTOMER_PRESENT",
  "receipt":{
    "orderLines": [
      {
        "name": "Juice",
        "id": "21231211",
        "totalAmount": 1100,
        "totalAmountExcludingTax": 880,
        "totalTaxAmount": 220,
        "taxRate": 2500,
      },
    ],
    "bottomLine": {
      "currency": "NOK",
      "posId": "vending_machine_12345",
      "receiptNumber": "0527013501"
    },
  },
  "reference": "WBN02023022313521298012343384",
  "userFlow": "WEB_REDIRECT",
  "returnUrl": "http://example.com/redirect?reference=2486791679658155992",
  "paymentDescription": "Vending machine purchase"
}

Step 3: The customer authorizes the payment

The payment request will appear in the customer's Vipps or MobilePay app, where they can select to pay or cancel.

To determine that the user has authorized the payment, you can get notifications via the Webhooks API and/or poll for the status.

Once the payment is approved, update the status in your system.

Step 4: Capture the payment

Capture the payment and confirm that it was successful.

Sequence diagram

Integration sequence for static QR directing to the merchant site for product selection and payment.

Static QR directing to the merchant site for product selection and payment

Next steps

Explore the other flows in this section. When you are ready to learn about the technical details, review some related pages:

• Merchant redirect QR code
• ePayment API guide