Ticker Widget triggers paymentΒΆ

To support more complex scenarios the product.startPayment() can be used to trigger the payment within active page elements as mentioned in sec-pay-on-page.

Let us assume a stock widget which refreshs every minute, and a business model which lets the consumer pay for ticker updates for an hour. We will do the following:

  1. Initialize the ticker and get data for the ticker
  2. Let consumer pay for the data, or check if it was already paid
  3. Show the data if it was already paid

The code could look as follows, given a Stocks JavaScript class to access and display stockdata:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// a payment instruction with validity set to 3600 seconds
var tickerpayinstruction = "eyJ0eXAxxxJ9.eyJwYXlxxxxx3MzR9.bl2xxKn1g";
var tickerpay = new millipay.Product(tickerpayinstruction);

var fetchDataAndPay = function(){
   Stocks.fetchData(); //update data
   // let the user pay for the data, if it is still within
   // the 3600 seconds period, the data gets displayed by
   // the onAccessAuthorization.call(function()...
   tickerpay.startPayment();
}

tickerpay.onAccessAuthorization
         .call(
            function(){
               // display the last stockdata
               Stocks.display();
               // load the next data in 60 seconds
               window.setTimeout(
                  fetchDataAndPay,
                  60000
               );
            }
         );


 // start inital fetch and pay
 fetchDataAndPay();

Hint

The above pseudo code does not provide answers how to place the payment gui elements. With the default GUI in place the pay process displays modal dialogs which are overlays over the complete page. A custom GUI can be provided to achieve better page integration.