merchant-frontend-examples

ZZZ: Inactive/Deprecated
Log | Files | Refs

wallet-detection.texi (2228B)

      1 @c Section on how to detect the Taler wallet
      2 
      3 @node Detecting the presence of the Taler wallet
      4 @section Detecting the presence of the Taler wallet
      5 @cindex wallet
      6 
      7 Taler offers the way to the frontend developer to detect whether
      8 a user has the wallet installed in their browser, and take actions
      9 accordingly.
     10 
     11 @subsection The no-JavaScript way
     12 The follwing example shows all that is needed to perform the detection
     13 without using JavaScript:
     14 
     15 @smallexample
     16 <!DOCTYPE html>
     17 <html lang="en" data-taler-nojs="true">
     18   <head>
     19     <title>Tutorial</title>
     20     <link rel="stylesheet"
     21           type="text/css"
     22           href="/web-common/taler-fallback.css"
     23           id="taler-presence-stylesheet" />
     24   </head>
     25   <body>
     26     <p class="taler-installed-hide">
     27       No wallet found.
     28     </p>
     29     <p class="taler-installed-show">
     30       Wallet found!
     31     </p>
     32   </body>
     33 </html>
     34 @end smallexample
     35 
     36 The @code{taler-fallback.css} is part of the Taler's @emph{web-common} repository,
     37 available at @code{https://git.taler.net/web-common.git}.  Please adjust the @code{href}
     38 attribute in order to make it work with your Web site.
     39 
     40 The detection works by @code{taler-fallback.css} hiding any tag from the
     41 @code{taler-installed-show} class, in case no wallet is installed.  If otherwise
     42 the wallet is installed, the wallet takes action by hiding any tag from the
     43 @code{taler-installed-hide} class and overriding @code{taler-fallback.css} logic
     44 by showing any tag from the @code{taler-installed-show} class.
     45 
     46 @subsection The JavaScript way
     47 
     48 @code{taler-wallet-lib.js} helps the frontend, by providing the way to register two
     49 callbacks: one to be executed if a wallet is present, the other if it is not.
     50 See the example below:
     51 
     52 @smallexample
     53 // js-wallet.html
     54 @verbatiminclude ../../common/html/js-wallet.html
     55 @end smallexample
     56 
     57 @code{taler-wallet-lib.js} exports the @code{taler} object that
     58 exposes the @code{onPresent} and the @code{onAbsent} functions needed
     59 to register the frontend's callbacks.  Thus the function @code{walletInstalled}
     60 will be executed whenever a wallet is installed, and @code{walletNotInstalled}
     61 if not.  Note that since now we can use JavaScript we can register
     62 callbacks that do more than just showing and hiding elements.