diff --git a/articles/ui/figs/paypal.pdf b/articles/ui/figs/paypal.pdf index 1145b50c4..d1ee29218 100644 Binary files a/articles/ui/figs/paypal.pdf and b/articles/ui/figs/paypal.pdf differ diff --git a/articles/ui/figs/paypal.pml b/articles/ui/figs/paypal.pml index 040bf6208..2820f2742 100644 --- a/articles/ui/figs/paypal.pml +++ b/articles/ui/figs/paypal.pml @@ -1,7 +1,7 @@ # FROM: https://github.com/w3c/webpayments/tree/gh-pages/PaymentFlows @startuml -!includeurl https://raw.githubusercontent.com/w3c/webpayments/gh-pages/PaymentFlows/skin.ipml +autonumber Participant "Payee (Merchant) Site" as Payee Actor "Payer (Shopper) Browser" as Payer diff --git a/articles/ui/figs/taler-pay.pdf b/articles/ui/figs/taler-pay.pdf index 546e2b7e2..0856fa859 100644 Binary files a/articles/ui/figs/taler-pay.pdf and b/articles/ui/figs/taler-pay.pdf differ diff --git a/articles/ui/figs/taler-pay.pml b/articles/ui/figs/taler-pay.pml index 46d0602d3..93b21f856 100644 --- a/articles/ui/figs/taler-pay.pml +++ b/articles/ui/figs/taler-pay.pml @@ -1,4 +1,5 @@ @startuml +autonumber Actor "Payer (Shopper) Browser" as Payer Participant "Payee (Merchant) Site" as Payee diff --git a/articles/ui/figs/taler-withdraw.pdf b/articles/ui/figs/taler-withdraw.pdf index 334a021f3..d1cd720d2 100644 Binary files a/articles/ui/figs/taler-withdraw.pdf and b/articles/ui/figs/taler-withdraw.pdf differ diff --git a/articles/ui/figs/taler-withdraw.pml b/articles/ui/figs/taler-withdraw.pml index 8984c4b80..33f5dac0b 100644 --- a/articles/ui/figs/taler-withdraw.pml +++ b/articles/ui/figs/taler-withdraw.pml @@ -1,4 +1,5 @@ @startuml +autonumber Actor "Customer Browser" as Customer Participant "Bank Site" as Bank diff --git a/articles/ui/ui.tex b/articles/ui/ui.tex index 1743937e3..5060de2ee 100644 --- a/articles/ui/ui.tex +++ b/articles/ui/ui.tex @@ -697,7 +697,7 @@ customers, and may help create a competitive market. \subsection{Spending coins} % \tinyskip -\begin{figure}[t!] +\begin{figure}[p!] \subfloat[Select article][Select article. \\ Generated by Web shop.]{ \includegraphics[width=0.30\textwidth]{figs/cart.png} \label{subfig:cart}} \hfill @@ -743,7 +743,7 @@ merchant, the customer may choose to cover them. morestring=[b]" } -\begin{figure*}[t!] +\begin{figure*}[p!] \lstset{language=HTML5} \lstinputlisting{figs/taler-presence-js.html} \caption{Sample code to detect the Taler wallet. Allowing the @@ -754,10 +754,27 @@ merchant, the customer may choose to cover them. \end{figure*} -\begin{figure*}[t!] +\begin{figure*}[p!] + \lstset{language={}} +\begin{lstlisting} +HTTP/1.1 402 Payment Required +Content-Type: text/html; charset=UTF-8 +X-Taler-Contract-Url: https://shop/generate-contract/42 + + + + + You do not seem to have Taler installed, here are other payment options ... + +\end{lstlisting} + \caption{Sample HTTP response to prompt the wallet to show an offer.} + \label{listing:http-contract} +\end{figure*} + +\begin{figure*}[p!] \lstset{language=HTML5} \lstinputlisting{figs/taler-contract.html} - \caption{Sample code to pass a contract to the Taler wallet. + \caption{Sample JavaScript code to prompt the wallet to show an offer. Here, the contract is fetched on-demand from the server. The {\tt taler\_pay()} function needs to be invoked when the user triggers the checkout.} @@ -787,7 +804,7 @@ a Taler wallet is installed (as it is in Figure~\ref{fig:shopping}). "exchanges":[{"master_pub":"1T5FA8VQHMMKBHDMYPRZA2ZFK2S63AKF0YTHJZWFKF45K2JGC8H0", "url":"https://exchange/"}], "expiry":"/Date(1480119270)/", - "fulfillment_url": "https://shop/essay/42", + "fulfillment_url": "https://shop/article/42?tid=249960194066269&time=1471479270", "max_fee":{"currency":"EUR","fraction":01,"value":0}, "merchant":{"address":"Mailbox 4242","jurisdiction":"Jersey","name":"Shop Inc."}, "merchant_pub":"Y1ZAR5346J3ZTEXJCHQY9NJN78EZ2HSKZK8M0MYTNRJG5N0HD520", @@ -804,27 +821,6 @@ a Taler wallet is installed (as it is in Figure~\ref{fig:shopping}). \label{listing:json-contract} \end{figure*} -\begin{figure*}[t!] - \lstset{language={}} -\begin{lstlisting} -HTTP/1.1 402 Payment Required -Content-Type: text/html; charset=UTF-8 -X-Taler-Contract-Url: https://shop/generate-contract/42 -... - - - - ... - - You do not seem to have Taler installed, here are - other payment options: - ... - -\end{lstlisting} - \caption{Sample HTTP response for a Web resource that requires a payment.} - \label{listing:http-contract} -\end{figure*} - \subsubsection{Offer} The offer URL of the Web shop can then initiate payments by sending a @@ -859,6 +855,41 @@ the {\em fulfillment} URL provided by the merchant in the contract \subsubsection{Fulfillment} +\begin{figure*}[t!] + \lstset{language=HTML5} +\begin{lstlisting} + taler.executePayment("2BAH2AT4GSG5JRM2W4YWTSYGY66EK4X8CX2V69D5VF7XV703AJMG", + "https://shop/pay", "https://shop/article/42", + (err) => { alert("Sending payment failed"); }); +\end{lstlisting} +\caption{Sample JavaScript code to trigger transmission of a payment to the merchant.} + \label{listing:javascript-execute} +\end{figure*} + + +\begin{figure*}[t!] + \lstset{language={}} +\begin{lstlisting} +HTTP/1.1 402 Payment Required +Content-Type: text/html; charset=UTF-8 +X-Taler-Contract-Hash: 2BAH2AT4GSG5JRM2W4YWTSYGY66EK4X8CX2V69D5VF7XV703AJMG... +X-Taler-Pay-Url: https://shop/pay +X-Taler-Offer-Url: https://shop/article/42 + + + + + You do not seem to have Taler installed, here are other payment options ... + +\end{lstlisting} +\caption{Sample HTTP response when the user agent navigates to a fulfillment + URL without the session state that indicates they have paid for the resource. + Note that unlike in Listing~\ref{listing:http-contract}, the response + references a contract that typically is already known to the wallet via its + hash code.} + \label{listing:http-execute} +\end{figure*} + The fulfillment URL uniquely identifies a purchase by some customer, while the offer URL identifies a generic offer that is not specific to a customer. The purchase identified by a fulfillment URL may have @@ -887,7 +918,7 @@ lost,\footnote{This can happen when when privacy conscious users browser) do not support persistent (non-session) cookies.} the Web store responds by (again) triggering a payment process (either via JavaScript or using {\tt 402 Payment Required}, see -Figure~\ref{listing:http-execute}). However, unlike the response from +Figures~\ref{listing:javascript-execute} and~\ref{listing:http-execute}). However, unlike the response from the offer URL, the 402 response from the fulfillment page includes the headers {\tt X-Taler-Contract-Hash}, {\tt X-Taler-Pay-Url} and {\tt X-Taler-Offer-Url}. @@ -907,33 +938,6 @@ already approved, for example because the user obtained the link from another user, the wallet navigates to the offer URL included in the header. -\begin{figure*}[t!] - \lstset{language={}} -\begin{lstlisting} -HTTP/1.1 402 Payment Required -Content-Type: text/html; charset=UTF-8 -X-Taler-Contract-Hash: 2BAH2AT4GSG5JRM2W4YWTSYGY66EK4X8CX2V69D5VF7XV703AJMG -X-Taler-Offer-Url: https://shop/article/42 -X-Taler-Pay-Url: https://shop/pay -... - - - - ... - - You do not seem to have Taler installed, here are - other payment options: - ... - -\end{lstlisting} -\caption{Sample HTTP response when the user agent navigates to a fulfillment - URL without the session state that indicates they have paid for the resource. - Note that unlike in Listing~\ref{listing:http-contract}, the response - references a contract that typically is already known to the wallet via its - hash code.} - \label{listing:http-execute} -\end{figure*} - \subsubsection{Discussion} Various failure modes are considered in this design: