diff options
| author | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-03-21 16:41:40 +0100 |
|---|---|---|
| committer | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-03-21 16:41:40 +0100 |
| commit | 339c59ba118915cbe05b51b7e0909b45ea160ce1 (patch) | |
| tree | 6beaf22d29a4803c3a926bfd65528e1abfed51b7 /articles/ui/figs | |
| parent | 6f3407606e076fd556e756fb2d505e4e58eb885e (diff) | |
| download | wallet-core-339c59ba118915cbe05b51b7e0909b45ea160ce1.tar.xz | |
moving here wallet papers forlder
Diffstat (limited to 'articles/ui/figs')
31 files changed, 272 insertions, 0 deletions
diff --git a/articles/ui/figs/bank0a.png b/articles/ui/figs/bank0a.png Binary files differnew file mode 100644 index 000000000..b679304d0 --- /dev/null +++ b/articles/ui/figs/bank0a.png diff --git a/articles/ui/figs/bank1.png b/articles/ui/figs/bank1.png Binary files differnew file mode 100644 index 000000000..84bc7a189 --- /dev/null +++ b/articles/ui/figs/bank1.png diff --git a/articles/ui/figs/bank1a.png b/articles/ui/figs/bank1a.png Binary files differnew file mode 100644 index 000000000..b91adfff6 --- /dev/null +++ b/articles/ui/figs/bank1a.png diff --git a/articles/ui/figs/bank1b.png b/articles/ui/figs/bank1b.png Binary files differnew file mode 100644 index 000000000..a3adfe4e3 --- /dev/null +++ b/articles/ui/figs/bank1b.png diff --git a/articles/ui/figs/bank2.png b/articles/ui/figs/bank2.png Binary files differnew file mode 100644 index 000000000..126c9a059 --- /dev/null +++ b/articles/ui/figs/bank2.png diff --git a/articles/ui/figs/bank2a.png b/articles/ui/figs/bank2a.png Binary files differnew file mode 100644 index 000000000..087cef9e1 --- /dev/null +++ b/articles/ui/figs/bank2a.png diff --git a/articles/ui/figs/bank2b.png b/articles/ui/figs/bank2b.png Binary files differnew file mode 100644 index 000000000..eaa4ba475 --- /dev/null +++ b/articles/ui/figs/bank2b.png diff --git a/articles/ui/figs/bank3.png b/articles/ui/figs/bank3.png Binary files differnew file mode 100644 index 000000000..3b79c042f --- /dev/null +++ b/articles/ui/figs/bank3.png diff --git a/articles/ui/figs/bank3a.png b/articles/ui/figs/bank3a.png Binary files differnew file mode 100644 index 000000000..2d321a27a --- /dev/null +++ b/articles/ui/figs/bank3a.png diff --git a/articles/ui/figs/bank3b.png b/articles/ui/figs/bank3b.png Binary files differnew file mode 100644 index 000000000..78e7637cb --- /dev/null +++ b/articles/ui/figs/bank3b.png diff --git a/articles/ui/figs/bank4.png b/articles/ui/figs/bank4.png Binary files differnew file mode 100644 index 000000000..56c32e15c --- /dev/null +++ b/articles/ui/figs/bank4.png diff --git a/articles/ui/figs/bank4a.png b/articles/ui/figs/bank4a.png Binary files differnew file mode 100644 index 000000000..65f18684c --- /dev/null +++ b/articles/ui/figs/bank4a.png diff --git a/articles/ui/figs/bank4b.png b/articles/ui/figs/bank4b.png Binary files differnew file mode 100644 index 000000000..fde59ab7c --- /dev/null +++ b/articles/ui/figs/bank4b.png diff --git a/articles/ui/figs/bitcoin.pdf b/articles/ui/figs/bitcoin.pdf Binary files differnew file mode 100644 index 000000000..c1c9b9ca3 --- /dev/null +++ b/articles/ui/figs/bitcoin.pdf diff --git a/articles/ui/figs/bitcoin.pml b/articles/ui/figs/bitcoin.pml new file mode 100644 index 000000000..88707cda1 --- /dev/null +++ b/articles/ui/figs/bitcoin.pml @@ -0,0 +1,37 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Database "Invoice Database" as DB +Participant "Payee Website" as Website +Database "Bitcoin Network" as Bitcoin +Participant "Payer Wallet" as Wallet +Actor "Payer (Browser)" as Payer + +title Bitcoin Payment Protocol (BIP70) + +Payer->Website: Request checkout with Bitcoin +Website->Website: Generate Bitcoin address +Website->DB: Store invoice details +Website->Payer: Basket Page with bitcoin: pay link +Payer->Payer: Click bitcoin: link +Payer->Wallet: Wallet handles bitcoin: URL and extracts invoice URL +Wallet->Website: Request invoice +Website->DB: Get invoice details +Website->Website: Create PaymentDetails (Amount, Memo, Ref#, Pay URL) +Website->Website: Create PaymentRequest (Signed PaymentDetails) +Website->Wallet: PaymentRequest containing PaymentDetails +Wallet->Payer: Confirm payment details? +Payer->Wallet: Accept payment +Wallet->Wallet: Generate and sign payment +Wallet->Website: Signed payment +Website->Bitcoin: Submit payment +Website->Wallet: Payment ACK +Wallet->Payer: Confirm payment is complete +loop until payment is confirmed + Bitcoin->Website: Latest confirmed transactions +end + + +@enduml
\ No newline at end of file diff --git a/articles/ui/figs/bitcoin.svg b/articles/ui/figs/bitcoin.svg new file mode 100644 index 000000000..3f908b3df --- /dev/null +++ b/articles/ui/figs/bitcoin.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="858px" style="width:1232px;height:858px;" version="1.1" viewBox="0 0 1232 858" width="1232px"><defs/><g><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="258" x="491.75" y="22.9951">Bitcoin Payment Protocol (BIP70)</text><rect fill="#FFFFFF" height="46.2656" style="stroke: #000000; stroke-width: 2.0;" width="522" x="168" y="718.9844"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="70" x2="70" y1="112.5938" y2="782.25"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="236" x2="236" y1="112.5938" y2="782.25"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="623" x2="623" y1="112.5938" y2="782.25"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="738" x2="738" y1="112.5938" y2="782.25"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1107" x2="1107" y1="112.5938" y2="782.25"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="118" x="8" y="109.292">Invoice Database</text><path d="M52,64.2969 C52,54.2969 70,54.2969 70,54.2969 C70,54.2969 88,54.2969 88,64.2969 L88,86.2969 C88,96.2969 70,96.2969 70,96.2969 C70,96.2969 52,96.2969 52,86.2969 L52,64.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 1.5;"/><path d="M52,64.2969 C52,74.2969 70,74.2969 70,74.2969 C70,74.2969 88,74.2969 88,64.2969 " fill="none" style="stroke: #A80036; stroke-width: 1.5;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="118" x="8" y="794.2451">Invoice Database</text><path d="M52,807.5469 C52,797.5469 70,797.5469 70,797.5469 C70,797.5469 88,797.5469 88,807.5469 L88,829.5469 C88,839.5469 70,839.5469 70,839.5469 C70,839.5469 52,839.5469 52,829.5469 L52,807.5469 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 1.5;"/><path d="M52,807.5469 C52,817.5469 70,817.5469 70,817.5469 C70,817.5469 88,817.5469 88,807.5469 " fill="none" style="stroke: #A80036; stroke-width: 1.5;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="116" x="178" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="185" y="101.292">Payee Website</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="116" x="178" y="781.25"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="102" x="185" y="801.2451">Payee Website</text><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="108" x="566" y="109.292">Bitcoin Network</text><path d="M605,64.2969 C605,54.2969 623,54.2969 623,54.2969 C623,54.2969 641,54.2969 641,64.2969 L641,86.2969 C641,96.2969 623,96.2969 623,96.2969 C623,96.2969 605,96.2969 605,86.2969 L605,64.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 1.5;"/><path d="M605,64.2969 C605,74.2969 623,74.2969 623,74.2969 C623,74.2969 641,74.2969 641,64.2969 " fill="none" style="stroke: #A80036; stroke-width: 1.5;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="108" x="566" y="794.2451">Bitcoin Network</text><path d="M605,807.5469 C605,797.5469 623,797.5469 623,797.5469 C623,797.5469 641,797.5469 641,807.5469 L641,829.5469 C641,839.5469 623,839.5469 623,839.5469 C623,839.5469 605,839.5469 605,829.5469 L605,807.5469 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 1.5;"/><path d="M605,807.5469 C605,817.5469 623,817.5469 623,817.5469 C623,817.5469 641,817.5469 641,807.5469 " fill="none" style="stroke: #A80036; stroke-width: 1.5;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="690" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="697" y="101.292">Payer Wallet</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="690" y="781.25"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="697" y="801.2451">Payer Wallet</text><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="109" x="1050" y="109.292">Payer (Browser)</text><ellipse cx="1107.5" cy="43.2969" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M1107.5,51.2969 L1107.5,78.2969 M1094.5,59.2969 L1120.5,59.2969 M1107.5,78.2969 L1094.5,93.2969 M1107.5,78.2969 L1120.5,93.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="109" x="1050" y="794.2451">Payer (Browser)</text><ellipse cx="1107.5" cy="807.5469" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M1107.5,815.5469 L1107.5,842.5469 M1094.5,823.5469 L1120.5,823.5469 M1107.5,842.5469 L1094.5,857.5469 M1107.5,842.5469 L1120.5,857.5469 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="247,139.5938,237,143.5938,247,147.5938,243,143.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241" x2="1106.5" y1="143.5938" y2="143.5938"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="253" y="138.6606">1</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="190" x="266" y="138.6606">Request checkout with Bitcoin</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="278" y1="172.8594" y2="172.8594"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="278" x2="278" y1="172.8594" y2="185.8594"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="237" x2="278" y1="185.8594" y2="185.8594"/><polygon fill="#A80036" points="247,181.8594,237,185.8594,247,189.8594,243,185.8594" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="243" y="167.7935">2</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="162" x="256" y="167.7935">Generate Bitcoin address</text><polygon fill="#A80036" points="81,210.8594,71,214.8594,81,218.8594,77,214.8594" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="75" x2="235" y1="214.8594" y2="214.8594"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="87" y="209.9263">3</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="129" x="100" y="209.9263">Store invoice details</text><polygon fill="#A80036" points="1095.5,239.9922,1105.5,243.9922,1095.5,247.9922,1099.5,243.9922" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="1101.5" y1="243.9922" y2="243.9922"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="243" y="239.0591">4</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="211" x="256" y="239.0591">Basket Page with bitcoin: pay link</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="1107.5" x2="1149.5" y1="273.2578" y2="273.2578"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1149.5" x2="1149.5" y1="273.2578" y2="286.2578"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1108.5" x2="1149.5" y1="286.2578" y2="286.2578"/><polygon fill="#A80036" points="1118.5,282.2578,1108.5,286.2578,1118.5,290.2578,1114.5,286.2578" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="1114.5" y="268.1919">5</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="104" x="1127.5" y="268.1919">Click bitcoin: link</text><polygon fill="#A80036" points="749.5,311.2578,739.5,315.2578,749.5,319.2578,745.5,315.2578" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="743.5" x2="1106.5" y1="315.2578" y2="315.2578"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="755.5" y="310.3247">6</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="332" x="768.5" y="310.3247">Wallet handles bitcoin: URL and extracts invoice URL</text><polygon fill="#A80036" points="247,340.3906,237,344.3906,247,348.3906,243,344.3906" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241" x2="737.5" y1="344.3906" y2="344.3906"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="253" y="339.4575">7</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="100" x="266" y="339.4575">Request invoice</text><polygon fill="#A80036" points="81,369.5234,71,373.5234,81,377.5234,77,373.5234" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="75" x2="235" y1="373.5234" y2="373.5234"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="87" y="368.5903">8</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="100" y="368.5903">Get invoice details</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="278" y1="402.7891" y2="402.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="278" x2="278" y1="402.7891" y2="415.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="237" x2="278" y1="415.7891" y2="415.7891"/><polygon fill="#A80036" points="247,411.7891,237,415.7891,247,419.7891,243,415.7891" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="243" y="397.7231">9</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="360" x="256" y="397.7231">Create PaymentDetails (Amount, Memo, Ref#, Pay URL)</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="278" y1="444.9219" y2="444.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="278" x2="278" y1="444.9219" y2="457.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="237" x2="278" y1="457.9219" y2="457.9219"/><polygon fill="#A80036" points="247,453.9219,237,457.9219,247,461.9219,243,457.9219" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="243" y="439.856">10</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="319" x="265" y="439.856">Create PaymentRequest (Signed PaymentDetails)</text><polygon fill="#A80036" points="726.5,482.9219,736.5,486.9219,726.5,490.9219,730.5,486.9219" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="732.5" y1="486.9219" y2="486.9219"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="243" y="481.9888">11</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="284" x="265" y="481.9888">PaymentRequest containing PaymentDetails</text><polygon fill="#A80036" points="1095.5,512.0547,1105.5,516.0547,1095.5,520.0547,1099.5,516.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="738.5" x2="1101.5" y1="516.0547" y2="516.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="745.5" y="511.1216">12</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="164" x="767.5" y="511.1216">Confirm payment details?</text><polygon fill="#A80036" points="749.5,541.1875,739.5,545.1875,749.5,549.1875,745.5,545.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="743.5" x2="1106.5" y1="545.1875" y2="545.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="755.5" y="540.2544">13</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="105" x="777.5" y="540.2544">Accept payment</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="738.5" x2="780.5" y1="574.4531" y2="574.4531"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="780.5" x2="780.5" y1="574.4531" y2="587.4531"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="739.5" x2="780.5" y1="587.4531" y2="587.4531"/><polygon fill="#A80036" points="749.5,583.4531,739.5,587.4531,749.5,591.4531,745.5,587.4531" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="745.5" y="569.3872">14</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="179" x="767.5" y="569.3872">Generate and sign payment</text><polygon fill="#A80036" points="247,612.4531,237,616.4531,247,620.4531,243,616.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241" x2="737.5" y1="616.4531" y2="616.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="253" y="611.52">15</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="105" x="275" y="611.52">Signed payment</text><polygon fill="#A80036" points="611,641.5859,621,645.5859,611,649.5859,615,645.5859" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="617" y1="645.5859" y2="645.5859"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="243" y="640.6528">16</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="107" x="265" y="640.6528">Submit payment</text><polygon fill="#A80036" points="726.5,670.7188,736.5,674.7188,726.5,678.7188,730.5,674.7188" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="236" x2="732.5" y1="674.7188" y2="674.7188"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="243" y="669.7856">17</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="87" x="265" y="669.7856">Payment ACK</text><polygon fill="#A80036" points="1095.5,699.8516,1105.5,703.8516,1095.5,707.8516,1099.5,703.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="738.5" x2="1101.5" y1="703.8516" y2="703.8516"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="745.5" y="698.9185">18</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="189" x="767.5" y="698.9185">Confirm payment is complete</text><rect fill="none" height="46.2656" style="stroke: #000000; stroke-width: 2.0;" width="522" x="168" y="718.9844"/><polygon fill="#EEEEEE" points="168,718.9844,245,718.9844,245,725.9844,235,735.9844,168,735.9844,168,718.9844" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="32" x="183" y="732.0513">loop</text><text fill="#000000" font-family="Lucida Sans" font-size="11" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="181" x="260" y="731.1948">[until payment is confirmed]</text><polygon fill="#A80036" points="247,753.1172,237,757.1172,247,761.1172,243,757.1172" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="241" x2="622" y1="757.1172" y2="757.1172"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="253" y="752.1841">19</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="191" x="275" y="752.1841">Latest confirmed transactions</text></g></svg>
\ No newline at end of file diff --git a/articles/ui/figs/cart.png b/articles/ui/figs/cart.png Binary files differnew file mode 100644 index 000000000..58beb3b1a --- /dev/null +++ b/articles/ui/figs/cart.png diff --git a/articles/ui/figs/cc3ds.pdf b/articles/ui/figs/cc3ds.pdf Binary files differnew file mode 100644 index 000000000..e8967cee3 --- /dev/null +++ b/articles/ui/figs/cc3ds.pdf diff --git a/articles/ui/figs/cc3ds.pml b/articles/ui/figs/cc3ds.pml new file mode 100644 index 000000000..90fc33008 --- /dev/null +++ b/articles/ui/figs/cc3ds.pml @@ -0,0 +1,96 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Participant "Payee (Merchant) PSP [Acquirer]" as MPSP +Participant "Payee (Merchant) [Acceptor] Site " as Payee +Actor "Payer (Shopper) [Cardholder] Browser" as Payer +participant "Browser Form Filler" as UA +participant "Card Scheme Directory" as CSD +participant "Issuing Bank [Issuer] Website" as CPSPW +participant "Issuing Bank [Issuer]" as CPSP + +note over Payee, Payer: HTTPS + +title +<b>Legacy Merchant Hosted Card Payment with Acquirer Supported 3DS (Current)</b> + +<i>3DS is used to add confidence that the payer is who they say they are and importantly in the event of a dispute liability shift to the Issuer.</i> +end title + +== Establish Payment Obligation == + +Payee->Payer: Present Check-out page with Pay Button +Payer->Payer: Select Card Payment Method + +alt + UA->Payer: Form Fill + Note right: fields are PAN & Expiry Date with optional CVV, & Address, Also Card Valid Date and Issue Number are required for some Schemes +else + Payer->Payer: User Fills Form +End + +== Card Payment Initiation == + +Payer->Payee: Payment Initiation +Note right: Custom code on merchant webpage can encrypt payload to reduce PCI burden from SAQ D to SAQ A-EP + +opt + Payee->Payee: Store Card + note right: Merchant can store card details apart from CVV (even if encrypted) for future use (a.k.a. Card on File) +end + +Payee-\MPSP: Authorise + + +== 3DS part of flow == + +Note over MPSP, Payee: At this point, the Merchant or Merchant's PSP can decide if it wishes to invoke 3DS. This might be based on transaction value (i.e. low value -> low risk) or other factors, e.g. if the Shopper is a repeat purchaser. + + MPSP –> CSD: BIN to URL lookup (VAReq message) + CSD -> CSD: Lookup URL from BIN + CSD –> CPSPW : “PING” + note right: verify URL validity + CPSPW –> CSD: “PING” response + CSD –> MPSP: URL + + MPSP-/Payee: 3DS redirect (PAReq message) + Payee->Payer: 3DS redirect (PAReq message) + Payer->CPSPW: 3DS invoke + CPSPW-\Payer: 3DS challenge + Payer-/CPSPW: 3DS response (PARes message) + CPSPW->Payer: 3DS response (PARes message) + Payer->Payee: 3DS response (PARes message) + Payee-\MPSP: 3DS response (PARes message) + + MPSP->MPSP: Verification of PARes signature + +== End of 3DS == + + +MPSP-\CPSP: Authorisation Request +CPSP-/MPSP: Authorisation Response + +MPSP-/Payee: Authorisation Response + +== Notification == + +Payee->Payer: Result Page + +== Request for Settlement process (could be immediate, batch (e.g. daily) or after some days) == + +Alt + Payee -> MPSP : Capture + note right: Later Capture may be called, for example after good shipped or tickets pickedup +Else + MPSP -> MPSP : Auto Capture in batch processing at end-of-day +End + +MPSP->CPSP: Capture + +== Fulfilment == + +Payee->Payer: Provide products or services + +@enduml diff --git a/articles/ui/figs/cc3ds.svg b/articles/ui/figs/cc3ds.svg new file mode 100644 index 000000000..682276c27 --- /dev/null +++ b/articles/ui/figs/cc3ds.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1657px" style="width:2250px;height:1657px;" version="1.1" viewBox="0 0 2250 1657" width="2250px"><defs/><g><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="625" x="813.5" y="22.9951">Legacy Merchant Hosted Card Payment with Acquirer Supported 3DS (Current)</text><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="0" x="1128.5" y="39.292"/><text fill="#000000" font-family="Lucida Sans" font-size="14" font-style="italic" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="1115" x="568.5" y="55.5889">3DS is used to add confidence that the payer is who they say they are and importantly in the event of a dispute liability shift to the Issuer.</text><rect fill="#FFFFFF" height="96.3984" style="stroke: #000000; stroke-width: 2.0;" width="1234.5" x="1004.5" y="311.7188"/><rect fill="#FFFFFF" height="44.1328" style="stroke: none; stroke-width: 1.0;" width="1234.5" x="1004.5" y="363.9844"/><rect fill="#FFFFFF" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="911.5" x="722" y="500.3828"/><rect fill="#FFFFFF" height="96.3984" style="stroke: #000000; stroke-width: 2.0;" width="1016.5" x="387" y="1366.8359"/><rect fill="#FFFFFF" height="44.1328" style="stroke: none; stroke-width: 1.0;" width="1016.5" x="387" y="1419.1016"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="515" x2="515" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="854" x2="854" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1148.5" x2="1148.5" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1364.5" x2="1364.5" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1533.5" x2="1533.5" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1739.5" x2="1739.5" y1="145.1875" y2="1581.6328"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1937.5" x2="1937.5" y1="145.1875" y2="1581.6328"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="237" x="397" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="223" x="404" y="133.8857">Payee (Merchant) PSP [Acquirer]</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="237" x="397" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="223" x="404" y="1600.6279">Payee (Merchant) PSP [Acquirer]</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="245" x="732" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="227" x="739" y="133.8857">Payee (Merchant) [Acceptor] Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="245" x="732" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="227" x="739" y="1600.6279">Payee (Merchant) [Acceptor] Site</text><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="262" x="1014.5" y="141.8857">Payer (Shopper) [Cardholder] Browser</text><ellipse cx="1148.5" cy="75.8906" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M1148.5,83.8906 L1148.5,110.8906 M1135.5,91.8906 L1161.5,91.8906 M1148.5,110.8906 L1135.5,125.8906 M1148.5,110.8906 L1161.5,125.8906 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="262" x="1014.5" y="1593.6279">Payer (Shopper) [Cardholder] Browser</text><ellipse cx="1148.5" cy="1606.9297" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M1148.5,1614.9297 L1148.5,1641.9297 M1135.5,1622.9297 L1161.5,1622.9297 M1148.5,1641.9297 L1135.5,1656.9297 M1148.5,1641.9297 L1161.5,1656.9297 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="145" x="1292.5" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="131" x="1299.5" y="133.8857">Browser Form Filler</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="145" x="1292.5" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="131" x="1299.5" y="1600.6279">Browser Form Filler</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="173" x="1447.5" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="159" x="1454.5" y="133.8857">Card Scheme Directory</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="173" x="1447.5" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="159" x="1454.5" y="1600.6279">Card Scheme Directory</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="218" x="1630.5" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="204" x="1637.5" y="133.8857">Issuing Bank [Issuer] Website</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="218" x="1630.5" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="204" x="1637.5" y="1600.6279">Issuing Bank [Issuer] Website</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="158" x="1858.5" y="113.8906"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="144" x="1865.5" y="133.8857">Issuing Bank [Issuer]</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="158" x="1858.5" y="1580.6328"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="144" x="1865.5" y="1600.6279">Issuing Bank [Issuer]</text><polygon fill="#FBFB77" points="728,160.1875,728,185.1875,1273,185.1875,1273,170.1875,1263,160.1875,728,160.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1263" x2="1263" y1="160.1875" y2="170.1875"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1273" x2="1263" y1="170.1875" y2="170.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="975.75" y="177.2544">HTTPS</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="210.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="210.8867" y2="210.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="213.8867" y2="213.8867"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="237" x="1007.5" y="200.3203"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="218" x="1013.5" y="216.3872">Establish Payment Obligation</text><polygon fill="#A80036" points="1136.5,250.4531,1146.5,254.4531,1136.5,258.4531,1140.5,254.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="854.5" x2="1142.5" y1="254.4531" y2="254.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="861.5" y="249.52">1</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="257" x="874.5" y="249.52">Present Check-out page with Pay Button</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="1148.5" x2="1190.5" y1="283.7188" y2="283.7188"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1190.5" x2="1190.5" y1="283.7188" y2="296.7188"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1149.5" x2="1190.5" y1="296.7188" y2="296.7188"/><polygon fill="#A80036" points="1159.5,292.7188,1149.5,296.7188,1159.5,300.7188,1155.5,296.7188" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="1155.5" y="278.6528">2</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="187" x="1168.5" y="278.6528">Select Card Payment Method</text><rect fill="none" height="96.3984" style="stroke: #000000; stroke-width: 2.0;" width="1234.5" x="1004.5" y="311.7188"/><polygon fill="#EEEEEE" points="1004.5,311.7188,1068.5,311.7188,1068.5,318.7188,1058.5,328.7188,1004.5,328.7188,1004.5,311.7188" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="19" x="1019.5" y="324.7856">alt</text><polygon fill="#A80036" points="1159.5,348.8516,1149.5,352.8516,1159.5,356.8516,1155.5,352.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1153.5" x2="1364" y1="352.8516" y2="352.8516"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="1165.5" y="347.9185">3</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="53" x="1178.5" y="347.9185">Form Fill</text><polygon fill="#FBFB77" points="1370,333.8516,1370,358.8516,2229,358.8516,2229,343.8516,2219,333.8516,1370,333.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="2219" x2="2219" y1="333.8516" y2="343.8516"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="2229" x2="2219" y1="343.8516" y2="343.8516"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="838" x="1376" y="350.9185">fields are PAN & Expiry Date with optional CVV, & Address, Also Card Valid Date and Issue Number are required for some Schemes</text><line style="stroke: #000000; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="1004.5" x2="2239" y1="364.9844" y2="364.9844"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1148.5" x2="1190.5" y1="387.1172" y2="387.1172"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1190.5" x2="1190.5" y1="387.1172" y2="400.1172"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1149.5" x2="1190.5" y1="400.1172" y2="400.1172"/><polygon fill="#A80036" points="1159.5,396.1172,1149.5,400.1172,1159.5,404.1172,1155.5,400.1172" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="1155.5" y="382.0513">4</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="94" x="1168.5" y="382.0513">User Fills Form</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="435.6836"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="435.6836" y2="435.6836"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="438.6836" y2="438.6836"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="193" x="1029.5" y="425.1172"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="174" x="1035.5" y="441.1841">Card Payment Initiation</text><polygon fill="#A80036" points="865.5,478.25,855.5,482.25,865.5,486.25,861.5,482.25" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="859.5" x2="1147.5" y1="482.25" y2="482.25"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="871.5" y="477.3169">5</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="115" x="884.5" y="477.3169">Payment Initiation</text><polygon fill="#FBFB77" points="1153,463.25,1153,488.25,1840,488.25,1840,473.25,1830,463.25,1153,463.25" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1830" x2="1830" y1="463.25" y2="473.25"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1840" x2="1830" y1="473.25" y2="473.25"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="666" x="1159" y="480.3169">Custom code on merchant webpage can encrypt payload to reduce PCI burden from SAQ D to SAQ A-EP</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="911.5" x="722" y="500.3828"/><polygon fill="#EEEEEE" points="722,500.3828,792,500.3828,792,507.3828,782,517.3828,722,517.3828,722,500.3828" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="737" y="513.4497">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="854.5" x2="896.5" y1="538.6484" y2="538.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="896.5" x2="896.5" y1="538.6484" y2="551.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="855.5" x2="896.5" y1="551.6484" y2="551.6484"/><polygon fill="#A80036" points="865.5,547.6484,855.5,551.6484,865.5,555.6484,861.5,551.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="861.5" y="533.5825">6</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="69" x="874.5" y="533.5825">Store Card</text><polygon fill="#FBFB77" points="955,526.0156,955,551.0156,1623,551.0156,1623,536.0156,1613,526.0156,955,526.0156" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1613" x2="1613" y1="526.0156" y2="536.0156"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1623" x2="1613" y1="536.0156" y2="536.0156"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="647" x="961" y="543.0825">Merchant can store card details apart from CVV (even if encrypted) for future use (a.k.a. Card on File)</text><polygon fill="#A80036" points="526.5,583.6484,516.5,587.6484,526.5,587.6484" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="853.5" y1="587.6484" y2="587.6484"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="532.5" y="582.7153">7</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="61" x="545.5" y="582.7153">Authorise</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="616.3477"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="616.3477" y2="616.3477"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="619.3477" y2="619.3477"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="140" x="1056" y="605.7813"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="121" x="1062" y="621.8481">3DS part of flow</text><polygon fill="#FBFB77" points="8,643.9141,8,668.9141,1363,668.9141,1363,653.9141,1353,643.9141,8,643.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1353" x2="1353" y1="643.9141" y2="653.9141"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1363" x2="1353" y1="653.9141" y2="653.9141"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="1334" x="14" y="660.981">At this point, the Merchant or Merchant's PSP can decide if it wishes to invoke 3DS. This might be based on transaction value (i.e. low value -> low risk) or other factors, e.g. if the Shopper is a repeat purchaser.</text><polygon fill="#A80036" points="1522,691.0469,1532,695.0469,1522,699.0469,1526,695.0469" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="1528" y1="695.0469" y2="695.0469"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="522.5" y="690.1138">8</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="233" x="535.5" y="690.1138">BIN to URL lookup (VAReq message)</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="1534" x2="1576" y1="724.3125" y2="724.3125"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1576" x2="1576" y1="724.3125" y2="737.3125"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1535" x2="1576" y1="737.3125" y2="737.3125"/><polygon fill="#A80036" points="1545,733.3125,1535,737.3125,1545,741.3125,1541,737.3125" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="1541" y="719.2466">9</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="135" x="1554" y="719.2466">Lookup URL from BIN</text><polygon fill="#A80036" points="1727.5,765.3125,1737.5,769.3125,1727.5,773.3125,1731.5,769.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1534" x2="1733.5" y1="769.3125" y2="769.3125"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1541" y="764.3794">10</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="45" x="1563" y="764.3794">“PING”</text><polygon fill="#FBFB77" points="1744,750.3125,1744,775.3125,1876,775.3125,1876,760.3125,1866,750.3125,1744,750.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1866" x2="1866" y1="750.3125" y2="760.3125"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1876" x2="1866" y1="760.3125" y2="760.3125"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="1750" y="767.3794">verify URL validity</text><polygon fill="#A80036" points="1545,797.4453,1535,801.4453,1545,805.4453,1541,801.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1539" x2="1738.5" y1="801.4453" y2="801.4453"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1551" y="796.5122">11</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="108" x="1573" y="796.5122">“PING” response</text><polygon fill="#A80036" points="526.5,826.5781,516.5,830.5781,526.5,834.5781,522.5,830.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="520.5" x2="1533" y1="830.5781" y2="830.5781"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="532.5" y="825.645">12</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="25" x="554.5" y="825.645">URL</text><polygon fill="#A80036" points="842.5,860.7109,852.5,860.7109,842.5,864.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="853.5" y1="859.7109" y2="859.7109"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="854.7778">13</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="544.5" y="854.7778">3DS redirect (PAReq message)</text><polygon fill="#A80036" points="1136.5,884.8438,1146.5,888.8438,1136.5,892.8438,1140.5,888.8438" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="854.5" x2="1142.5" y1="888.8438" y2="888.8438"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="861.5" y="883.9106">14</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="883.5" y="883.9106">3DS redirect (PAReq message)</text><polygon fill="#A80036" points="1727.5,913.9766,1737.5,917.9766,1727.5,921.9766,1731.5,917.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1148.5" x2="1733.5" y1="917.9766" y2="917.9766"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1155.5" y="913.0435">15</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="72" x="1177.5" y="913.0435">3DS invoke</text><polygon fill="#A80036" points="1159.5,943.1094,1149.5,947.1094,1159.5,947.1094" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1148.5" x2="1738.5" y1="947.1094" y2="947.1094"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1165.5" y="942.1763">16</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="92" x="1187.5" y="942.1763">3DS challenge</text><polygon fill="#A80036" points="1727.5,977.2422,1737.5,977.2422,1727.5,981.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1148.5" x2="1738.5" y1="976.2422" y2="976.2422"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1155.5" y="971.3091">17</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="1177.5" y="971.3091">3DS response (PARes message)</text><polygon fill="#A80036" points="1159.5,1001.375,1149.5,1005.375,1159.5,1009.375,1155.5,1005.375" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1153.5" x2="1738.5" y1="1005.375" y2="1005.375"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="1165.5" y="1000.4419">18</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="1187.5" y="1000.4419">3DS response (PARes message)</text><polygon fill="#A80036" points="865.5,1030.5078,855.5,1034.5078,865.5,1038.5078,861.5,1034.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="859.5" x2="1147.5" y1="1034.5078" y2="1034.5078"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="871.5" y="1029.5747">19</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="893.5" y="1029.5747">3DS response (PARes message)</text><polygon fill="#A80036" points="526.5,1059.6406,516.5,1063.6406,526.5,1063.6406" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="853.5" y1="1063.6406" y2="1063.6406"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="532.5" y="1058.7075">20</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="554.5" y="1058.7075">3DS response (PARes message)</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="557.5" y1="1092.9063" y2="1092.9063"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="557.5" x2="557.5" y1="1092.9063" y2="1105.9063"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="516.5" x2="557.5" y1="1105.9063" y2="1105.9063"/><polygon fill="#A80036" points="526.5,1101.9063,516.5,1105.9063,526.5,1109.9063,522.5,1105.9063" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="1087.8403">21</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="195" x="544.5" y="1087.8403">Verification of PARes signature</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="1134.4727"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1134.4727" y2="1134.4727"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1137.4727" y2="1137.4727"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="101" x="1075.5" y="1123.9063"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="82" x="1081.5" y="1139.9731">End of 3DS</text><polygon fill="#A80036" points="1925.5,1174.0391,1935.5,1178.0391,1925.5,1178.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="1936.5" y1="1178.0391" y2="1178.0391"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="1173.106">22</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="141" x="544.5" y="1173.106">Authorisation Request</text><polygon fill="#A80036" points="526.5,1208.1719,516.5,1208.1719,526.5,1212.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="1936.5" y1="1207.1719" y2="1207.1719"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="532.5" y="1202.2388">23</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="151" x="554.5" y="1202.2388">Authorisation Response</text><polygon fill="#A80036" points="842.5,1237.3047,852.5,1237.3047,842.5,1241.3047" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="853.5" y1="1236.3047" y2="1236.3047"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="1231.3716">24</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="151" x="544.5" y="1231.3716">Authorisation Response</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="1265.0039"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1265.0039" y2="1265.0039"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1268.0039" y2="1268.0039"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="104" x="1074" y="1254.4375"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="85" x="1080" y="1270.5044">Notification</text><polygon fill="#A80036" points="1136.5,1304.5703,1146.5,1308.5703,1136.5,1312.5703,1140.5,1308.5703" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="854.5" x2="1142.5" y1="1308.5703" y2="1308.5703"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="861.5" y="1303.6372">25</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="75" x="883.5" y="1303.6372">Result Page</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="1337.2695"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1337.2695" y2="1337.2695"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1340.2695" y2="1340.2695"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="704" x="774" y="1326.7031"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="685" x="780" y="1342.77">Request for Settlement process (could be immediate, batch (e.g. daily) or after some days)</text><rect fill="none" height="96.3984" style="stroke: #000000; stroke-width: 2.0;" width="1016.5" x="387" y="1366.8359"/><polygon fill="#EEEEEE" points="387,1366.8359,451,1366.8359,451,1373.8359,441,1383.8359,387,1383.8359,387,1366.8359" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="19" x="402" y="1379.9028">alt</text><polygon fill="#A80036" points="526.5,1403.9688,516.5,1407.9688,526.5,1411.9688,522.5,1407.9688" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="520.5" x2="853.5" y1="1407.9688" y2="1407.9688"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="532.5" y="1403.0356">26</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="51" x="554.5" y="1403.0356">Capture</text><polygon fill="#FBFB77" points="859,1388.9688,859,1413.9688,1393,1413.9688,1393,1398.9688,1383,1388.9688,859,1388.9688" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1383" x2="1383" y1="1388.9688" y2="1398.9688"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1393" x2="1383" y1="1398.9688" y2="1398.9688"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="513" x="865" y="1406.0356">Later Capture may be called, for example after good shipped or tickets pickedup</text><line style="stroke: #000000; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="387" x2="1403.5" y1="1420.1016" y2="1420.1016"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="557.5" y1="1442.2344" y2="1442.2344"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="557.5" x2="557.5" y1="1442.2344" y2="1455.2344"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="516.5" x2="557.5" y1="1455.2344" y2="1455.2344"/><polygon fill="#A80036" points="526.5,1451.2344,516.5,1455.2344,526.5,1459.2344,522.5,1455.2344" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="1437.1685">27</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="303" x="544.5" y="1437.1685">Auto Capture in batch processing at end-of-day</text><polygon fill="#A80036" points="1925.5,1487.2344,1935.5,1491.2344,1925.5,1495.2344,1929.5,1491.2344" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="515.5" x2="1931.5" y1="1491.2344" y2="1491.2344"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="522.5" y="1486.3013">28</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="51" x="544.5" y="1486.3013">Capture</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="2246" x="3" y="1519.9336"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1519.9336" y2="1519.9336"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="2249" y1="1522.9336" y2="1522.9336"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="93" x="1079.5" y="1509.3672"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="74" x="1085.5" y="1525.4341">Fulfilment</text><polygon fill="#A80036" points="1136.5,1559.5,1146.5,1563.5,1136.5,1567.5,1140.5,1563.5" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="854.5" x2="1142.5" y1="1563.5" y2="1563.5"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="861.5" y="1558.5669">29</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="180" x="883.5" y="1558.5669">Provide products or services</text></g></svg>
\ No newline at end of file diff --git a/articles/ui/figs/fulfillment.png b/articles/ui/figs/fulfillment.png Binary files differnew file mode 100644 index 000000000..5ac058844 --- /dev/null +++ b/articles/ui/figs/fulfillment.png diff --git a/articles/ui/figs/pay.png b/articles/ui/figs/pay.png Binary files differnew file mode 100644 index 000000000..1efdf9610 --- /dev/null +++ b/articles/ui/figs/pay.png diff --git a/articles/ui/figs/paypal.pdf b/articles/ui/figs/paypal.pdf Binary files differnew file mode 100644 index 000000000..1145b50c4 --- /dev/null +++ b/articles/ui/figs/paypal.pdf diff --git a/articles/ui/figs/paypal.pml b/articles/ui/figs/paypal.pml new file mode 100644 index 000000000..040bf6208 --- /dev/null +++ b/articles/ui/figs/paypal.pml @@ -0,0 +1,64 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Participant "Payee (Merchant) Site" as Payee +Actor "Payer (Shopper) Browser" as Payer +participant "Payer (Shopper) PSP (PayPal)" as CPSP + +note over MPSP, CPSP: HTTPS + +title PayPal Payment (REST API) (Current) + +Payee->Payer: Present Checkout Page with Pay Button + +Payer->Payer: Select PayPal Payment Method + +Payer-\Payee: Payment Page Request + +Payee<->CPSP: Create Payment + +Payee-/Payer: HTTP Redirect + +Note right: HTTP Direct now send the shopper to the PayPal site + +Payer-\CPSP: Payment Initiation + +CPSP-/Payer: Authentication Page + +Payer-\CPSP: Authenticate +note right: Typically a username & password + +CPSP-/Payer: Payment Page + +opt + Payer<->CPSP: Instrument Choice + note right: Payer can change from default payment instrument +end + +Payer->Payer: Approval + +Payer-\CPSP: Payment Approval + +CPSP-/Payer: Payment Response Redirect + +Payer-\Payee: Payment Response + +Payee<->CPSP: Execute Payment + +Payee-/Payer: Result Page + + +... asynchronous notification ... + +CPSP->Payer: Payment Notification (email) + +Opt + Payee->Payer: Payment Notification (email) +End + +Note right: Provides out of band confirmation to protect against failure/modification at browser + + +@enduml diff --git a/articles/ui/figs/paypal.svg b/articles/ui/figs/paypal.svg new file mode 100644 index 000000000..656ccc355 --- /dev/null +++ b/articles/ui/figs/paypal.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="915px" style="width:990px;height:915px;" version="1.1" viewBox="0 0 990 915" width="990px"><defs/><g><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="288" x="357.25" y="22.9951">PayPal Payment (REST API) (Current)</text><rect fill="#FFFFFF" height="52.2656" style="stroke: #000000; stroke-width: 2.0;" width="694" x="295.5" y="451.9219"/><rect fill="#FFFFFF" height="46.2656" style="stroke: #000000; stroke-width: 2.0;" width="480.5" x="13" y="775.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105" x2="105" y1="112.5938" y2="698.9844"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 1.0,4.0;" x1="105" x2="105" y1="698.9844" y2="739.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105" x2="105" y1="739.7891" y2="839.1875"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="394.5" y1="112.5938" y2="698.9844"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 1.0,4.0;" x1="394.5" x2="394.5" y1="698.9844" y2="739.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="394.5" y1="739.7891" y2="839.1875"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="622.5" x2="622.5" y1="112.5938" y2="698.9844"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 1.0,4.0;" x1="622.5" x2="622.5" y1="698.9844" y2="739.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="622.5" x2="622.5" y1="739.7891" y2="839.1875"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="765.5" x2="765.5" y1="112.5938" y2="698.9844"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 1.0,4.0;" x1="765.5" x2="765.5" y1="698.9844" y2="739.7891"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="765.5" x2="765.5" y1="739.7891" y2="839.1875"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="23" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="30" y="101.292">Payee (Merchant) Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="23" y="838.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="30" y="858.1826">Payee (Merchant) Site</text><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="305.5" y="109.292">Payer (Shopper) Browser</text><ellipse cx="394.5" cy="43.2969" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M394.5,51.2969 L394.5,78.2969 M381.5,59.2969 L407.5,59.2969 M394.5,78.2969 L381.5,93.2969 M394.5,78.2969 L407.5,93.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="305.5" y="851.1826">Payer (Shopper) Browser</text><ellipse cx="394.5" cy="864.4844" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M394.5,872.4844 L394.5,899.4844 M381.5,880.4844 L407.5,880.4844 M394.5,899.4844 L381.5,914.4844 M394.5,899.4844 L407.5,914.4844 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="214" x="515.5" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="200" x="522.5" y="101.292">Payer (Shopper) PSP (PayPal)</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="214" x="515.5" y="838.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="200" x="522.5" y="858.1826">Payer (Shopper) PSP (PayPal)</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="53" x="739.5" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="39" x="746.5" y="101.292">MPSP</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="53" x="739.5" y="838.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="39" x="746.5" y="858.1826">MPSP</text><polygon fill="#FBFB77" points="558,127.5938,558,152.5938,830,152.5938,830,137.5938,820,127.5938,558,127.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="820" x2="820" y1="127.5938" y2="137.5938"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="830" x2="820" y1="137.5938" y2="137.5938"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="669" y="144.6606">HTTPS</text><polygon fill="#A80036" points="382.5,174.7266,392.5,178.7266,382.5,182.7266,386.5,178.7266" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="388.5" y1="178.7266" y2="178.7266"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="112.5" y="173.7935">1</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="252" x="125.5" y="173.7935">Present Checkout Page with Pay Button</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="436.5" y1="207.9922" y2="207.9922"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="436.5" x2="436.5" y1="207.9922" y2="220.9922"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="395.5" x2="436.5" y1="220.9922" y2="220.9922"/><polygon fill="#A80036" points="405.5,216.9922,395.5,220.9922,405.5,224.9922,401.5,220.9922" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="401.5" y="202.9263">2</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="199" x="414.5" y="202.9263">Select PayPal Payment Method</text><polygon fill="#A80036" points="116.5,245.9922,106.5,249.9922,116.5,249.9922" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="393.5" y1="249.9922" y2="249.9922"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="122.5" y="245.0591">3</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="149" x="135.5" y="245.0591">Payment Page Request</text><polygon fill="#A80036" points="116.5,275.125,106.5,279.125,116.5,283.125,112.5,279.125" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="#A80036" points="610.5,275.125,620.5,279.125,610.5,283.125,614.5,279.125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="110.5" x2="616.5" y1="279.125" y2="279.125"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="122.5" y="274.1919">4</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="104" x="135.5" y="274.1919">Create Payment</text><polygon fill="#A80036" points="382.5,312.2578,392.5,312.2578,382.5,316.2578" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="393.5" y1="311.2578" y2="311.2578"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="112.5" y="306.3247">5</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="88" x="125.5" y="306.3247">HTTP Redirect</text><polygon fill="#FBFB77" points="399,292.2578,399,317.2578,754,317.2578,754,302.2578,744,292.2578,399,292.2578" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="744" x2="744" y1="292.2578" y2="302.2578"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="754" x2="744" y1="302.2578" y2="302.2578"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="334" x="405" y="309.3247">HTTP Direct now send the shopper to the PayPal site</text><polygon fill="#A80036" points="610.5,339.3906,620.5,343.3906,610.5,343.3906" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="343.3906" y2="343.3906"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="401.5" y="338.4575">6</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="115" x="414.5" y="338.4575">Payment Initiation</text><polygon fill="#A80036" points="405.5,373.5234,395.5,373.5234,405.5,377.5234" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="372.5234" y2="372.5234"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="411.5" y="367.5903">7</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="129" x="424.5" y="367.5903">Authentication Page</text><polygon fill="#A80036" points="610.5,400.6563,620.5,404.6563,610.5,404.6563" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="404.6563" y2="404.6563"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="401.5" y="399.7231">8</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="82" x="414.5" y="399.7231">Authenticate</text><polygon fill="#FBFB77" points="627,385.6563,627,410.6563,861,410.6563,861,395.6563,851,385.6563,627,385.6563" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="851" x2="851" y1="385.6563" y2="395.6563"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="861" x2="851" y1="395.6563" y2="395.6563"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="213" x="633" y="402.7231">Typically a username & password</text><polygon fill="#A80036" points="405.5,437.7891,395.5,437.7891,405.5,441.7891" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="436.7891" y2="436.7891"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="411.5" y="431.856">9</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="93" x="424.5" y="431.856">Payment Page</text><rect fill="none" height="52.2656" style="stroke: #000000; stroke-width: 2.0;" width="694" x="295.5" y="451.9219"/><polygon fill="#EEEEEE" points="295.5,451.9219,365.5,451.9219,365.5,458.9219,355.5,468.9219,295.5,468.9219,295.5,451.9219" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="310.5" y="464.9888">opt</text><polygon fill="#A80036" points="405.5,489.0547,395.5,493.0547,405.5,497.0547,401.5,493.0547" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="#A80036" points="610.5,489.0547,620.5,493.0547,610.5,497.0547,614.5,493.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="399.5" x2="616.5" y1="493.0547" y2="493.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="411.5" y="488.1216">10</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="433.5" y="488.1216">Instrument Choice</text><polygon fill="#FBFB77" points="627,474.0547,627,499.0547,979,499.0547,979,484.0547,969,474.0547,627,474.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="969" x2="969" y1="474.0547" y2="484.0547"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="979" x2="969" y1="484.0547" y2="484.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="331" x="633" y="491.1216">Payer can change from default payment instrument</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="436.5" y1="532.3203" y2="532.3203"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="436.5" x2="436.5" y1="532.3203" y2="545.3203"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="395.5" x2="436.5" y1="545.3203" y2="545.3203"/><polygon fill="#A80036" points="405.5,541.3203,395.5,545.3203,405.5,549.3203,401.5,545.3203" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="401.5" y="527.2544">11</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="56" x="423.5" y="527.2544">Approval</text><polygon fill="#A80036" points="610.5,570.3203,620.5,574.3203,610.5,574.3203" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="574.3203" y2="574.3203"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="401.5" y="569.3872">12</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="423.5" y="569.3872">Payment Approval</text><polygon fill="#A80036" points="405.5,604.4531,395.5,604.4531,405.5,608.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="394.5" x2="621.5" y1="603.4531" y2="603.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="411.5" y="598.52">13</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="179" x="433.5" y="598.52">Payment Response Redirect</text><polygon fill="#A80036" points="116.5,628.5859,106.5,632.5859,116.5,632.5859" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="393.5" y1="632.5859" y2="632.5859"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="122.5" y="627.6528">14</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="123" x="144.5" y="627.6528">Payment Response</text><polygon fill="#A80036" points="116.5,657.7188,106.5,661.7188,116.5,665.7188,112.5,661.7188" style="stroke: #A80036; stroke-width: 1.0;"/><polygon fill="#A80036" points="610.5,657.7188,620.5,661.7188,610.5,665.7188,614.5,661.7188" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="110.5" x2="616.5" y1="661.7188" y2="661.7188"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="122.5" y="656.7856">15</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="112" x="144.5" y="656.7856">Execute Payment</text><polygon fill="#A80036" points="382.5,691.8516,392.5,691.8516,382.5,695.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="393.5" y1="690.8516" y2="690.8516"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="112.5" y="685.9185">16</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="75" x="134.5" y="685.9185">Result Page</text><text fill="#000000" font-family="Lucida Sans" font-size="11" lengthAdjust="spacingAndGlyphs" textLength="146" x="362.75" y="723.1948">asynchronous notification</text><polygon fill="#A80036" points="405.5,756.7891,395.5,760.7891,405.5,764.7891,401.5,760.7891" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="399.5" x2="621.5" y1="760.7891" y2="760.7891"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="411.5" y="755.856">17</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="182" x="433.5" y="755.856">Payment Notification (email)</text><rect fill="none" height="46.2656" style="stroke: #000000; stroke-width: 2.0;" width="480.5" x="13" y="775.9219"/><polygon fill="#EEEEEE" points="13,775.9219,83,775.9219,83,782.9219,73,792.9219,13,792.9219,13,775.9219" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="788.9888">opt</text><polygon fill="#A80036" points="382.5,810.0547,392.5,814.0547,382.5,818.0547,386.5,814.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="105.5" x2="388.5" y1="814.0547" y2="814.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="112.5" y="809.1216">18</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="182" x="134.5" y="809.1216">Payment Notification (email)</text></g></svg>
\ No newline at end of file diff --git a/articles/ui/figs/taler-contract.js b/articles/ui/figs/taler-contract.js new file mode 100644 index 000000000..aaf4b79c3 --- /dev/null +++ b/articles/ui/figs/taler-contract.js @@ -0,0 +1,35 @@ +/* Trigger Taler contract generation on the server, and pass the + contract to the extension once we got it. */ +function taler_pay(form) { + var contract_request = new XMLHttpRequest(); + + /* Note that the URL we give here is simply an example + and not dictated by the protocol: each web shop can + have its own way of generating and transmitting the + contract, there just must be a way to get the contract + and to pass it to the wallet when the user selects 'Pay'. */ + contract_request.open("GET", "generate-taler-contract", true); + contract_request.onload = function (e) { + if (contract_request.readyState == 4) { + if (contract_request.status == 200) { + /* Send contract to the extension. */ + handle_contract(contract_request.responseText); + } else { + /* There was an error obtaining the contract from the merchant, + obviously this should not happen. To keep it simple, we just + alert the user to the error. */ + alert("Failure to download contract " + + "(" + contract_request.status + "):\n" + + contract_request.responseText); + } + } + }; + contract_request.onerror = function (e) { + /* There was an error obtaining the contract from the merchant, + obviously this should not happen. To keep it simple, we just + alert the user to the error. */ + alert("Failure requesting the contract:\n" + + contract_request.statusText); + }; + contract_request.send(); +} diff --git a/articles/ui/figs/taler-pay.pdf b/articles/ui/figs/taler-pay.pdf Binary files differnew file mode 100644 index 000000000..590fff216 --- /dev/null +++ b/articles/ui/figs/taler-pay.pdf diff --git a/articles/ui/figs/taler-pay.svg b/articles/ui/figs/taler-pay.svg new file mode 100644 index 000000000..e3627720f --- /dev/null +++ b/articles/ui/figs/taler-pay.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="729px" style="width:757px;height:729px;" version="1.1" viewBox="0 0 757 729" width="757px"><defs/><g><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="125" x="317" y="22.9951">Taler (Payment)</text><rect fill="#FFFFFF" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="522" x="13" y="242.9922"/><rect fill="#FFFFFF" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="226" x="13" y="417.6563"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="112" x2="112" y1="112.5938" y2="653.5859"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="529.5" x2="529.5" y1="112.5938" y2="653.5859"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="682.5" x2="682.5" y1="112.5938" y2="653.5859"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="23" y="109.292">Payer (Shopper) Browser</text><ellipse cx="112" cy="43.2969" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M112,51.2969 L112,78.2969 M99,59.2969 L125,59.2969 M112,78.2969 L99,93.2969 M112,78.2969 L125,93.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="23" y="665.5811">Payer (Shopper) Browser</text><ellipse cx="112" cy="678.8828" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M112,686.8828 L112,713.8828 M99,694.8828 L125,694.8828 M112,713.8828 L99,728.8828 M112,713.8828 L125,728.8828 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="447.5" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="454.5" y="101.292">Payee (Merchant) Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="447.5" y="652.5859"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="454.5" y="672.5811">Payee (Merchant) Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="622.5" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="629.5" y="101.292">Taler Exchange</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="622.5" y="652.5859"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="629.5" y="672.5811">Taler Exchange</text><polygon fill="#FBFB77" points="28,127.5938,28,152.5938,612,152.5938,612,137.5938,602,127.5938,28,127.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="602" x2="602" y1="127.5938" y2="137.5938"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="612" x2="602" y1="137.5938" y2="137.5938"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="283.25" y="144.6606">Tor/HTTPS</text><polygon fill="#FBFB77" points="461,162.7266,461,187.7266,751,187.7266,751,172.7266,741,162.7266,461,162.7266" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="741" x2="741" y1="162.7266" y2="172.7266"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="751" x2="741" y1="172.7266" y2="172.7266"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="77" x="563" y="179.7935">HTTP/HTTPS</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="753" x="3" y="213.4258"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="213.4258" y2="213.4258"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="216.4258" y2="216.4258"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="237" x="261" y="202.8594"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="218" x="267" y="218.9263">Establish Payment Obligation</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="522" x="13" y="242.9922"/><polygon fill="#EEEEEE" points="13,242.9922,83,242.9922,83,249.9922,73,259.9922,13,259.9922,13,242.9922" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="256.0591">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="154" y1="281.2578" y2="281.2578"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="154" x2="154" y1="281.2578" y2="294.2578"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="113" x2="154" y1="294.2578" y2="294.2578"/><polygon fill="#A80036" points="123,290.2578,113,294.2578,123,298.2578,119,294.2578" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="119" y="276.1919">1</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="391" x="132" y="276.1919">Select Taler payment method (skippable with auto-detection)</text><polygon fill="#A80036" points="518,326.2578,528,330.2578,518,334.2578,522,330.2578" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="524" y1="330.2578" y2="330.2578"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="119" y="325.3247">2</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="91" x="132" y="325.3247">Choose goods</text><polygon fill="#A80036" points="123,355.3906,113,359.3906,123,363.3906,119,359.3906" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="529" y1="359.3906" y2="359.3906"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="129" y="354.4575">3</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="237" x="142" y="354.4575">Send signed digital contract proposal</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="753" x="3" y="388.0898"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="388.0898" y2="388.0898"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="391.0898" y2="391.0898"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="147" x="306" y="377.5234"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="128" x="312" y="393.5903">Execute Payment</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="226" x="13" y="417.6563"/><polygon fill="#EEEEEE" points="13,417.6563,83,417.6563,83,424.6563,73,434.6563,13,434.6563,13,417.6563" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="430.7231">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="154" y1="455.9219" y2="455.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="154" x2="154" y1="455.9219" y2="468.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="113" x2="154" y1="468.9219" y2="468.9219"/><polygon fill="#A80036" points="123,464.9219,113,468.9219,123,472.9219,119,468.9219" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="119" y="450.856">4</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="95" x="132" y="450.856">Affirm contract</text><polygon fill="#A80036" points="518,500.9219,528,504.9219,518,508.9219,522,504.9219" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="524" y1="504.9219" y2="504.9219"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="119" y="499.9888">5</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="94" x="132" y="499.9888">Send payment</text><polygon fill="#A80036" points="670.5,530.0547,680.5,534.0547,670.5,538.0547,674.5,534.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="530" x2="676.5" y1="534.0547" y2="534.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="537" y="529.1216">6</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="550" y="529.1216">Forward payment</text><polygon fill="#A80036" points="541,559.1875,531,563.1875,541,567.1875,537,563.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="535" x2="681.5" y1="563.1875" y2="563.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="547" y="558.2544">7</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="560" y="558.2544">Confirm payment</text><rect fill="#FFFFFF" height="3" style="stroke: #FFFFFF; stroke-width: 1.0;" width="753" x="3" y="591.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="591.8867" y2="591.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="756" y1="594.8867" y2="594.8867"/><rect fill="#FFFFFF" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="93" x="333" y="581.3203"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="74" x="339" y="597.3872">Fulfilment</text><polygon fill="#A80036" points="123,631.4531,113,635.4531,123,639.4531,119,635.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="529" y1="635.4531" y2="635.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="129" y="630.52">8</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="180" x="142" y="630.52">Provide products or services</text></g></svg>
\ No newline at end of file diff --git a/articles/ui/figs/taler-presence.js b/articles/ui/figs/taler-presence.js new file mode 100644 index 000000000..2301bd27d --- /dev/null +++ b/articles/ui/figs/taler-presence.js @@ -0,0 +1,35 @@ +function handleInstall() { + var show = document.getElementsByClassName("taler-installed-show"); + var hide = document.getElementsByClassName("taler-installed-hide"); + for (var i = 0; i < show.length; i++) { + show[i].style.display = ""; + } + for (var i = 0; i < hide.length; i++) { + hide[i].style.display = "none"; + } +}; + +function handleUninstall() { + var show = document.getElementsByClassName("taler-installed-show"); + var hide = document.getElementsByClassName("taler-installed-hide"); + for (var i = 0; i < show.length; i++) { + show[i].style.display = "none"; + } + for (var i = 0; i < hide.length; i++) { + hide[i].style.display = ""; + } +}; + +function probeTaler() { + var eve = new Event("taler-probe"); + document.dispatchEvent(eve); +}; + +function initTaler() { + handleUninstall(); probeTaler(); +}; + +document.addEventListener("taler-wallet-present", handleInstall, false); +document.addEventListener("taler-unload", handleUninstall, false); +document.addEventListener("taler-load", handleInstall, false); +window.addEventListener("load", initTaler, false); diff --git a/articles/ui/figs/taler-withdraw.pdf b/articles/ui/figs/taler-withdraw.pdf Binary files differnew file mode 100644 index 000000000..1bf3ee484 --- /dev/null +++ b/articles/ui/figs/taler-withdraw.pdf diff --git a/articles/ui/figs/taler-withdraw.svg b/articles/ui/figs/taler-withdraw.svg new file mode 100644 index 000000000..2b9ac476b --- /dev/null +++ b/articles/ui/figs/taler-withdraw.svg @@ -0,0 +1 @@ +<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="649px" style="width:677px;height:649px;" version="1.1" viewBox="0 0 677 649" width="677px"><defs/><g><text fill="#000000" font-family="Lucida Sans" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="179" x="253.25" y="22.9951">Taler (Withdraw coins)</text><rect fill="#FFFFFF" height="75.3984" style="stroke: #000000; stroke-width: 2.0;" width="473" x="13" y="422.7891"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="90" x2="90" y1="112.5938" y2="573.4531"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="436" x2="436" y1="112.5938" y2="573.4531"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="616.5" x2="616.5" y1="112.5938" y2="573.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="129" x="23" y="109.292">Customer Browser</text><ellipse cx="90.5" cy="43.2969" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M90.5,51.2969 L90.5,78.2969 M77.5,59.2969 L103.5,59.2969 M90.5,78.2969 L77.5,93.2969 M90.5,78.2969 L103.5,93.2969 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="129" x="23" y="585.4482">Customer Browser</text><ellipse cx="90.5" cy="598.75" fill="#FEFECE" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M90.5,606.75 L90.5,633.75 M77.5,614.75 L103.5,614.75 M90.5,633.75 L77.5,648.75 M90.5,633.75 L103.5,648.75 " fill="#FEFECE" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="397" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="404" y="101.292">Bank Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="397" y="572.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="404" y="592.4482">Bank Site</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="556.5" y="81.2969"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="563.5" y="101.292">Taler Exchange</text><rect fill="#FEFECE" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="556.5" y="572.4531"/><text fill="#000000" font-family="Lucida Sans" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="563.5" y="592.4482">Taler Exchange</text><polygon fill="#FBFB77" points="39,127.5938,39,152.5938,487,152.5938,487,137.5938,477,127.5938,39,127.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="477" x2="477" y1="127.5938" y2="137.5938"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="487" x2="477" y1="137.5938" y2="137.5938"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="238" y="144.6606">HTTPS</text><polygon fill="#FBFB77" points="29,162.7266,29,187.7266,677,187.7266,677,172.7266,667,162.7266,29,162.7266" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="667" x2="667" y1="162.7266" y2="172.7266"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="677" x2="667" y1="172.7266" y2="172.7266"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="328.25" y="179.7935">HTTPS</text><polygon fill="#FBFB77" points="389,197.8594,389,222.8594,663,222.8594,663,207.8594,653,197.8594,389,197.8594" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="653" x2="653" y1="197.8594" y2="207.8594"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="663" x2="653" y1="207.8594" y2="207.8594"/><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="34" x="504.75" y="214.9263">SEPA</text><polygon fill="#A80036" points="424.5,244.9922,434.5,248.9922,424.5,252.9922,428.5,248.9922" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="430.5" y1="248.9922" y2="248.9922"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="97.5" y="244.0591">1</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="124" x="110.5" y="244.0591">user authentication</text><polygon fill="#A80036" points="101.5,274.125,91.5,278.125,101.5,282.125,97.5,278.125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="435.5" y1="278.125" y2="278.125"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="107.5" y="273.1919">2</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="127" x="120.5" y="273.1919">send account portal</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="132.5" y1="307.3906" y2="307.3906"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="132.5" x2="132.5" y1="307.3906" y2="320.3906"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="91.5" x2="132.5" y1="320.3906" y2="320.3906"/><polygon fill="#A80036" points="101.5,316.3906,91.5,320.3906,101.5,324.3906,97.5,320.3906" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="97.5" y="302.3247">3</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="319" x="110.5" y="302.3247">initiate withdrawal (specify amount and exchange)</text><polygon fill="#A80036" points="604.5,345.3906,614.5,349.3906,604.5,353.3906,608.5,349.3906" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="610.5" y1="349.3906" y2="349.3906"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="97.5" y="344.4575">4</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="276" x="110.5" y="344.4575">request key material and wire transfer data</text><polygon fill="#A80036" points="101.5,374.5234,91.5,378.5234,101.5,382.5234,97.5,378.5234" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="615.5" y1="378.5234" y2="378.5234"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="107.5" y="373.5903">5</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="258" x="120.5" y="373.5903">send key material and wire transfer data</text><polygon fill="#A80036" points="424.5,403.6563,434.5,407.6563,424.5,411.6563,428.5,407.6563" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="430.5" y1="407.6563" y2="407.6563"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="97.5" y="402.7231">6</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="121" x="110.5" y="402.7231">execute withdrawal</text><rect fill="none" height="75.3984" style="stroke: #000000; stroke-width: 2.0;" width="473" x="13" y="422.7891"/><polygon fill="#EEEEEE" points="13,422.7891,83,422.7891,83,429.7891,73,439.7891,13,439.7891,13,422.7891" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="435.856">opt</text><polygon fill="#A80036" points="101.5,456.9219,91.5,460.9219,101.5,464.9219,97.5,460.9219" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="435.5" y1="460.9219" y2="460.9219"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="107.5" y="455.9888">7</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="213" x="120.5" y="455.9888">request transaction authorization</text><polygon fill="#A80036" points="424.5,486.0547,434.5,490.0547,424.5,494.0547,428.5,490.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="430.5" y1="490.0547" y2="490.0547"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="97.5" y="485.1216">8</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="160" x="110.5" y="485.1216">transaction authorization</text><polygon fill="#A80036" points="101.5,522.1875,91.5,526.1875,101.5,530.1875,97.5,526.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="435.5" y1="526.1875" y2="526.1875"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="9" x="107.5" y="521.2544">9</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="150" x="120.5" y="521.2544">withdrawal confirmation</text><polygon fill="#A80036" points="604.5,551.3203,614.5,555.3203,604.5,559.3203,608.5,555.3203" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="436.5" x2="610.5" y1="555.3203" y2="555.3203"/><text fill="#000000" font-family="Lucida Sans" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="18" x="443.5" y="550.3872">10</text><text fill="#000000" font-family="Lucida Sans" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="134" x="465.5" y="550.3872">execute wire transfer</text></g></svg>
\ No newline at end of file |
