Pay and Navigate To Detail

Hint

You can see this example in action on the hosted example.

Pay on Index Page, and move to Detail Page

For this example we have use the following URL structure:

  • http://www.acme.com/index
  • http://www.acme.com/sports/3lkjdfu38-roger-federer-heading-for-another-victory
  • http://www.acme.com/science/zh8dd43q-mammoths-extinction-saint-paul-island-alaska

The index page presents an overview of the available items. We assume each item has a related element to be clicked on, identified with an id=readon-3lkjdfu38. Furthermore it has an associated detail URL e.g. http://www.acme.com/sport/3lkjdfu38-roger-federer-heading-for-another-victory.

On the Index Page, each item gets a pay instruction attached as follows:
  
 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
29
30
// A payment token including the pay instruction data generated on
// the server:
var payinstruction1 = "eyJ0exxxxJ9.eyJwYXlxxxx30.nTriTxxxxl5C2n";

// Create a new payment process specified by the pay instruction
// and associated with your product,
var product1 = new millipay.Product(payInstruction1);

// Use the convenience function to add an on-click handler to the
// active element. Instead of "#readon-3lkjdfu38" you can pass
// anything that is parseable by Jquery's $() function.
product1.registerStartPaymentClick("#readon-3lkjdfu38");

// If the pay click is successfully processed, let's navigate
// to the items detail-page where the content resides.
var detailUrl = "http://www.acm.com/[…]-for-another-victory";
product1.onAccessAuthorization
        .navigateTo(detailUrl);

// If the pay process is aborted by the user, you may want to
// - record this in your statistics,
// - show a dialog with an alternate offer
// - …
product1.onUserAbort
        .call(
          function(){
            console.log("User did aborted payment for " +
                        "#readon-3lkjdfu38");
          }
        );

Given the payment was a success, the browser will navigate to the detail page.

The following has to be implementend on the detail page:
  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// Use the same pay instruction as on the index page:
var payinstruction = "eyJ0eXAxxxJ9.eyJwYXlxxxxx3MzR9.bl2xxKn1g";

// Initialize the pay process on this page, too:
var product = new millipay.Product(payinstruction);

// Check if the item is already paid, once the page is loaded:
product.tryAccessOnPageLoad();

// Add a click handler to start the pay process, if needed:
product.registerStartPaymentClick("#readonButton");

// If the item is paid, show the content, and hide the buy button.
// Either caused by the page load because the item was already paid,
// or by paying after the pay button click.
product.onAccessAuthorization
       .show("#content")
       .hide("#readonButton");

Hint

The detail page implements the payment process independent from the index page payment process. Thus, if users navigate directly to the detail page, they are still able to pay for the product.