commit 3cc92f8b28985d0854c98d59803bd817521df3a8
parent c17064ee27a806b570dad1f18bd8f870e67a8584
Author: Marcello Stanisci <marcello.stanisci@inria.fr>
Date: Tue, 6 Dec 2016 19:31:39 +0100
Offering contracts the JS way
Diffstat:
4 files changed, 119 insertions(+), 3 deletions(-)
diff --git a/php/doc/tutorial.texi b/php/doc/tutorial.texi
@@ -825,10 +825,36 @@ yet implemented in the wallet.
@node Payments using JavaScript
@section Triggering payments using JavaScript
+
+Please note that the following examples are purely instructional and NOT TESTED
+along with the tutorial code.
+
@cindex JavaScript
@subsection Offering contracts
-FIXME/TODO
+
+Offering contracts the JavaScript way doesn't require us to set HTTP
+headers, and so -- in a minimalistic implementation -- the donation button
+should just hit a HTML page that invokes the @code{offerContractFrom} function,
+from the @code{taler-wallet-lib.js} library.
+
+Thus our homepage can now look as follows
+
+@smallexample
+// ../index-js.html
+@verbatiminclude ../index-js.html
+@end smallexample
+
+@code{donate-js.html} is now in charge of calling @code{offerContractFrom}
+passing the contract URL to it, which is @code{"/generate-contract.php"} in
+our example. See below.
+
+@smallexample
+// ../donate-js.html
+@verbatiminclude ../donate-js.html
+@end smallexample
+
+Please make sure that @code{taler-wallet-lib.js} location is valid.
@subsection Receiving payments
@cindex payment
@@ -837,8 +863,8 @@ In the example in section @ref{Initiating the payment process}, the fulfillment
handler @code{/fulfillment.php} triggers the payment in the wallet by returing
the three needed values (contract hashcode, pay URL, offer URL) via HTTP headers.
-The same action can be accomplished *with* JavaScript, thanks to @code{taler-wallet-lib.js}
-of @emph{web-common} repository.
+The same action can be accomplished @emph{with} JavaScript, thanks to
+@code{taler-wallet-lib.js} of @emph{web-common} repository.
The fulfillment handler needs just to call the function @code{executePayment} feeding it
with the needed three parameters. The wallet will then get triggered and proceed with the
payment. See below a full example:
@@ -848,6 +874,21 @@ payment. See below a full example:
@verbatiminclude ../fulfillment-js.php
@end smallexample
+Note that, in order to use this fulfillment handler for the tutorial, you need to
+specify it in the contract's ``fulfillment_url'' field:
+
+@smallexample
+@{
+... contract fields ..
+
+"fulfillment_url": "/fulfillment-js.php?transaction_id=<TRANSACTION_ID>& \
+ timestamp=<CONTRACTTIMESTAMP>"
+...
+@}
+@end smallexample
+
+Additionally, you should also make sure that @code{taler-wallet-lib.js} location
+is valid.
@node The Fulfillment page
@section Design considerations for the fulfillment page
diff --git a/php/donate-js.html b/php/donate-js.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <script src="/taler-wallet-lib.js" type="application/javascript"></script>
+ <script>
+ /**
+ * This function will retrieve the contract from
+ * "/generate-contract.php" and then hand it to the wallet.
+ */
+ taler.offerContractFrom("/generate-contract.php");
+ </script>
+ <title>Select payment method</title>
+ </head>
+ <body>
+ <!-- To be shown if the wallet is not installed -->
+ Here you should put the HTML for the non-Taler (credit card) payment.
+ </body>
+</html>
diff --git a/php/fulfillment-js.php b/php/fulfillment-js.php
@@ -0,0 +1,44 @@
+<?php
+ // This file is in the public domain.
+
+ include 'contract.php';
+ include 'backend.php';
+ include 'error.php';
+
+ session_start();
+
+ if(pull($_SESSION, 'paid', false)){
+ echo sprintf("<p>Thanks for your donation!</p>
+ <br>
+ <p>The transaction ID was: %s; use it to
+ track your money.</p>",
+ $_SESSION['transaction_id']);
+ return;
+ }
+
+ $_SESSION['transaction_id'] = $_GET['transaction_id'];
+
+ $now = new DateTime();
+ $now->setTimestamp(intval($_GET["timestamp"]));
+
+ $rec_proposal = make_contract(intval($_GET['transaction_id']), $now);
+ $response = post_to_backend("/contract", $rec_proposal);
+ http_response_code($response["status_code"]);
+ if (200 != $response["status_code"]) {
+ echo build_error($response,
+ "Failed to reconstruct the contract",
+ $response['code']);
+ return;
+ }
+
+ // Import the script
+ echo "<script src=\"/taler-wallet-lib.js\" type=\"application/javascript\"></script>";
+ // Invoke executePayment(). Note that the returned status code
+ // does not matter now, so 200 OK is fine.
+ $body = json_decode($response['body']);
+ echo sprintf("<script>taler.executePayment(\"%s\", \"%s\", \"%s\");</script>",
+ $body->H_contract,
+ url_rel("/pay.php"),
+ url_rel("/generate-contract.php"));
+ return;
+?>
diff --git a/php/index-js.html b/php/index-js.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <!-- This file is in the public domain -->
+ <head>
+ <title>A donation button</title>
+ </head>
+ <body>
+ <!-- NOTE, we hit a HTML page now, instead of some PHP script -->
+ <form action='/donate-js.html' method='GET'>
+ <input type='submit' value='Donate!'></input>
+ </form>
+ </body>
+</html>
