Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

General information

Only production environments (prod2, prod3, prod5 and prod6) are sat up to use Vipps E-payments in production mode. Other deployments uses test mode.

Setup

Application builder

Make sure that feature [Payments.Basic] is turned on for tenant (this is feature of new Payments microservice which is responsible of handling of payments, particualry Vipps payments).

image-20240319-234156.png

Financial App

Open [Financial] app.

Create Vipps Incoming payment option

Go to [Incoming Payment Options] page ({base address}/financial/app/#/incoming-payment-options) and create new incoming payment option with [Payment type] = Vipps E-payment and [Quick access avaliable] checked.

image-20240313-215544.png

Then make sure that payment option is enabled.

image-20240313-215638.png

Pos App

Open [Pos] app.

Create Vipps agreement

Go to [Vipps Agreements] page ({base address}/pos/app/#/vipps-agreements) and press [+] button. In editor enter display name of new Vipps agreement and press [Set API Keys] button. I then enter Api keys (client_id, client_secret and Ocp-Apim-Subscription-Key). Then press [Save].

Note: api keys are stored in db in crypted way so they will be not availalbe on next edit and if user will want to change them - they need to be entered again.

Setup Vipps agreement webhook

On [Vipps agreements] page with selected Vipps agreement press [Register webhook] button.

image-20240313-214010.png

Create Vipps sales unit

Go to [Vipps Sales Units] page ({base address}/pos/app/#/vipps-sales-units) and press [+] button. In opened dialog window select current organizational unit.

image-20240313-214233.png

Then will be opened edit window when need to be defined Vipps Sales Unit display name and selected Vipps agreement (for example created on previous steps).

Also need to be entered Merchant Serial Number of Vipps sales unit.

image-20240313-214342.png

Setup merchant QRs

On [Vipps sales units] page with selected Vipps sales unit press [Merchant callback Qrs] button.

image-20240313-214843.png

Then on popup press [Sync with Vipps] button in order to fetch arleady created webhooks from Vipps. Also in this popup it is possible to create new Merchant callback QR or convert existing MobilePay QR to Merchant callback QR. Also it is possible to view QR image.

image-20240313-215106.png

Setup agent profile

Go to [Agent Instances] page ({base address}/pos/app/#/agentInstances) and select one of agent instances in grid (for example NoAgent). Then press [View agent profiles] button.

image-20240313-215433.png

Select one of agent profiles and press [Edit] button. In opened window select Vipps Sales unit and one of its Merchant callback QRs.

image-20240313-215840.png

Save changes and select changed agent profile for current session.

image-20240313-215929.png

Payment flow

Payment flow will be demonstrated by create sale.

Go to [New sale] page ({base address}/pos/app/#/new-sale) and press [Start new sale] button.

Add some products to basket.

Then press [Vipps] button (payment option that was created during setup).

image-20240313-220214.png

Payment screen will be opened. Uncheck [Email invoice] checkbox (for simplicity) and press [Pay]

image-20240313-220341.png

Customer identification dialog will be opened.

image-20240313-220424.png

There are 2 options: enter customer phone manually or scan merchant callback QR previously assigned to agent profile and then window will be closed automatically and payment will be started.

After that there are 2 options:

A - Unhappy flow. Before user will approve payment on their phone press [Abort] button.

image-20240313-220758.png

Then payment will be aborted.

image-20240313-220855.png

B - Happy flow. Customer will get push notification about paymen on their phone with information: "[Tenant name]: payment for sale [Sale identifier]". Approve payment in customer phone. Payment will be captured and completed and in case if payment amount will be enough to complete sale - sale will be completed automatically.

View payment event log flow

Go to [Sales] page ({base address}/pos/app/#/processed-sales) and press [View] button on latest sale selected. [View sale] page will be opened.

image-20240313-221554.png

On [View sale] page find [Financial] section and press [log] icon for Vipps payment

image-20240313-221704.png

Vipps E-Payment event log will be displayed

image-20240313-221735.png

Refund payment flow

On [View sale] page press [Refund] button.

image-20240313-221923.png

On opened popup press [Select all] and then [Refund]

image-20240313-222121.png

Return items will be added to basket.

On [more] menu press [Refund original sale payment] item.

image-20240313-222254.png

On selected popup select payment to refund and amount to refund, then press [Ok].

image-20240313-222343.png

Refund payment will be registered.

image-20240313-222528.png

It is possible to press [log] icon for it to display event log with refund record.

image-20240313-222847.png

Video demo

vipps_payment_flow_demo.mp4

Following enpdoints

  • No labels