From 339c59ba118915cbe05b51b7e0909b45ea160ce1 Mon Sep 17 00:00:00 2001 From: Marcello Stanisci Date: Mon, 21 Mar 2016 16:41:40 +0100 Subject: moving here wallet papers forlder --- articles/ui/figs/bank0a.png | Bin 0 -> 26902 bytes articles/ui/figs/bank1.png | Bin 0 -> 53014 bytes articles/ui/figs/bank1a.png | Bin 0 -> 56350 bytes articles/ui/figs/bank1b.png | Bin 0 -> 34100 bytes articles/ui/figs/bank2.png | Bin 0 -> 47896 bytes articles/ui/figs/bank2a.png | Bin 0 -> 48220 bytes articles/ui/figs/bank2b.png | Bin 0 -> 28513 bytes articles/ui/figs/bank3.png | Bin 0 -> 45646 bytes articles/ui/figs/bank3a.png | Bin 0 -> 59024 bytes articles/ui/figs/bank3b.png | Bin 0 -> 40907 bytes articles/ui/figs/bank4.png | Bin 0 -> 62697 bytes articles/ui/figs/bank4a.png | Bin 0 -> 67867 bytes articles/ui/figs/bank4b.png | Bin 0 -> 39949 bytes articles/ui/figs/bitcoin.pdf | Bin 0 -> 28482 bytes articles/ui/figs/bitcoin.pml | 37 ++++++++++++++ articles/ui/figs/bitcoin.svg | 1 + articles/ui/figs/cart.png | Bin 0 -> 116687 bytes articles/ui/figs/cc3ds.pdf | Bin 0 -> 45194 bytes articles/ui/figs/cc3ds.pml | 96 ++++++++++++++++++++++++++++++++++++ articles/ui/figs/cc3ds.svg | 1 + articles/ui/figs/fulfillment.png | Bin 0 -> 118355 bytes articles/ui/figs/pay.png | Bin 0 -> 48973 bytes articles/ui/figs/paypal.pdf | Bin 0 -> 24305 bytes articles/ui/figs/paypal.pml | 64 ++++++++++++++++++++++++ articles/ui/figs/paypal.svg | 1 + articles/ui/figs/taler-contract.js | 35 +++++++++++++ articles/ui/figs/taler-pay.pdf | Bin 0 -> 27727 bytes articles/ui/figs/taler-pay.svg | 1 + articles/ui/figs/taler-presence.js | 35 +++++++++++++ articles/ui/figs/taler-withdraw.pdf | Bin 0 -> 21753 bytes articles/ui/figs/taler-withdraw.svg | 1 + 31 files changed, 272 insertions(+) create mode 100644 articles/ui/figs/bank0a.png create mode 100644 articles/ui/figs/bank1.png create mode 100644 articles/ui/figs/bank1a.png create mode 100644 articles/ui/figs/bank1b.png create mode 100644 articles/ui/figs/bank2.png create mode 100644 articles/ui/figs/bank2a.png create mode 100644 articles/ui/figs/bank2b.png create mode 100644 articles/ui/figs/bank3.png create mode 100644 articles/ui/figs/bank3a.png create mode 100644 articles/ui/figs/bank3b.png create mode 100644 articles/ui/figs/bank4.png create mode 100644 articles/ui/figs/bank4a.png create mode 100644 articles/ui/figs/bank4b.png create mode 100644 articles/ui/figs/bitcoin.pdf create mode 100644 articles/ui/figs/bitcoin.pml create mode 100644 articles/ui/figs/bitcoin.svg create mode 100644 articles/ui/figs/cart.png create mode 100644 articles/ui/figs/cc3ds.pdf create mode 100644 articles/ui/figs/cc3ds.pml create mode 100644 articles/ui/figs/cc3ds.svg create mode 100644 articles/ui/figs/fulfillment.png create mode 100644 articles/ui/figs/pay.png create mode 100644 articles/ui/figs/paypal.pdf create mode 100644 articles/ui/figs/paypal.pml create mode 100644 articles/ui/figs/paypal.svg create mode 100644 articles/ui/figs/taler-contract.js create mode 100644 articles/ui/figs/taler-pay.pdf create mode 100644 articles/ui/figs/taler-pay.svg create mode 100644 articles/ui/figs/taler-presence.js create mode 100644 articles/ui/figs/taler-withdraw.pdf create mode 100644 articles/ui/figs/taler-withdraw.svg (limited to 'articles/ui/figs') diff --git a/articles/ui/figs/bank0a.png b/articles/ui/figs/bank0a.png new file mode 100644 index 000000000..b679304d0 Binary files /dev/null and b/articles/ui/figs/bank0a.png differ diff --git a/articles/ui/figs/bank1.png b/articles/ui/figs/bank1.png new file mode 100644 index 000000000..84bc7a189 Binary files /dev/null and b/articles/ui/figs/bank1.png differ diff --git a/articles/ui/figs/bank1a.png b/articles/ui/figs/bank1a.png new file mode 100644 index 000000000..b91adfff6 Binary files /dev/null and b/articles/ui/figs/bank1a.png differ diff --git a/articles/ui/figs/bank1b.png b/articles/ui/figs/bank1b.png new file mode 100644 index 000000000..a3adfe4e3 Binary files /dev/null and b/articles/ui/figs/bank1b.png differ diff --git a/articles/ui/figs/bank2.png b/articles/ui/figs/bank2.png new file mode 100644 index 000000000..126c9a059 Binary files /dev/null and b/articles/ui/figs/bank2.png differ diff --git a/articles/ui/figs/bank2a.png b/articles/ui/figs/bank2a.png new file mode 100644 index 000000000..087cef9e1 Binary files /dev/null and b/articles/ui/figs/bank2a.png differ diff --git a/articles/ui/figs/bank2b.png b/articles/ui/figs/bank2b.png new file mode 100644 index 000000000..eaa4ba475 Binary files /dev/null and b/articles/ui/figs/bank2b.png differ diff --git a/articles/ui/figs/bank3.png b/articles/ui/figs/bank3.png new file mode 100644 index 000000000..3b79c042f Binary files /dev/null and b/articles/ui/figs/bank3.png differ diff --git a/articles/ui/figs/bank3a.png b/articles/ui/figs/bank3a.png new file mode 100644 index 000000000..2d321a27a Binary files /dev/null and b/articles/ui/figs/bank3a.png differ diff --git a/articles/ui/figs/bank3b.png b/articles/ui/figs/bank3b.png new file mode 100644 index 000000000..78e7637cb Binary files /dev/null and b/articles/ui/figs/bank3b.png differ diff --git a/articles/ui/figs/bank4.png b/articles/ui/figs/bank4.png new file mode 100644 index 000000000..56c32e15c Binary files /dev/null and b/articles/ui/figs/bank4.png differ diff --git a/articles/ui/figs/bank4a.png b/articles/ui/figs/bank4a.png new file mode 100644 index 000000000..65f18684c Binary files /dev/null and b/articles/ui/figs/bank4a.png differ diff --git a/articles/ui/figs/bank4b.png b/articles/ui/figs/bank4b.png new file mode 100644 index 000000000..fde59ab7c Binary files /dev/null and b/articles/ui/figs/bank4b.png differ diff --git a/articles/ui/figs/bitcoin.pdf b/articles/ui/figs/bitcoin.pdf new file mode 100644 index 000000000..c1c9b9ca3 Binary files /dev/null and b/articles/ui/figs/bitcoin.pdf differ diff --git a/articles/ui/figs/bitcoin.pml b/articles/ui/figs/bitcoin.pml new file mode 100644 index 000000000..88707cda1 --- /dev/null +++ b/articles/ui/figs/bitcoin.pml @@ -0,0 +1,37 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Database "Invoice Database" as DB +Participant "Payee Website" as Website +Database "Bitcoin Network" as Bitcoin +Participant "Payer Wallet" as Wallet +Actor "Payer (Browser)" as Payer + +title Bitcoin Payment Protocol (BIP70) + +Payer->Website: Request checkout with Bitcoin +Website->Website: Generate Bitcoin address +Website->DB: Store invoice details +Website->Payer: Basket Page with bitcoin: pay link +Payer->Payer: Click bitcoin: link +Payer->Wallet: Wallet handles bitcoin: URL and extracts invoice URL +Wallet->Website: Request invoice +Website->DB: Get invoice details +Website->Website: Create PaymentDetails (Amount, Memo, Ref#, Pay URL) +Website->Website: Create PaymentRequest (Signed PaymentDetails) +Website->Wallet: PaymentRequest containing PaymentDetails +Wallet->Payer: Confirm payment details? +Payer->Wallet: Accept payment +Wallet->Wallet: Generate and sign payment +Wallet->Website: Signed payment +Website->Bitcoin: Submit payment +Website->Wallet: Payment ACK +Wallet->Payer: Confirm payment is complete +loop until payment is confirmed + Bitcoin->Website: Latest confirmed transactions +end + + +@enduml \ No newline at end of file diff --git a/articles/ui/figs/bitcoin.svg b/articles/ui/figs/bitcoin.svg new file mode 100644 index 000000000..3f908b3df --- /dev/null +++ b/articles/ui/figs/bitcoin.svg @@ -0,0 +1 @@ +Bitcoin Payment Protocol (BIP70)Invoice DatabaseInvoice DatabasePayee WebsitePayee WebsiteBitcoin NetworkBitcoin NetworkPayer WalletPayer WalletPayer (Browser)Payer (Browser)1Request checkout with Bitcoin2Generate Bitcoin address3Store invoice details4Basket Page with bitcoin: pay link5Click bitcoin: link6Wallet handles bitcoin: URL and extracts invoice URL7Request invoice8Get invoice details9Create PaymentDetails (Amount, Memo, Ref#, Pay URL)10Create PaymentRequest (Signed PaymentDetails)11PaymentRequest containing PaymentDetails12Confirm payment details?13Accept payment14Generate and sign payment15Signed payment16Submit payment17Payment ACK18Confirm payment is completeloop[until payment is confirmed]19Latest confirmed transactions \ No newline at end of file diff --git a/articles/ui/figs/cart.png b/articles/ui/figs/cart.png new file mode 100644 index 000000000..58beb3b1a Binary files /dev/null and b/articles/ui/figs/cart.png differ diff --git a/articles/ui/figs/cc3ds.pdf b/articles/ui/figs/cc3ds.pdf new file mode 100644 index 000000000..e8967cee3 Binary files /dev/null and b/articles/ui/figs/cc3ds.pdf differ diff --git a/articles/ui/figs/cc3ds.pml b/articles/ui/figs/cc3ds.pml new file mode 100644 index 000000000..90fc33008 --- /dev/null +++ b/articles/ui/figs/cc3ds.pml @@ -0,0 +1,96 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Participant "Payee (Merchant) PSP [Acquirer]" as MPSP +Participant "Payee (Merchant) [Acceptor] Site " as Payee +Actor "Payer (Shopper) [Cardholder] Browser" as Payer +participant "Browser Form Filler" as UA +participant "Card Scheme Directory" as CSD +participant "Issuing Bank [Issuer] Website" as CPSPW +participant "Issuing Bank [Issuer]" as CPSP + +note over Payee, Payer: HTTPS + +title +Legacy Merchant Hosted Card Payment with Acquirer Supported 3DS (Current) + +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. +end title + +== Establish Payment Obligation == + +Payee->Payer: Present Check-out page with Pay Button +Payer->Payer: Select Card Payment Method + +alt + UA->Payer: Form Fill + Note right: fields are PAN & Expiry Date with optional CVV, & Address, Also Card Valid Date and Issue Number are required for some Schemes +else + Payer->Payer: User Fills Form +End + +== Card Payment Initiation == + +Payer->Payee: Payment Initiation +Note right: Custom code on merchant webpage can encrypt payload to reduce PCI burden from SAQ D to SAQ A-EP + +opt + Payee->Payee: Store Card + note right: Merchant can store card details apart from CVV (even if encrypted) for future use (a.k.a. Card on File) +end + +Payee-\MPSP: Authorise + + +== 3DS part of flow == + +Note over MPSP, Payee: At this point, the Merchant or Merchant's PSP can decide if it wishes to invoke 3DS. This might be based on transaction value (i.e. low value -> low risk) or other factors, e.g. if the Shopper is a repeat purchaser. + + MPSP –> CSD: BIN to URL lookup (VAReq message) + CSD -> CSD: Lookup URL from BIN + CSD –> CPSPW : “PING” + note right: verify URL validity + CPSPW –> CSD: “PING” response + CSD –> MPSP: URL + + MPSP-/Payee: 3DS redirect (PAReq message) + Payee->Payer: 3DS redirect (PAReq message) + Payer->CPSPW: 3DS invoke + CPSPW-\Payer: 3DS challenge + Payer-/CPSPW: 3DS response (PARes message) + CPSPW->Payer: 3DS response (PARes message) + Payer->Payee: 3DS response (PARes message) + Payee-\MPSP: 3DS response (PARes message) + + MPSP->MPSP: Verification of PARes signature + +== End of 3DS == + + +MPSP-\CPSP: Authorisation Request +CPSP-/MPSP: Authorisation Response + +MPSP-/Payee: Authorisation Response + +== Notification == + +Payee->Payer: Result Page + +== Request for Settlement process (could be immediate, batch (e.g. daily) or after some days) == + +Alt + Payee -> MPSP : Capture + note right: Later Capture may be called, for example after good shipped or tickets pickedup +Else + MPSP -> MPSP : Auto Capture in batch processing at end-of-day +End + +MPSP->CPSP: Capture + +== Fulfilment == + +Payee->Payer: Provide products or services + +@enduml diff --git a/articles/ui/figs/cc3ds.svg b/articles/ui/figs/cc3ds.svg new file mode 100644 index 000000000..682276c27 --- /dev/null +++ b/articles/ui/figs/cc3ds.svg @@ -0,0 +1 @@ +Legacy Merchant Hosted Card Payment with Acquirer Supported 3DS (Current)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.Payee (Merchant) PSP [Acquirer]Payee (Merchant) PSP [Acquirer]Payee (Merchant) [Acceptor] SitePayee (Merchant) [Acceptor] SitePayer (Shopper) [Cardholder] BrowserPayer (Shopper) [Cardholder] BrowserBrowser Form FillerBrowser Form FillerCard Scheme DirectoryCard Scheme DirectoryIssuing Bank [Issuer] WebsiteIssuing Bank [Issuer] WebsiteIssuing Bank [Issuer]Issuing Bank [Issuer]HTTPSEstablish Payment Obligation1Present Check-out page with Pay Button2Select Card Payment Methodalt3Form Fillfields are PAN & Expiry Date with optional CVV, & Address, Also Card Valid Date and Issue Number are required for some Schemes4User Fills FormCard Payment Initiation5Payment InitiationCustom code on merchant webpage can encrypt payload to reduce PCI burden from SAQ D to SAQ A-EPopt6Store CardMerchant can store card details apart from CVV (even if encrypted) for future use (a.k.a. Card on File)7Authorise3DS part of flowAt 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.8BIN to URL lookup (VAReq message)9Lookup URL from BIN10“PING”verify URL validity11“PING” response12URL133DS redirect (PAReq message)143DS redirect (PAReq message)153DS invoke163DS challenge173DS response (PARes message)183DS response (PARes message)193DS response (PARes message)203DS response (PARes message)21Verification of PARes signatureEnd of 3DS22Authorisation Request23Authorisation Response24Authorisation ResponseNotification25Result PageRequest for Settlement process (could be immediate, batch (e.g. daily) or after some days)alt26CaptureLater Capture may be called, for example after good shipped or tickets pickedup27Auto Capture in batch processing at end-of-day28CaptureFulfilment29Provide products or services \ No newline at end of file diff --git a/articles/ui/figs/fulfillment.png b/articles/ui/figs/fulfillment.png new file mode 100644 index 000000000..5ac058844 Binary files /dev/null and b/articles/ui/figs/fulfillment.png differ diff --git a/articles/ui/figs/pay.png b/articles/ui/figs/pay.png new file mode 100644 index 000000000..1efdf9610 Binary files /dev/null and b/articles/ui/figs/pay.png differ diff --git a/articles/ui/figs/paypal.pdf b/articles/ui/figs/paypal.pdf new file mode 100644 index 000000000..1145b50c4 Binary files /dev/null and b/articles/ui/figs/paypal.pdf differ diff --git a/articles/ui/figs/paypal.pml b/articles/ui/figs/paypal.pml new file mode 100644 index 000000000..040bf6208 --- /dev/null +++ b/articles/ui/figs/paypal.pml @@ -0,0 +1,64 @@ +# FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows + +@startuml +!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml + +Participant "Payee (Merchant) Site" as Payee +Actor "Payer (Shopper) Browser" as Payer +participant "Payer (Shopper) PSP (PayPal)" as CPSP + +note over MPSP, CPSP: HTTPS + +title PayPal Payment (REST API) (Current) + +Payee->Payer: Present Checkout Page with Pay Button + +Payer->Payer: Select PayPal Payment Method + +Payer-\Payee: Payment Page Request + +Payee<->CPSP: Create Payment + +Payee-/Payer: HTTP Redirect + +Note right: HTTP Direct now send the shopper to the PayPal site + +Payer-\CPSP: Payment Initiation + +CPSP-/Payer: Authentication Page + +Payer-\CPSP: Authenticate +note right: Typically a username & password + +CPSP-/Payer: Payment Page + +opt + Payer<->CPSP: Instrument Choice + note right: Payer can change from default payment instrument +end + +Payer->Payer: Approval + +Payer-\CPSP: Payment Approval + +CPSP-/Payer: Payment Response Redirect + +Payer-\Payee: Payment Response + +Payee<->CPSP: Execute Payment + +Payee-/Payer: Result Page + + +... asynchronous notification ... + +CPSP->Payer: Payment Notification (email) + +Opt + Payee->Payer: Payment Notification (email) +End + +Note right: Provides out of band confirmation to protect against failure/modification at browser + + +@enduml diff --git a/articles/ui/figs/paypal.svg b/articles/ui/figs/paypal.svg new file mode 100644 index 000000000..656ccc355 --- /dev/null +++ b/articles/ui/figs/paypal.svg @@ -0,0 +1 @@ +PayPal Payment (REST API) (Current)Payee (Merchant) SitePayee (Merchant) SitePayer (Shopper) BrowserPayer (Shopper) BrowserPayer (Shopper) PSP (PayPal)Payer (Shopper) PSP (PayPal)MPSPMPSPHTTPS1Present Checkout Page with Pay Button2Select PayPal Payment Method3Payment Page Request4Create Payment5HTTP RedirectHTTP Direct now send the shopper to the PayPal site6Payment Initiation7Authentication Page8AuthenticateTypically a username & password9Payment Pageopt10Instrument ChoicePayer can change from default payment instrument11Approval12Payment Approval13Payment Response Redirect14Payment Response15Execute Payment16Result Pageasynchronous notification17Payment Notification (email)opt18Payment Notification (email) \ No newline at end of file diff --git a/articles/ui/figs/taler-contract.js b/articles/ui/figs/taler-contract.js new file mode 100644 index 000000000..aaf4b79c3 --- /dev/null +++ b/articles/ui/figs/taler-contract.js @@ -0,0 +1,35 @@ +/* Trigger Taler contract generation on the server, and pass the + contract to the extension once we got it. */ +function taler_pay(form) { + var contract_request = new XMLHttpRequest(); + + /* Note that the URL we give here is simply an example + and not dictated by the protocol: each web shop can + have its own way of generating and transmitting the + contract, there just must be a way to get the contract + and to pass it to the wallet when the user selects 'Pay'. */ + contract_request.open("GET", "generate-taler-contract", true); + contract_request.onload = function (e) { + if (contract_request.readyState == 4) { + if (contract_request.status == 200) { + /* Send contract to the extension. */ + handle_contract(contract_request.responseText); + } else { + /* There was an error obtaining the contract from the merchant, + obviously this should not happen. To keep it simple, we just + alert the user to the error. */ + alert("Failure to download contract " + + "(" + contract_request.status + "):\n" + + contract_request.responseText); + } + } + }; + contract_request.onerror = function (e) { + /* There was an error obtaining the contract from the merchant, + obviously this should not happen. To keep it simple, we just + alert the user to the error. */ + alert("Failure requesting the contract:\n" + + contract_request.statusText); + }; + contract_request.send(); +} diff --git a/articles/ui/figs/taler-pay.pdf b/articles/ui/figs/taler-pay.pdf new file mode 100644 index 000000000..590fff216 Binary files /dev/null and b/articles/ui/figs/taler-pay.pdf differ diff --git a/articles/ui/figs/taler-pay.svg b/articles/ui/figs/taler-pay.svg new file mode 100644 index 000000000..e3627720f --- /dev/null +++ b/articles/ui/figs/taler-pay.svg @@ -0,0 +1 @@ +Taler (Payment)Payer (Shopper) BrowserPayer (Shopper) BrowserPayee (Merchant) SitePayee (Merchant) SiteTaler ExchangeTaler ExchangeTor/HTTPSHTTP/HTTPSEstablish Payment Obligationopt1Select Taler payment method (skippable with auto-detection)2Choose goods3Send signed digital contract proposalExecute Paymentopt4Affirm contract5Send payment6Forward payment7Confirm paymentFulfilment8Provide products or services \ No newline at end of file diff --git a/articles/ui/figs/taler-presence.js b/articles/ui/figs/taler-presence.js new file mode 100644 index 000000000..2301bd27d --- /dev/null +++ b/articles/ui/figs/taler-presence.js @@ -0,0 +1,35 @@ +function handleInstall() { + var show = document.getElementsByClassName("taler-installed-show"); + var hide = document.getElementsByClassName("taler-installed-hide"); + for (var i = 0; i < show.length; i++) { + show[i].style.display = ""; + } + for (var i = 0; i < hide.length; i++) { + hide[i].style.display = "none"; + } +}; + +function handleUninstall() { + var show = document.getElementsByClassName("taler-installed-show"); + var hide = document.getElementsByClassName("taler-installed-hide"); + for (var i = 0; i < show.length; i++) { + show[i].style.display = "none"; + } + for (var i = 0; i < hide.length; i++) { + hide[i].style.display = ""; + } +}; + +function probeTaler() { + var eve = new Event("taler-probe"); + document.dispatchEvent(eve); +}; + +function initTaler() { + handleUninstall(); probeTaler(); +}; + +document.addEventListener("taler-wallet-present", handleInstall, false); +document.addEventListener("taler-unload", handleUninstall, false); +document.addEventListener("taler-load", handleInstall, false); +window.addEventListener("load", initTaler, false); diff --git a/articles/ui/figs/taler-withdraw.pdf b/articles/ui/figs/taler-withdraw.pdf new file mode 100644 index 000000000..1bf3ee484 Binary files /dev/null and b/articles/ui/figs/taler-withdraw.pdf differ diff --git a/articles/ui/figs/taler-withdraw.svg b/articles/ui/figs/taler-withdraw.svg new file mode 100644 index 000000000..2b9ac476b --- /dev/null +++ b/articles/ui/figs/taler-withdraw.svg @@ -0,0 +1 @@ +Taler (Withdraw coins)Customer BrowserCustomer BrowserBank SiteBank SiteTaler ExchangeTaler ExchangeHTTPSHTTPSSEPA1user authentication2send account portal3initiate withdrawal (specify amount and exchange)4request key material and wire transfer data5send key material and wire transfer data6execute withdrawalopt7request transaction authorization8transaction authorization9withdrawal confirmation10execute wire transfer \ No newline at end of file -- cgit v1.2.3