diff options
| author | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-11-29 21:50:29 +0100 |
|---|---|---|
| committer | Marcello Stanisci <marcello.stanisci@inria.fr> | 2016-11-29 21:50:29 +0100 |
| commit | 50bf4cde648d7f0377774560442ccb11fa6aa84b (patch) | |
| tree | b20c6205a915d1ad199ee2e54f0685935f5de902 /php | |
| parent | 48361f0958327b459d42f1a72ae70c10c554cae4 (diff) | |
| download | merchant-frontend-examples-50bf4cde648d7f0377774560442ccb11fa6aa84b.tar.gz merchant-frontend-examples-50bf4cde648d7f0377774560442ccb11fa6aa84b.tar.bz2 merchant-frontend-examples-50bf4cde648d7f0377774560442ccb11fa6aa84b.zip | |
documenting wallet detection
Diffstat (limited to 'php')
| -rw-r--r-- | php/doc/tutorial.texi | 79 |
1 files changed, 77 insertions, 2 deletions
diff --git a/php/doc/tutorial.texi b/php/doc/tutorial.texi index 5ae990b..4a31fc8 100644 --- a/php/doc/tutorial.texi +++ b/php/doc/tutorial.texi @@ -554,8 +554,83 @@ See below both parts: @section Reacting to the presence of a Taler wallet @cindex wallet -FIXME. -@c with and without JavaScript! +Taler offers the way to the frontend developer to detect whether +a user has the wallet installed in their browser, and take actions +accordingly. + +@subsection The no-JavaScript way +The follwing example shows all that is needed to perform the detection +without using JavaScript: + +@smallexample +<!DOCTYPE html> +<html lang="en" data-taler-nojs="true"> + <head> + <title>Tutorial</title> + <link rel="stylesheet" type="text/css" href="/web-common/taler-fallback.css" id="taler-presence-stylesheet" /> + </head> + <body> + <p class="taler-installed-hide"> + No wallet found. + </p> + <p class="taler-installed-show"> + Wallet found! + </p> + </body> +</html> +@end smallexample + +The @code{taler-fallback.css} is part of the Taler's @emph{web-common} repository, +available at @code{https://git.taler.net/web-common.git}. Please adjust the @code{href} +attribute in order to make it work with your Web site. + +The detection works by @code{taler-fallback.css} hiding any tag from the +@code{taler-installed-show} class, in case no wallet is installed. If otherwise +the wallet is installed, the wallet takes action by hiding any tag from +@code{taler-installed-hide} and overriding @code{taler-fallback.css} logic +by showing any tag from the @code{taler-installed-show} class. + +@subsection The JavaScript way + +In this case, the @code{taler-wallet-lib} helps the frontend, by providing +the way to register two callbacks: one to be executed if a wallet is present, +the other if it is not. See the example below: + +@smallexample +<html lang="en"> + <head> + <script src="/web-common/taler-wallet-lib.js" type="application/javascript"> + </script> + </head> + <body> + <div id="content"> + </div> + <script type="application/javascript"> + + content = document.getElementById("content"); + p = document.createElement("p"); + + function walletInstalled(){ + p.textContent = "Wallet installed!"; + content.appendChild(p); + } + function walletNotInstalled(){ + p.textContent = "Wallet not found."; + content.appendChild(p); + } + taler.onPresent(wallerInstalled); + taler.onAbsent(wallerNotInstalled); + </script> + </body> +</html> +@end smallexample + +@code{taler-wallet-lib.js} exports the @code{taler} object that +exposes the @code{onPresent} and the @code{onAbsent} functions needed +to register the frontend's callbacks. Thus the function @code{walletInstalled} +will be executed whenever a wallet is installed, and @code{walletNotInstalled} +if not. Note that since now we can use JavaScript we can register +callbacks that do more than just showing and hiding elements. @node Taler contracts |