diff options
Diffstat (limited to 'contrib/articles/ui/figs')
31 files changed, 346 insertions, 0 deletions
diff --git a/contrib/articles/ui/figs/Makefile b/contrib/articles/ui/figs/Makefile new file mode 100644 index 000000000..bf5ac5261 --- /dev/null +++ b/contrib/articles/ui/figs/Makefile @@ -0,0 +1,15 @@ + +plantuml = plantuml + +%.svg : %.pml + $(plantuml) -tsvg $< + +%.pdf : %.pml + $(plantuml) -tpdf $< + +files = taler-pay.pml taler-withdraw.pml \ +cc3ds.pml contract.pml paypal.pml \ +bitcoin.pml + +all : $(files:.pml=.pdf) $(files:.pml=.svg) + diff --git a/contrib/articles/ui/figs/bank0a.png b/contrib/articles/ui/figs/bank0a.png Binary files differnew file mode 100644 index 000000000..b679304d0 --- /dev/null +++ b/contrib/articles/ui/figs/bank0a.png diff --git a/contrib/articles/ui/figs/bank1.png b/contrib/articles/ui/figs/bank1.png Binary files differnew file mode 100644 index 000000000..84bc7a189 --- /dev/null +++ b/contrib/articles/ui/figs/bank1.png diff --git a/contrib/articles/ui/figs/bank1a.png b/contrib/articles/ui/figs/bank1a.png Binary files differnew file mode 100644 index 000000000..b91adfff6 --- /dev/null +++ b/contrib/articles/ui/figs/bank1a.png diff --git a/contrib/articles/ui/figs/bank1b.png b/contrib/articles/ui/figs/bank1b.png Binary files differnew file mode 100644 index 000000000..a3adfe4e3 --- /dev/null +++ b/contrib/articles/ui/figs/bank1b.png diff --git a/contrib/articles/ui/figs/bank2.png b/contrib/articles/ui/figs/bank2.png Binary files differnew file mode 100644 index 000000000..126c9a059 --- /dev/null +++ b/contrib/articles/ui/figs/bank2.png diff --git a/contrib/articles/ui/figs/bank2a.png b/contrib/articles/ui/figs/bank2a.png Binary files differnew file mode 100644 index 000000000..087cef9e1 --- /dev/null +++ b/contrib/articles/ui/figs/bank2a.png diff --git a/contrib/articles/ui/figs/bank2b.png b/contrib/articles/ui/figs/bank2b.png Binary files differnew file mode 100644 index 000000000..eaa4ba475 --- /dev/null +++ b/contrib/articles/ui/figs/bank2b.png diff --git a/contrib/articles/ui/figs/bank3.png b/contrib/articles/ui/figs/bank3.png Binary files differnew file mode 100644 index 000000000..3b79c042f --- /dev/null +++ b/contrib/articles/ui/figs/bank3.png diff --git a/contrib/articles/ui/figs/bank3a.png b/contrib/articles/ui/figs/bank3a.png Binary files differnew file mode 100644 index 000000000..2d321a27a --- /dev/null +++ b/contrib/articles/ui/figs/bank3a.png diff --git a/contrib/articles/ui/figs/bank3b.png b/contrib/articles/ui/figs/bank3b.png Binary files differnew file mode 100644 index 000000000..78e7637cb --- /dev/null +++ b/contrib/articles/ui/figs/bank3b.png diff --git a/contrib/articles/ui/figs/bank4.png b/contrib/articles/ui/figs/bank4.png Binary files differnew file mode 100644 index 000000000..56c32e15c --- /dev/null +++ b/contrib/articles/ui/figs/bank4.png diff --git a/contrib/articles/ui/figs/bank4a.png b/contrib/articles/ui/figs/bank4a.png Binary files differnew file mode 100644 index 000000000..65f18684c --- /dev/null +++ b/contrib/articles/ui/figs/bank4a.png diff --git a/contrib/articles/ui/figs/bank4b.png b/contrib/articles/ui/figs/bank4b.png Binary files differnew file mode 100644 index 000000000..fde59ab7c --- /dev/null +++ b/contrib/articles/ui/figs/bank4b.png diff --git a/contrib/articles/ui/figs/bitcoin.pml b/contrib/articles/ui/figs/bitcoin.pml new file mode 100644 index 000000000..88707cda1 --- /dev/null +++ b/contrib/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/contrib/articles/ui/figs/bitcoin.svg b/contrib/articles/ui/figs/bitcoin.svg new file mode 100644 index 000000000..3f908b3df --- /dev/null +++ b/contrib/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/contrib/articles/ui/figs/cart.png b/contrib/articles/ui/figs/cart.png Binary files differnew file mode 100644 index 000000000..58beb3b1a --- /dev/null +++ b/contrib/articles/ui/figs/cart.png diff --git a/contrib/articles/ui/figs/cc3ds.pml b/contrib/articles/ui/figs/cc3ds.pml new file mode 100644 index 000000000..2a2ba3c17 --- /dev/null +++ b/contrib/articles/ui/figs/cc3ds.pml @@ -0,0 +1,95 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml + +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/contrib/articles/ui/figs/cc3ds.svg b/contrib/articles/ui/figs/cc3ds.svg new file mode 100644 index 000000000..31b11e02f --- /dev/null +++ b/contrib/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="1614px" style="width:1635px;height:1614px;" version="1.1" viewBox="0 0 1635 1614" width="1635px"><defs><filter height="300%" id="f1" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="625" x="504.25" y="22.9951">Legacy Merchant Hosted Card Payment with Acquirer Supported 3DS (Current)</text><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="0" x="819.25" y="39.292"/><text fill="#000000" font-family="sans-serif" font-size="14" font-style="italic" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="1115" x="259.25" 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" filter="url(#f1)" height="90.3984" style="stroke: #000000; stroke-width: 2.0;" width="447" x="597.5" y="319.7188"/><rect fill="#FFFFFF" height="44.1328" style="stroke: none; stroke-width: 1.0;" width="447" x="597.5" y="365.9844"/><rect fill="#FFFFFF" filter="url(#f1)" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="269" x="326" y="496.3828"/><rect fill="#FFFFFF" filter="url(#f1)" height="90.3984" style="stroke: #000000; stroke-width: 2.0;" width="582" x="13" y="1321.7031"/><rect fill="#FFFFFF" height="44.1328" style="stroke: none; stroke-width: 1.0;" width="582" x="13" y="1367.9688"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="143" x2="143" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="460" x2="460" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="741.5" x2="741.5" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="959.5" x2="959.5" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1132.5" x2="1132.5" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1342.5" x2="1342.5" y1="149.1875" y2="1530.5"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="1544.5" x2="1544.5" y1="149.1875" y2="1530.5"/><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="237" x="23" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="223" x="30" y="133.8857">Payee (Merchant) PSP [Acquirer]</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="237" x="23" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="223" x="30" y="1549.4951">Payee (Merchant) PSP [Acquirer]</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="245" x="336" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="227" x="343" y="133.8857">Payee (Merchant) [Acceptor] Site</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="245" x="336" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="227" x="343" y="1549.4951">Payee (Merchant) [Acceptor] Site</text><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="262" x="607.5" y="145.8857">Payer (Shopper) [Cardholder] Browser</text><ellipse cx="741.5" cy="75.8906" fill="#FEFECE" filter="url(#f1)" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M741.5,83.8906 L741.5,110.8906 M728.5,91.8906 L754.5,91.8906 M741.5,110.8906 L728.5,125.8906 M741.5,110.8906 L754.5,125.8906 " fill="#FEFECE" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="262" x="607.5" y="1542.4951">Payer (Shopper) [Cardholder] Browser</text><ellipse cx="741.5" cy="1555.7969" fill="#FEFECE" filter="url(#f1)" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M741.5,1563.7969 L741.5,1590.7969 M728.5,1571.7969 L754.5,1571.7969 M741.5,1590.7969 L728.5,1605.7969 M741.5,1590.7969 L754.5,1605.7969 " fill="#FEFECE" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="145" x="885.5" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="131" x="892.5" y="133.8857">Browser Form Filler</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="145" x="885.5" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="131" x="892.5" y="1549.4951">Browser Form Filler</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="173" x="1044.5" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="159" x="1051.5" y="133.8857">Card Scheme Directory</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="173" x="1044.5" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="159" x="1051.5" y="1549.4951">Card Scheme Directory</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="218" x="1231.5" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="204" x="1238.5" y="133.8857">Issuing Bank [Issuer] Website</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="218" x="1231.5" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="204" x="1238.5" y="1549.4951">Issuing Bank [Issuer] Website</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="158" x="1463.5" y="113.8906"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="144" x="1470.5" y="133.8857">Issuing Bank [Issuer]</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="158" x="1463.5" y="1529.5"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="144" x="1470.5" y="1549.4951">Issuing Bank [Issuer]</text><polygon fill="#FBFB77" filter="url(#f1)" points="333,164.1875,333,189.1875,867,189.1875,867,174.1875,857,164.1875,333,164.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="857" x2="857" y1="164.1875" y2="174.1875"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="867" x2="857" y1="174.1875" y2="174.1875"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="573.25" y="181.2544">HTTPS</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="218.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="218.8867" y2="218.8867"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="221.8867" y2="221.8867"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="237" x="698.25" y="208.3203"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="218" x="704.25" y="224.3872">Establish Payment Obligation</text><polygon fill="#A80036" points="729.5,258.4531,739.5,262.4531,729.5,266.4531,733.5,262.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="460.5" x2="735.5" y1="262.4531" y2="262.4531"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="257" x="467.5" y="257.52">Present Check-out page with Pay Button</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="741.5" x2="783.5" y1="291.7188" y2="291.7188"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="783.5" x2="783.5" y1="291.7188" y2="304.7188"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="742.5" x2="783.5" y1="304.7188" y2="304.7188"/><polygon fill="#A80036" points="752.5,300.7188,742.5,304.7188,752.5,308.7188,748.5,304.7188" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="187" x="748.5" y="286.6528">Select Card Payment Method</text><rect fill="none" height="90.3984" style="stroke: #000000; stroke-width: 2.0;" width="447" x="597.5" y="319.7188"/><polygon fill="#EEEEEE" points="597.5,319.7188,661.5,319.7188,661.5,326.7188,651.5,336.7188,597.5,336.7188,597.5,319.7188" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="19" x="612.5" y="332.7856">alt</text><polygon fill="#A80036" points="752.5,353.8516,742.5,357.8516,752.5,361.8516,748.5,357.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="746.5" x2="959" y1="357.8516" y2="357.8516"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="53" x="758.5" y="352.9185">Form Fill</text><line style="stroke: #000000; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="597.5" x2="1044.5" y1="366.9844" y2="366.9844"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="741.5" x2="783.5" y1="389.1172" y2="389.1172"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="783.5" x2="783.5" y1="389.1172" y2="402.1172"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="742.5" x2="783.5" y1="402.1172" y2="402.1172"/><polygon fill="#A80036" points="752.5,398.1172,742.5,402.1172,752.5,406.1172,748.5,402.1172" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="94" x="748.5" y="384.0513">User Fills Form</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="437.6836"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="437.6836" y2="437.6836"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="440.6836" y2="440.6836"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="193" x="720.25" y="427.1172"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="174" x="726.25" y="443.1841">Card Payment Initiation</text><polygon fill="#A80036" points="471.5,477.25,461.5,481.25,471.5,485.25,467.5,481.25" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="465.5" x2="740.5" y1="481.25" y2="481.25"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="115" x="477.5" y="476.3169">Payment Initiation</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="269" x="326" y="496.3828"/><polygon fill="#EEEEEE" points="326,496.3828,396,496.3828,396,503.3828,386,513.3828,326,513.3828,326,496.3828" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="341" y="509.4497">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="460.5" x2="502.5" y1="534.6484" y2="534.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="502.5" x2="502.5" y1="534.6484" y2="547.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="461.5" x2="502.5" y1="547.6484" y2="547.6484"/><polygon fill="#A80036" points="471.5,543.6484,461.5,547.6484,471.5,551.6484,467.5,547.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="69" x="467.5" y="529.5825">Store Card</text><polygon fill="#A80036" points="154.5,579.6484,144.5,583.6484,154.5,583.6484" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="459.5" y1="583.6484" y2="583.6484"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="61" x="160.5" y="578.7153">Authorise</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="612.3477"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="612.3477" y2="612.3477"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="615.3477" y2="615.3477"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="140" x="746.75" y="601.7813"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="121" x="752.75" y="617.8481">3DS part of flow</text><polygon fill="#A80036" points="1121,651.9141,1131,655.9141,1121,659.9141,1125,655.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="1127" y1="655.9141" y2="655.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="233" x="150.5" y="650.981">BIN to URL lookup (VAReq message)</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="1133" x2="1175" y1="685.1797" y2="685.1797"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1175" x2="1175" y1="685.1797" y2="698.1797"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1134" x2="1175" y1="698.1797" y2="698.1797"/><polygon fill="#A80036" points="1144,694.1797,1134,698.1797,1144,702.1797,1140,698.1797" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="135" x="1140" y="680.1138">Lookup URL from BIN</text><polygon fill="#A80036" points="1330.5,723.1797,1340.5,727.1797,1330.5,731.1797,1334.5,727.1797" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1133" x2="1336.5" y1="727.1797" y2="727.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="45" x="1140" y="722.2466">“PING”</text><polygon fill="#A80036" points="1144,752.3125,1134,756.3125,1144,760.3125,1140,756.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="1138" x2="1341.5" y1="756.3125" y2="756.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="108" x="1150" y="751.3794">“PING” response</text><polygon fill="#A80036" points="154.5,781.4453,144.5,785.4453,154.5,789.4453,150.5,785.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="148.5" x2="1132" y1="785.4453" y2="785.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="25" x="160.5" y="780.5122">URL</text><polygon fill="#A80036" points="448.5,815.5781,458.5,815.5781,448.5,819.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="459.5" y1="814.5781" y2="814.5781"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="150.5" y="809.645">3DS redirect (PAReq message)</text><polygon fill="#A80036" points="729.5,839.7109,739.5,843.7109,729.5,847.7109,733.5,843.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="460.5" x2="735.5" y1="843.7109" y2="843.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="198" x="467.5" y="838.7778">3DS redirect (PAReq message)</text><polygon fill="#A80036" points="1330.5,868.8438,1340.5,872.8438,1330.5,876.8438,1334.5,872.8438" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="741.5" x2="1336.5" y1="872.8438" y2="872.8438"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="72" x="748.5" y="867.9106">3DS invoke</text><polygon fill="#A80036" points="752.5,897.9766,742.5,901.9766,752.5,901.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="741.5" x2="1341.5" y1="901.9766" y2="901.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="92" x="758.5" y="897.0435">3DS challenge</text><polygon fill="#A80036" points="1330.5,932.1094,1340.5,932.1094,1330.5,936.1094" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="741.5" x2="1341.5" y1="931.1094" y2="931.1094"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="748.5" y="926.1763">3DS response (PARes message)</text><polygon fill="#A80036" points="752.5,956.2422,742.5,960.2422,752.5,964.2422,748.5,960.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="746.5" x2="1341.5" y1="960.2422" y2="960.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="758.5" y="955.3091">3DS response (PARes message)</text><polygon fill="#A80036" points="471.5,985.375,461.5,989.375,471.5,993.375,467.5,989.375" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="465.5" x2="740.5" y1="989.375" y2="989.375"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="477.5" y="984.4419">3DS response (PARes message)</text><polygon fill="#A80036" points="154.5,1014.5078,144.5,1018.5078,154.5,1018.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="459.5" y1="1018.5078" y2="1018.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="207" x="160.5" y="1013.5747">3DS response (PARes message)</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="185.5" y1="1047.7734" y2="1047.7734"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="185.5" x2="185.5" y1="1047.7734" y2="1060.7734"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="144.5" x2="185.5" y1="1060.7734" y2="1060.7734"/><polygon fill="#A80036" points="154.5,1056.7734,144.5,1060.7734,154.5,1064.7734,150.5,1060.7734" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="195" x="150.5" y="1042.7075">Verification of PARes signature</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="1089.3398"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1089.3398" y2="1089.3398"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1092.3398" y2="1092.3398"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="101" x="766.25" y="1078.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="82" x="772.25" y="1094.8403">End of 3DS</text><polygon fill="#A80036" points="1532.5,1128.9063,1542.5,1132.9063,1532.5,1132.9063" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="1543.5" y1="1132.9063" y2="1132.9063"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="141" x="150.5" y="1127.9731">Authorisation Request</text><polygon fill="#A80036" points="154.5,1163.0391,144.5,1163.0391,154.5,1167.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="1543.5" y1="1162.0391" y2="1162.0391"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="151" x="160.5" y="1157.106">Authorisation Response</text><polygon fill="#A80036" points="448.5,1192.1719,458.5,1192.1719,448.5,1196.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="459.5" y1="1191.1719" y2="1191.1719"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="151" x="150.5" y="1186.2388">Authorisation Response</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="1219.8711"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1219.8711" y2="1219.8711"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1222.8711" y2="1222.8711"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="104" x="764.75" y="1209.3047"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="85" x="770.75" y="1225.3716">Notification</text><polygon fill="#A80036" points="729.5,1259.4375,739.5,1263.4375,729.5,1267.4375,733.5,1263.4375" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="460.5" x2="735.5" y1="1263.4375" y2="1263.4375"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="75" x="467.5" y="1258.5044">Result Page</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="1292.1367"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1292.1367" y2="1292.1367"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1295.1367" y2="1295.1367"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="704" x="464.75" y="1281.5703"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="685" x="470.75" y="1297.6372">Request for Settlement process (could be immediate, batch (e.g. daily) or after some days)</text><rect fill="none" height="90.3984" style="stroke: #000000; stroke-width: 2.0;" width="582" x="13" y="1321.7031"/><polygon fill="#EEEEEE" points="13,1321.7031,77,1321.7031,77,1328.7031,67,1338.7031,13,1338.7031,13,1321.7031" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="19" x="28" y="1334.77">alt</text><polygon fill="#A80036" points="154.5,1355.8359,144.5,1359.8359,154.5,1363.8359,150.5,1359.8359" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="148.5" x2="459.5" y1="1359.8359" y2="1359.8359"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="51" x="160.5" y="1354.9028">Capture</text><line style="stroke: #000000; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="13" x2="595" y1="1368.9688" y2="1368.9688"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="185.5" y1="1391.1016" y2="1391.1016"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="185.5" x2="185.5" y1="1391.1016" y2="1404.1016"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="144.5" x2="185.5" y1="1404.1016" y2="1404.1016"/><polygon fill="#A80036" points="154.5,1400.1016,144.5,1404.1016,154.5,1408.1016,150.5,1404.1016" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="303" x="150.5" y="1386.0356">Auto Capture in batch processing at end-of-day</text><polygon fill="#A80036" points="1532.5,1436.1016,1542.5,1440.1016,1532.5,1444.1016,1536.5,1440.1016" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="143.5" x2="1538.5" y1="1440.1016" y2="1440.1016"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="51" x="150.5" y="1435.1685">Capture</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="1627.5" x="3" y="1468.8008"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1468.8008" y2="1468.8008"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="1630.5" y1="1471.8008" y2="1471.8008"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="93" x="770.25" y="1458.2344"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="74" x="776.25" y="1474.3013">Fulfilment</text><polygon fill="#A80036" points="729.5,1508.3672,739.5,1512.3672,729.5,1516.3672,733.5,1512.3672" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="460.5" x2="735.5" y1="1512.3672" y2="1512.3672"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="180" x="467.5" y="1507.4341">Provide products or services</text></g></svg>
\ No newline at end of file diff --git a/contrib/articles/ui/figs/contract.pml b/contrib/articles/ui/figs/contract.pml new file mode 100644 index 000000000..74bf23dd6 --- /dev/null +++ b/contrib/articles/ui/figs/contract.pml @@ -0,0 +1,31 @@ + +@startuml + +hide footbox + +box "User" + Participant "Wallet" as W + Participant "Browser" as U +end box + +box "Merchant" + Participant "Storefront" as S + Participant "Backend" as B +end box + +autonumber + +S -> B : proposed contract +B -> S : signed contract + +S -> U : custom (HTTP(S)) + +U -> W : signed contract +W -> U : signed coins + +U -> S : custom (HTTP(S)) + +S -> B : signed coins (HTTP(S)) +B -> S : confirmation (HTTP(S)) + +@enduml diff --git a/contrib/articles/ui/figs/fulfillment.png b/contrib/articles/ui/figs/fulfillment.png Binary files differnew file mode 100644 index 000000000..5ac058844 --- /dev/null +++ b/contrib/articles/ui/figs/fulfillment.png diff --git a/contrib/articles/ui/figs/pay.png b/contrib/articles/ui/figs/pay.png Binary files differnew file mode 100644 index 000000000..1efdf9610 --- /dev/null +++ b/contrib/articles/ui/figs/pay.png diff --git a/contrib/articles/ui/figs/paypal.pml b/contrib/articles/ui/figs/paypal.pml new file mode 100644 index 000000000..2820f2742 --- /dev/null +++ b/contrib/articles/ui/figs/paypal.pml @@ -0,0 +1,64 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +autonumber + +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/contrib/articles/ui/figs/paypal.svg b/contrib/articles/ui/figs/paypal.svg new file mode 100644 index 000000000..656ccc355 --- /dev/null +++ b/contrib/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/contrib/articles/ui/figs/taler-contract.html b/contrib/articles/ui/figs/taler-contract.html new file mode 100644 index 000000000..affdbe9a6 --- /dev/null +++ b/contrib/articles/ui/figs/taler-contract.html @@ -0,0 +1,6 @@ +<script src="taler-wallet-lib.js"></script> +<script> + taler.offerContractFrom("https://shop/generate-contract/42", (err) => { + alert("Error while offering contract"); + }); +</script> diff --git a/contrib/articles/ui/figs/taler-pay.pml b/contrib/articles/ui/figs/taler-pay.pml new file mode 100644 index 000000000..93b21f856 --- /dev/null +++ b/contrib/articles/ui/figs/taler-pay.pml @@ -0,0 +1,47 @@ +@startuml +autonumber + +Actor "Payer (Shopper) Browser" as Payer +Participant "Payee (Merchant) Site" as Payee +Participant "Taler Exchange" as Exchange + +note over Payer, Payee: Tor/HTTPS +note over Payee, Exchange: HTTP/HTTPS + +title Taler (Payment) + +== Request Offer == + +Payer->Payee: Choose goods by navigating to offer URL + +Payee->Payer: Send signed digital contract proposal + +opt +Payer->Payer: Select Taler payment method (skippable with auto-detection) +end + +== Execute Payment == + +opt +Payer->Payer: Affirm contract +end + +Payer->Payee: Navigate to fulfillment URL + +Payee->Payer: Send hash of digital contract and payment information + +Payer->Payee: Send payment + +Payee->Exchange: Forward payment + +Exchange->Payee: Confirm payment + +Payee->Payer: Confirm payment + +== Fulfilment == + +Payer->Payee: Reload fulfillment URL for delivery + +Payee->Payer: Provide product resource + +@enduml diff --git a/contrib/articles/ui/figs/taler-pay.svg b/contrib/articles/ui/figs/taler-pay.svg new file mode 100644 index 000000000..95d83e4ff --- /dev/null +++ b/contrib/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="866px" style="width:753px;height:866px;" version="1.1" viewBox="0 0 753 866" width="753px"><defs><filter height="300%" id="f1" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="125" x="313.5" y="22.9951">Taler (Payment)</text><rect fill="#FFFFFF" filter="url(#f1)" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="509" x="13" y="313.2578"/><rect fill="#FFFFFF" filter="url(#f1)" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="213" x="13" y="429.6563"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="112" x2="112" y1="116.5938" y2="782.1172"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="516.5" x2="516.5" y1="116.5938" y2="782.1172"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="673.5" x2="673.5" y1="116.5938" y2="782.1172"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="23" y="113.292">Payer (Shopper) Browser</text><ellipse cx="112" cy="43.2969" fill="#FEFECE" filter="url(#f1)" 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" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="172" x="23" y="794.1123">Payer (Shopper) Browser</text><ellipse cx="112" cy="807.4141" fill="#FEFECE" filter="url(#f1)" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M112,815.4141 L112,842.4141 M99,823.4141 L125,823.4141 M112,842.4141 L99,857.4141 M112,842.4141 L125,857.4141 " fill="#FEFECE" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="432.5" y="81.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="439.5" y="101.292">Payee (Merchant) Site</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="165" x="432.5" y="781.1172"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="151" x="439.5" y="801.1123">Payee (Merchant) Site</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="611.5" y="81.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="618.5" y="101.292">Taler Exchange</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="611.5" y="781.1172"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="618.5" y="801.1123">Taler Exchange</text><polygon fill="#FBFB77" filter="url(#f1)" points="27,131.5938,27,156.5938,600,156.5938,600,141.5938,590,131.5938,27,131.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="590" x2="590" y1="131.5938" y2="141.5938"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="600" x2="590" y1="141.5938" y2="141.5938"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="65" x="274.75" y="148.6606">Tor/HTTPS</text><polygon fill="#FBFB77" filter="url(#f1)" points="446,170.7266,446,195.7266,744,195.7266,744,180.7266,734,170.7266,446,170.7266" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="734" x2="734" y1="170.7266" y2="180.7266"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="744" x2="734" y1="180.7266" y2="180.7266"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="77" x="550" y="187.7935">HTTP/HTTPS</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="746" x="3" y="225.4258"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="225.4258" y2="225.4258"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="228.4258" y2="228.4258"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="123" x="314.5" y="214.8594"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="104" x="320.5" y="230.9263">Request Offer</text><polygon fill="#A80036" points="505,264.9922,515,268.9922,505,272.9922,509,268.9922" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="511" y1="268.9922" y2="268.9922"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="259" x="119" y="264.0591">Choose goods by navigating to offer URL</text><polygon fill="#A80036" points="123,294.125,113,298.125,123,302.125,119,298.125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="516" y1="298.125" y2="298.125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="237" x="129" y="293.1919">Send signed digital contract proposal</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="509" x="13" y="313.2578"/><polygon fill="#EEEEEE" points="13,313.2578,83,313.2578,83,320.2578,73,330.2578,13,330.2578,13,313.2578" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="326.3247">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="154" y1="351.5234" y2="351.5234"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="154" x2="154" y1="351.5234" y2="364.5234"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="113" x2="154" y1="364.5234" y2="364.5234"/><polygon fill="#A80036" points="123,360.5234,113,364.5234,123,368.5234,119,364.5234" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="391" x="119" y="346.4575">Select Taler payment method (skippable with auto-detection)</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="746" x="3" y="400.0898"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="400.0898" y2="400.0898"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="403.0898" y2="403.0898"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="147" x="302.5" y="389.5234"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="128" x="308.5" y="405.5903">Execute Payment</text><rect fill="none" height="59.2656" style="stroke: #000000; stroke-width: 2.0;" width="213" x="13" y="429.6563"/><polygon fill="#EEEEEE" points="13,429.6563,83,429.6563,83,436.6563,73,446.6563,13,446.6563,13,429.6563" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="442.7231">opt</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="154" y1="467.9219" y2="467.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="154" x2="154" y1="467.9219" y2="480.9219"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="113" x2="154" y1="480.9219" y2="480.9219"/><polygon fill="#A80036" points="123,476.9219,113,480.9219,123,484.9219,119,480.9219" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="95" x="119" y="462.856">Affirm contract</text><polygon fill="#A80036" points="505,512.9219,515,516.9219,505,520.9219,509,516.9219" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="511" y1="516.9219" y2="516.9219"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="169" x="119" y="511.9888">Navigate to fulfillment URL</text><polygon fill="#A80036" points="123,542.0547,113,546.0547,123,550.0547,119,546.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="516" y1="546.0547" y2="546.0547"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="349" x="129" y="541.1216">Send hash of digital contract and payment information</text><polygon fill="#A80036" points="505,571.1875,515,575.1875,505,579.1875,509,575.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="511" y1="575.1875" y2="575.1875"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="94" x="119" y="570.2544">Send payment</text><polygon fill="#A80036" points="661.5,600.3203,671.5,604.3203,661.5,608.3203,665.5,604.3203" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="517" x2="667.5" y1="604.3203" y2="604.3203"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="524" y="599.3872">Forward payment</text><polygon fill="#A80036" points="528,629.4531,518,633.4531,528,637.4531,524,633.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="522" x2="672.5" y1="633.4531" y2="633.4531"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="534" y="628.52">Confirm payment</text><polygon fill="#A80036" points="123,658.5859,113,662.5859,123,666.5859,119,662.5859" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="516" y1="662.5859" y2="662.5859"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="111" x="129" y="657.6528">Confirm payment</text><rect fill="#EEEEEE" filter="url(#f1)" height="3" style="stroke: #EEEEEE; stroke-width: 1.0;" width="746" x="3" y="691.2852"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="691.2852" y2="691.2852"/><line style="stroke: #000000; stroke-width: 1.0;" x1="3" x2="749" y1="694.2852" y2="694.2852"/><rect fill="#EEEEEE" filter="url(#f1)" height="23.1328" style="stroke: #000000; stroke-width: 2.0;" width="93" x="329.5" y="680.7188"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="74" x="335.5" y="696.7856">Fulfilment</text><polygon fill="#A80036" points="505,730.8516,515,734.8516,505,738.8516,509,734.8516" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="112" x2="511" y1="734.8516" y2="734.8516"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="212" x="119" y="729.9185">Reload fulfillment URL for delivery</text><polygon fill="#A80036" points="123,759.9844,113,763.9844,123,767.9844,119,763.9844" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="117" x2="516" y1="763.9844" y2="763.9844"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="160" x="129" y="759.0513">Provide product resource</text></g></svg>
\ No newline at end of file diff --git a/contrib/articles/ui/figs/taler-presence-js.html b/contrib/articles/ui/figs/taler-presence-js.html new file mode 100644 index 000000000..9770815f5 --- /dev/null +++ b/contrib/articles/ui/figs/taler-presence-js.html @@ -0,0 +1,9 @@ +<script src="taler-wallet-lib.js"></script> +<script> + taler.onPresent(() => { + alert("Taler wallet is installed"); + }); + taler.onAbsent(() => { + alert("Taler wallet is not installed"); + }); +</script> diff --git a/contrib/articles/ui/figs/taler-withdraw.pml b/contrib/articles/ui/figs/taler-withdraw.pml new file mode 100644 index 000000000..33f5dac0b --- /dev/null +++ b/contrib/articles/ui/figs/taler-withdraw.pml @@ -0,0 +1,37 @@ +@startuml +autonumber + +Actor "Customer Browser" as Customer +Participant "Bank Site" as Bank +Participant "Taler Exchange" as Exchange + +note over Customer, Bank: HTTPS +note over Customer, Exchange: HTTPS +note over Bank, Exchange: wire transfer + +title Taler (Withdraw coins) + +Customer->Bank: user authentication +Bank->Customer: send account portal + +Customer->Customer: initiate withdrawal (specify amount and exchange) + +Customer->Exchange: request coin denomination keys and wire transfer data +Exchange->Customer: send coin denomination keys and wire transfer data + +Customer->Bank: execute withdrawal + +opt +Bank->Customer: request transaction authorization +Customer->Bank: transaction authorization +end + +Bank->Customer: withdrawal confirmation +Bank->Exchange: execute wire transfer + + +Customer->Exchange: withdraw request +Customer<-Exchange: signed blinded coins +Customer->Customer: unblind coins + +@enduml diff --git a/contrib/articles/ui/figs/taler-withdraw.png b/contrib/articles/ui/figs/taler-withdraw.png Binary files differnew file mode 100644 index 000000000..04a4d8d1f --- /dev/null +++ b/contrib/articles/ui/figs/taler-withdraw.png diff --git a/contrib/articles/ui/figs/taler-withdraw.svg b/contrib/articles/ui/figs/taler-withdraw.svg new file mode 100644 index 000000000..3618d92f5 --- /dev/null +++ b/contrib/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="774px" style="width:652px;height:774px;" version="1.1" viewBox="0 0 652 774" width="652px"><defs><filter height="300%" id="f1" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="14" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="179" x="236.25" y="22.9951">Taler (Withdraw coins)</text><rect fill="#FFFFFF" filter="url(#f1)" height="75.3984" style="stroke: #000000; stroke-width: 2.0;" width="462" x="13" y="438.7891"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="90" x2="90" y1="116.5938" y2="689.8516"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="423" x2="423" y1="116.5938" y2="689.8516"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="581.5" x2="581.5" y1="116.5938" y2="689.8516"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="129" x="23" y="113.292">Customer Browser</text><ellipse cx="90.5" cy="43.2969" fill="#FEFECE" filter="url(#f1)" 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" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="129" x="23" y="701.8467">Customer Browser</text><ellipse cx="90.5" cy="715.1484" fill="#FEFECE" filter="url(#f1)" rx="8" ry="8" style="stroke: #A80036; stroke-width: 2.0;"/><path d="M90.5,723.1484 L90.5,750.1484 M77.5,731.1484 L103.5,731.1484 M90.5,750.1484 L77.5,765.1484 M90.5,750.1484 L103.5,765.1484 " fill="#FEFECE" filter="url(#f1)" style="stroke: #A80036; stroke-width: 2.0;"/><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="382" y="81.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="389" y="101.292">Bank Site</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="79" x="382" y="688.8516"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="65" x="389" y="708.8467">Bank Site</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="519.5" y="81.2969"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="526.5" y="101.292">Taler Exchange</text><rect fill="#FEFECE" filter="url(#f1)" height="30.2969" style="stroke: #A80036; stroke-width: 1.5;" width="120" x="519.5" y="688.8516"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="106" x="526.5" y="708.8467">Taler Exchange</text><polygon fill="#FBFB77" filter="url(#f1)" points="38,131.5938,38,156.5938,475,156.5938,475,141.5938,465,131.5938,38,131.5938" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="465" x2="465" y1="131.5938" y2="141.5938"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="475" x2="465" y1="141.5938" y2="141.5938"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="229.5" y="148.6606">HTTPS</text><polygon fill="#FBFB77" filter="url(#f1)" points="28,170.7266,28,195.7266,643,195.7266,643,180.7266,633,170.7266,28,170.7266" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="633" x2="633" y1="170.7266" y2="180.7266"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="643" x2="633" y1="180.7266" y2="180.7266"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="41" x="308.75" y="187.7935">HTTPS</text><polygon fill="#FBFB77" filter="url(#f1)" points="374,209.8594,374,234.8594,630,234.8594,630,219.8594,620,209.8594,374,209.8594" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="620" x2="620" y1="209.8594" y2="219.8594"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="630" x2="620" y1="219.8594" y2="219.8594"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="79" x="456.25" y="226.9263">wire transfer</text><polygon fill="#A80036" points="411.5,260.9922,421.5,264.9922,411.5,268.9922,415.5,264.9922" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="417.5" y1="264.9922" y2="264.9922"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="124" x="97.5" y="260.0591">user authentication</text><polygon fill="#A80036" points="101.5,290.125,91.5,294.125,101.5,298.125,97.5,294.125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="422.5" y1="294.125" y2="294.125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="127" x="107.5" y="289.1919">send account portal</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="132.5" y1="323.3906" y2="323.3906"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="132.5" x2="132.5" y1="323.3906" y2="336.3906"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="91.5" x2="132.5" y1="336.3906" y2="336.3906"/><polygon fill="#A80036" points="101.5,332.3906,91.5,336.3906,101.5,340.3906,97.5,336.3906" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="319" x="97.5" y="318.3247">initiate withdrawal (specify amount and exchange)</text><polygon fill="#A80036" points="569.5,361.3906,579.5,365.3906,569.5,369.3906,573.5,365.3906" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="575.5" y1="365.3906" y2="365.3906"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="348" x="97.5" y="360.4575">request coin denomination keys and wire transfer data</text><polygon fill="#A80036" points="101.5,390.5234,91.5,394.5234,101.5,398.5234,97.5,394.5234" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="580.5" y1="394.5234" y2="394.5234"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="330" x="107.5" y="389.5903">send coin denomination keys and wire transfer data</text><polygon fill="#A80036" points="411.5,419.6563,421.5,423.6563,411.5,427.6563,415.5,423.6563" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="417.5" y1="423.6563" y2="423.6563"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="121" x="97.5" y="418.7231">execute withdrawal</text><rect fill="none" height="75.3984" style="stroke: #000000; stroke-width: 2.0;" width="462" x="13" y="438.7891"/><polygon fill="#EEEEEE" points="13,438.7891,83,438.7891,83,445.7891,73,455.7891,13,455.7891,13,438.7891" style="stroke: #000000; stroke-width: 2.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="25" x="28" y="451.856">opt</text><polygon fill="#A80036" points="101.5,472.9219,91.5,476.9219,101.5,480.9219,97.5,476.9219" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="422.5" y1="476.9219" y2="476.9219"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="213" x="107.5" y="471.9888">request transaction authorization</text><polygon fill="#A80036" points="411.5,502.0547,421.5,506.0547,411.5,510.0547,415.5,506.0547" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="417.5" y1="506.0547" y2="506.0547"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="160" x="97.5" y="501.1216">transaction authorization</text><polygon fill="#A80036" points="101.5,538.1875,91.5,542.1875,101.5,546.1875,97.5,542.1875" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="422.5" y1="542.1875" y2="542.1875"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="150" x="107.5" y="537.2544">withdrawal confirmation</text><polygon fill="#A80036" points="569.5,567.3203,579.5,571.3203,569.5,575.3203,573.5,571.3203" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="423.5" x2="575.5" y1="571.3203" y2="571.3203"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="134" x="430.5" y="566.3872">execute wire transfer</text><polygon fill="#A80036" points="569.5,596.4531,579.5,600.4531,569.5,604.4531,573.5,600.4531" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="575.5" y1="600.4531" y2="600.4531"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="108" x="97.5" y="595.52">withdraw request</text><polygon fill="#A80036" points="101.5,625.5859,91.5,629.5859,101.5,633.5859,97.5,629.5859" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="95.5" x2="580.5" y1="629.5859" y2="629.5859"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="129" x="107.5" y="624.6528">signed blinded coins</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="90.5" x2="132.5" y1="658.8516" y2="658.8516"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="132.5" x2="132.5" y1="658.8516" y2="671.8516"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="91.5" x2="132.5" y1="671.8516" y2="671.8516"/><polygon fill="#A80036" points="101.5,667.8516,91.5,671.8516,101.5,675.8516,97.5,671.8516" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="83" x="97.5" y="653.7856">unblind coins</text></g></svg>
\ No newline at end of file |
