# Changes for page Vipps direct API

Last modified by Asbjørn Ulsberg on 2019/07/11 15:00

#### Export

#### Office Formats

Export as PDF Export as ODT Export as RTF

#### Other Formats

Select the pages to export:

select all / none

Export as HTML
From empty
To version 57.1
edited by Helge Dahl
on 2017/11/30 08:13
Change comment: There is no comment for this version

## Summary

- Page properties (5 modified, 0 added, 0 removed)
- Attachments (0 modified, 2 added, 0 removed)
  - Vipps_flow_directAPI.png
  - vipps_sjgrnn.png

## Details

Page properties
  Title

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +Scenario 2: Vipps direct API

  Parent

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +external:ecommerce.eCommerce Platform.Implementing VIPPS.Vipps payment scenarios.WebHome

  Author

    ... | ... | @@ -1,1 +1,1 @@
    1 |  | -XWiki.XWikiGuest
    | 1 | +xwiki:XWiki.hde

  Default language

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +en

  Content

    ... | ... | @@ -1,0 +1,275 @@
    | 1 | +[[image:vipps_sjgrnn.png||width="150"]]
    | 2 | +
    | 3 | +{{toc depth="3"/}}
    | 4 | +
    | 5 | += High level =
    | 6 | +
    | 7 | +Vipps is a payment method supported by the major norwegian banks, where PayEx will receive a mobile number (MSISDN) and perform a payment that the consumer must confirm in the Vipps mobile app.
    | 8 | +
    | 9 | +* Collect all purchase information and make a POST towards PayEx.
    | 10 | +* Collect the consumers mobile number, and make a POST towards PayEx.
    | 11 | +* PayEx will handle the dialogue with Vipps and the consumer will have to confirm the purchase in the Vipps app.
    | 12 | +* Finally you will receive a payment callback when the Vipps dialogue is completed, and you will have to make a GET request to check the payment status.
    | 13 | +* The flow is explained in the picture below:
    | 14 | +
    | 15 | +[[image:Vipps_flow_directAPI.png||width="850"]]
    | 16 | +
    | 17 | += API-requests =
    | 18 | +
    | 19 | +The API-requests are displayed in the sequence diagram below.
    | 20 | +
    | 21 | +**IMPORTANT:** //Please make sure to use the complete URI's that are returned in the JSON object from the specific request you make. Please do not parse any content and include in your local stored URI's - this will possibly break future compability when PayEx makes future updates.//
    | 22 | +
    | 23 | +The general rest-based API model are described in the[[ API Reference & Technical Information>>doc:ecommerce.eCommerce Platform.API Reference.WebHome]].
    | 24 | +
    | 25 | += Sequence diagram =
    | 26 | +
    | 27 | +The sequence diagram below shows the two requests you have to send to PayEx to make a purchase. The links will take you directly to the API description for the specific request.
    | 28 | +
    | 29 | +{{plantuml}}
    | 30 | +@startuml
    | 31 | +skinparam sequence{
    | 32 | + ArrowColor #2DA944
    | 33 | +
    | 34 | + ActorFontColor #333333
    | 35 | + ActorFontStyle bold
    | 36 | + ActorFontSize 15
    | 37 | + ActorBackgroundColor #fefefe
    | 38 | + ActorBorderColor #2DA944
    | 39 | +
    | 40 | + LifeLineBorderColor #999999
    | 41 | + LifeLineBackgroundColor #dddddd
    | 42 | +
    | 43 | + ParticipantBorderColor #2DA944
    | 44 | + ParticipantBackgroundColor #ffffff
    | 45 | + ParticipantFontColor #333333
    | 46 | + ParticipantFontStyle bold
    | 47 | +}
    | 48 | +skinparam Roundcorner 10
    | 49 | +skinparam Shadowing false
    | 50 | +
    | 51 | +skinparam ActivityBorderColor #123123
    | 52 | +
    | 53 | +skinparam NoteBackgroundColor white
    | 54 | +skinparam NoteBorderColor #999999
    | 55 | +skinparam NoteFontColor #333333
    | 56 | +
    | 57 | +box "Consumer"
    | 58 | + Actor Vipps_App
    | 59 | + Actor Browser
    | 60 | +end box
    | 61 | +
    | 62 | +Participant Merchant
    | 63 | +Participant PAYEX.FRONTEND
    | 64 | +Participant PAYEX.BACKEND
    | 65 | +participant Vipps.API
    | 66 | +'participant TSP
    | 67 | +
    | 68 | +'------------------------------------------------------------------------------------------------------------------------------------------------------------
    | 69 | +Browser -> Merchant: start purchase (pay with VIPPS)
    | 70 | +Activate Merchant
    | 71 | +
    | 72 | +Merchant -> PAYEX.FRONTEND: POST [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce%20Platform/API%20Reference/POST%20psp%20vipps%20payments VIPPS payments]]
    | 73 | +note left: First API request
    | 74 | +Activate PAYEX.FRONTEND
    | 75 | +PAYEX.FRONTEND --> Merchant: payment resource
    | 76 | +Deactivate PAYEX.FRONTEND
    | 77 | +Merchant --> Browser: Collect mobile number in UI
    | 78 | +Browser -> Browser: Enter mobile number
    | 79 | +Browser -> Merchant: Mobile number
    | 80 | +Merchant -> PAYEX.FRONTEND: POST [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce%20Platform/API%20Reference/POST%20psp%20vipps%20authorizations VIPPS authorizations]]
    | 81 | +note left: Second API request
    | 82 | +Activate PAYEX.FRONTEND
    | 83 | +PAYEX.FRONTEND -> Vipps.API: Initialize Vipps payment
    | 84 | +Activate Vipps.API
    | 85 | +Vipps.API --> PAYEX.FRONTEND: HTTP response
    | 86 | +'Deactivate PAYEX.FRONTEND
    | 87 | +PAYEX.FRONTEND --> Merchant: Authorization response (State=AwaitingActivity)
    | 88 | +Merchant --> Browser: Response (check your phone)
    | 89 | +Deactivate Merchant
    | 90 | +note left: Merchant should wait for [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce%20Platform/API%20Reference/Vipps%20Callback%20API%20Description Payment callback]] before proceeding
    | 91 | +
    | 92 | +...
    | 93 | +Vipps.API -> Vipps_App: Confirm Payment UI
    | 94 | +Vipps_App -> Vipps_App: Confirmation Dialogue
    | 95 | +Vipps_App --> Vipps.API: Confirmation
    | 96 | +Vipps.API -> PAYEX.BACKEND: make payment
    | 97 | +activate PAYEX.BACKEND
    | 98 | +PAYEX.BACKEND -> PAYEX.BACKEND: execute payment
    | 99 | +PAYEX.BACKEND --> Vipps.API: response
    | 100 | +Deactivate Vipps.API
    | 101 | +PAYEX.BACKEND -/ PAYEX.FRONTEND: payment result
    | 102 | +deactivate PAYEX.BACKEND
    | 103 | +'Activate PAYEX.FRONTEND
    | 104 | +PAYEX.FRONTEND -/ Merchant: Payment Callback
    | 105 | +Activate Merchant
    | 106 | +Merchant -> PAYEX.FRONTEND: GET [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce%20Platform/API%20Reference/GET%20psp%20vipps%20payments VIPPS payments]]
    | 107 | +note left: Third API request
    | 108 | +PAYEX.FRONTEND-->Merchant: Payment resource
    | 109 | +'Deactivate PAYEX.FRONTEND
    | 110 | +Merchant-->Browser: Display purchase result
    | 111 | +Deactivate Merchant
    | 112 | +
    | 113 | +@enduml
    | 114 | +{{/plantuml}}
    | 115 | +
    | 116 | +== Options after posting a payment ==
    | 117 | +
    | 118 | +* Be prepared to [[receive a CALLBACK from PayEx>>doc:ecommerce.eCommerce Platform.API Reference.Vipps Callback API Description.WebHome]].
    | 119 | +* VIPPS only support 2.phase transactions (AUTHORIZE), which mean that you must implement the CAPTURE and CANCEL requests.
    | 120 | +* For reversals, you will need to implement the REVERSAL request.
    | 121 | +
    | 122 | +=== Capture Sequence ===
    | 123 | +
    | 124 | +Capture can only be done on a authorized transaction.
    | 125 | +
    | 126 | +{{plantuml}}
    | 127 | +@startuml
    | 128 | +
    | 129 | +skinparam sequence{
    | 130 | + ArrowColor #2DA944
    | 131 | +
    | 132 | + ActorFontColor #333333
    | 133 | + ActorFontStyle bold
    | 134 | + ActorFontSize 15
    | 135 | + ActorBackgroundColor #fefefe
    | 136 | + ActorBorderColor #2DA944
    | 137 | +
    | 138 | + LifeLineBorderColor #999999
    | 139 | + LifeLineBackgroundColor #dddddd
    | 140 | +
    | 141 | + ParticipantBorderColor #2DA944
    | 142 | + ParticipantBackgroundColor #ffffff
    | 143 | + ParticipantFontColor #333333
    | 144 | + ParticipantFontStyle bold
    | 145 | +}
    | 146 | +skinparam Roundcorner 10
    | 147 | +skinparam Shadowing false
    | 148 | +
    | 149 | +skinparam ActivityBorderColor #123123
    | 150 | +
    | 151 | +skinparam NoteBackgroundColor white
    | 152 | +skinparam NoteBorderColor #999999
    | 153 | +skinparam NoteFontColor #333333
    | 154 | +
    | 155 | +Actor Merchant
    | 156 | +Participant PAYEX.FRONTEND
    | 157 | +Participant PAYEX.BACKEND
    | 158 | +Merchant->PAYEX.FRONTEND: POST [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce+Platform/API+Reference/POST+psp+vipps+captures Vipps captures]]
    | 159 | +Activate Merchant
    | 160 | +Activate PAYEX.FRONTEND
    | 161 | +PAYEX.FRONTEND->PAYEX.FRONTEND: validate input
    | 162 | +PAYEX.FRONTEND -> PAYEX.BACKEND: call capture method
    | 163 | +Activate PAYEX.BACKEND
    | 164 | +PAYEX.BACKEND-->PAYEX.FRONTEND: capture result
    | 165 | +Deactivate PAYEX.BACKEND
    | 166 | +PAYEX.FRONTEND-->Merchant: transaction resource
    | 167 | +Deactivate PAYEX.FRONTEND
    | 168 | +Deactivate Merchant
    | 169 | +@enduml
    | 170 | +{{/plantuml}}
    | 171 | +
    | 172 | +
    | 173 | +
    | 174 | +
    | 175 | +=== Cancel Sequence ===
    | 176 | +
    | 177 | +Cancel can only be done on a authorized transaction.
    | 178 | +
    | 179 | +{{plantuml}}
    | 180 | +@startuml
    | 181 | +
    | 182 | +skinparam sequence{
    | 183 | + ArrowColor #2DA944
    | 184 | +
    | 185 | + ActorFontColor #333333
    | 186 | + ActorFontStyle bold
    | 187 | + ActorFontSize 15
    | 188 | + ActorBackgroundColor #fefefe
    | 189 | + ActorBorderColor #2DA944
    | 190 | +
    | 191 | + LifeLineBorderColor #999999
    | 192 | + LifeLineBackgroundColor #dddddd
    | 193 | +
    | 194 | + ParticipantBorderColor #2DA944
    | 195 | + ParticipantBackgroundColor #ffffff
    | 196 | + ParticipantFontColor #333333
    | 197 | + ParticipantFontStyle bold
    | 198 | +}
    | 199 | +skinparam Roundcorner 10
    | 200 | +skinparam Shadowing false
    | 201 | +
    | 202 | +skinparam ActivityBorderColor #123123
    | 203 | +
    | 204 | +skinparam NoteBackgroundColor white
    | 205 | +skinparam NoteBorderColor #999999
    | 206 | +skinparam NoteFontColor #333333
    | 207 | +
    | 208 | +Actor Merchant
    | 209 | +Participant PAYEX.FRONTEND
    | 210 | +Participant PAYEX.BACKEND
    | 211 | +Merchant->PAYEX.FRONTEND: POST [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce+Platform/API+Reference/POST+psp+vipps+cancellations Vipps cancellations]]
    | 212 | +Activate Merchant
    | 213 | +Activate PAYEX.FRONTEND
    | 214 | +PAYEX.FRONTEND->PAYEX.FRONTEND: validate input
    | 215 | +PAYEX.FRONTEND-> PAYEX.BACKEND: call cancel method
    | 216 | +Activate PAYEX.BACKEND
    | 217 | +PAYEX.BACKEND-->PAYEX.FRONTEND: cancel result
    | 218 | +Deactivate PAYEX.BACKEND
    | 219 | +PAYEX.FRONTEND-->Merchant: transaction resource
    | 220 | +Deactivate PAYEX.FRONTEND
    | 221 | +Deactivate Merchant
    | 222 | +@enduml
    | 223 | +{{/plantuml}}
    | 224 | +
    | 225 | +
    | 226 | +
    | 227 | +=== Reversal Sequence ===
    | 228 | +
    | 229 | +Reversal can only be done on a captured transaction.
    | 230 | +
    | 231 | +{{plantuml}}
    | 232 | +@startuml
    | 233 | +
    | 234 | +skinparam sequence{
    | 235 | + ArrowColor #2DA944
    | 236 | +
    | 237 | + ActorFontColor #333333
    | 238 | + ActorFontStyle bold
    | 239 | + ActorFontSize 15
    | 240 | + ActorBackgroundColor #fefefe
    | 241 | + ActorBorderColor #2DA944
    | 242 | +
    | 243 | + LifeLineBorderColor #999999
    | 244 | + LifeLineBackgroundColor #dddddd
    | 245 | +
    | 246 | + ParticipantBorderColor #2DA944
    | 247 | + ParticipantBackgroundColor #ffffff
    | 248 | + ParticipantFontColor #333333
    | 249 | + ParticipantFontStyle bold
    | 250 | +}
    | 251 | +skinparam Roundcorner 10
    | 252 | +skinparam Shadowing false
    | 253 | +
    | 254 | +skinparam ActivityBorderColor #123123
    | 255 | +
    | 256 | +skinparam NoteBackgroundColor white
    | 257 | +skinparam NoteBorderColor #999999
    | 258 | +skinparam NoteFontColor #333333
    | 259 | +
    | 260 | +Actor Merchant
    | 261 | +Participant PAYEX.FRONTEND
    | 262 | +Participant PAYEX.BACKEND
    | 263 | +Merchant->PAYEX.FRONTEND: POST [[https://developer.payex.com/xwiki/wiki/external/view/ecommerce/eCommerce+Platform/API+Reference/POST+psp+vipps+reversals Vipps reversals]]
    | 264 | +Activate Merchant
    | 265 | +Activate PAYEX.FRONTEND
    | 266 | +PAYEX.FRONTEND ->PAYEX.FRONTEND: validate input
    | 267 | +PAYEX.FRONTEND -> PAYEX.BACKEND: call credit method
    | 268 | +Activate PAYEX.BACKEND
    | 269 | +PAYEX.BACKEND-->PAYEX.FRONTEND: credit result
    | 270 | +Deactivate PAYEX.BACKEND
    | 271 | +PAYEX.FRONTEND-->Merchant: transaction resource
    | 272 | +Deactivate PAYEX.FRONTEND
    | 273 | +Deactivate Merchant
    | 274 | +@enduml
    | 275 | +{{/plantuml}}

Vipps_flow_directAPI.png
  Author

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +xwiki:XWiki.hde

  Size

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +0 bytes

  Content
vipps_sjgrnn.png
  Author

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +xwiki:XWiki.hde

  Size

    ... | ... | @@ -1,0 +1,1 @@
    | 1 | +0 bytes

  Content

# Applications

# Tips

Did you know that you can improve XWiki? Take 5 minutes to fill this survey and help this open source project!

# Need help?

If you need help with XWiki you can contact:

- Community Support
- Professional Support