--- tags: mPOS --- <style> .mermaid{ margin:-70px; } </style> # mPOS / PR Interaction [toc] ## PR Payment / Authorization ![](https://i.imgur.com/nuih835.png) | STEPS | | --------------------------------------- | | 1. ![](https://i.imgur.com/hC8g6Ir.png) | | 2. ![](https://i.imgur.com/tWluC3n.png) | | 3. ![](https://i.imgur.com/4jZGpBp.png) | | 4. ![](https://i.imgur.com/rd6ZzPE.png) | | 5. ![](https://i.imgur.com/ET78ngl.png) | | 6. ![](https://i.imgur.com/9lrI3EB.png) | ### Sequence Diagram ```plantuml @startuml pr3d skinparam default { FontSize 16 } skinparam sequence { MessageAlign center LifelineBorderColor grey } skinparam lifelineStrategy nosolid box "Store" #lightblue participant "mPOS/iPad" As pos participant "3D window" As iframe participant RPi As rpi database "SC DB" as SC end box box participant PaymentRouter As PR end box participant Bank As bank pos -> rpi++ : POST /pr/payment note over iframe postbackUrl: /pr/postback end note rpi -> PR++ : POST /payment PR -> bank++ : Authorize / Payment bank --> PR-- : auth result PR --> rpi-- : /payment Result alt #transparent PR result success rpi -> SC++ : INSERT PaymentLog\n(TDL_PAY) SC --> rpi-- : INSERT Result end rpi --> pos-- : /pr/payment Result alt #transparent hppUrl is HTML pos -> iframe++ : iframe.srcdoc = <html> alt #transparent NCCC note right of iframe [html page with auto form post] <html> <head>...</head> <body ...> <form name="PaForm" method="post" action="https://emv3ds-acs-uat.nccc.com.tw/acsn2_kernel/pareq"> ... <input type="hidden" name="PaReq" value="..."> <input type="hidden" name="TermUrl" value="https://nccnet-ectest.nccc.com.tw/merchant/VMJ3DResponse"> ... </form> <SCRIPT LANGUAGE=Javascript> ... document.PaForm.submit(); ... </SCRIPT> </body> </html> end note iframe -> bank++ : GET nccnet-ectest.nccc.com.tw (TEST) bank --> iframe iframe -> bank : POST emv3ds-acs-uat.nccc.com.tw bank --> iframe-- end else hppUrl is URL pos -> iframe : iframe.src = <url> ' alt #transparent ABSTRACT ' iframe -> bank++ : GET 3D Webpage ' bank --> iframe-- : Display 3D Page alt #transparent taishinbank ' alt #transparent taishinbank iframe -> bank++ : GET tspg.taishinbank.com.tw bank --> iframe note right of iframe [html page with auto form post] <form name="form1" method="post" action="https://emv3ds-acs.nccc.com.tw/acsn2_kernel/pareq" id="form1"> <input type="hidden" name="PaReq" id="PaReq" value="..." /> <input type="hidden" name="TermUrl" id="TermUrl" value="https://tspg.taishinbank.com.tw/tspgapi/hpp/paRespHandler.ashx" /> ... ... <script language='JavaScript'> ... document.getElementById('form1').submit(); </script> </form> end note iframe -> bank : POST emv3ds-acs.nccc.com.tw bank --> iframe-- end end iframe -> bank : POST get OTP activate bank bank --> iframe : Reponse page with OTP input deactivate bank loop iframe -->> iframe : Wait for OTP end iframe -> bank++ : POST verify OTP bank --> iframe-- : Response page that POST OTP response iframe -> bank++ : POST Response bank --> iframe-- : Response page with form post to postbackUrl iframe -> rpi++ : POST /pr/postback note right of rpi <b>FormData MerchantID=... & TerminalID=... & OrderID=202104237052500001 & ... end note rpi -> PR++ : POST /callback PR --> rpi-- : /callback Result alt #transparent 3D success rpi -> SC++ : UPDATE PaymentLog\n(TDL_PAY) SC --> rpi-- : UPDATE Result end rpi --> iframe-- : /pr/postback Result note right of iframe <html> <head> <title></title> <meta charset="utf-8" /> </head> <body><h1>3D Done</h1> <script> (function(){ var resultJson = {...}; parent.postMessage(JSON.stringify(resultJson),'*'); opener.postMessage(JSON.stringify(resultJson),'*') })() </script> </body> </html> end note iframe -> pos-- : parent.postMessage()\nopener.postMessage() @enduml ``` ### mPOS/pr/postback return HTML ```html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <h1>3D Done / Failed</h1> <script> (function(){ var resultJson = {...}; parent.postMessage(JSON.stringify(resultJson),'*'); opener.postMessage(JSON.stringify(resultJson),'*'); })() </script> </body> </html> ``` <hr/> #### Suggested alternative solution ```mermaid sequenceDiagram participant idc as Server for handling postback<br>(IDC?) participant browser as mPOS PWA participant iframe as 3D iframe participant rpi as mPOS Server<br>(RPi) participant pr as PR participant bank as Bank Note over browser: credit card info inputted browser->>+rpi: POST ./pr/payment Note over iframe: postbackUrl: ./pr/postback rpi->>+pr: POST ./payment pr->>+bank: Auth / Payment bank-->>-pr: Payment Result pr-->>-rpi: ./payment Result Note left of pr: hppUrl: <url or html> rpi-->>-browser: ./pr/payment Result alt hppUrl is HTML browser->>+iframe:iframe.srcdoc = <html> else hppUrl is URL browser->>iframe: iframe.src = <url> iframe->>+bank: GET 3D Webpage bank-->>-iframe: Display 3D Page end iframe->>+bank: POST confirm get OTP opt bank-->>-iframe: Redirect to page with OTP input end loop iframe-->iframe: Wait for OTP input end iframe->>+bank: POST 3D Validation bank-->>-iframe: Redirect to page with form post to postbackUrl iframe->>+idc: handle POST postback Note over browser: easier to modify postback HTML if needed (?) idc-->>-iframe: postback Result iframe->>+rpi: POST ./pr/callback rpi->>+pr: POST ./callback pr-->>-rpi: ./callback Result rpi-->>-iframe: ./pr/callback Result iframe->>-browser: parent.postMessage ```