---
# System prepended metadata

title: mPOS / PR Interaction
tags: [mPOS]

---

---
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

```
