Pay for Read More

Hint

You can see this example in action on the online editor js.do or the hosted example.

This is the most simple integration scenario. You have content in one or more HTML elements embedded and hidden on the page and you want to show the content after payment succeeded, or in general after access authorization was given. Also, once access authorization was granted, the pay button is no longer necessary to remain on the page. The HTML can look like this:

<p>
  Some teaser text...
</p>
<p id="content" style="display: none">
  Lorem ipsum.
  <img src="graph.jpg" />
</p>
<button id="readonButton">
  Read more (EUR 0.10)
</button>

The necessary code to implement the functionality described above looks like this:

// A payment token including the pay instruction data generated on
// the server:
var token = "eyJ0eXAxxxJ9.eyJwYXlxxxxx3MzR9.bl2xxKn1g";

// Create a new `product` instance with the token as parameter:
var product = new millipay.Product(token);

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

// If the item is paid, show the content, and hide the buy button.
product.onAccessAuthorization
       .show("#content")
       .hide("#readonButton");

For many use cases it is advantageous when already logged in customers can automatically access the content they have already bought (within the product’s validity, see payload). To implement automatic re-access on pageload, simply add:

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