TinyPass Developer's Resources

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

main:paywall [2013/12/11 15:51]
192.168.1.1 [onShowOffer ( meter )]
main:paywall [2015/07/21 23:21] (current)
Line 6: Line 6:
 ===== Adding a Callback to your Meter Configuration ===== ===== Adding a Callback to your Meter Configuration =====
  
-<code javascript>+<code javascript 5>
  
-  <script type="text/javascript">+<script type="text/javascript">
  
-    window._tpm = window._tpm || []; + window._tpm = window._tpm || []; 
-    window._tpm['paywallID'] = 'MYID'; + window._tpm['paywallID'] = 'MYID'; 
-    window._tpm['trackPageview'] = true;+ window._tpm['trackPageview'] = true;
  
-    //register your callback here + //register your callback here 
-    window._tpm['onMeterExpired'] = 'myExpiredMethod';+ window._tpm['onMeterExpired'] = 'myExpiredMethod';
  
-  </script>+</script>
  
 </code> </code>
  
 ====== Available callbacks ====== ====== Available callbacks ======
 +
 ===== onMeterExpired( meterDetails ) ===== ===== onMeterExpired( meterDetails ) =====
  
Line 53: Line 54:
 Example of Embedding the Curtain in a custom element: Example of Embedding the Curtain in a custom element:
  
-<code javascript>+<code javascript 5>
  
 window._tpm['onShowOffer'] = function(meter){ window._tpm['onShowOffer'] = function(meter){
Line 79: Line 80:
  
 Example: Example:
-  +<code javascript> 
-      "max_views": 10,  +
-      "views": 6,  + "max_views": 10,  
-      "views_left": 4 + "views": 6,  
-  }+ "views_left": 4 
 +} 
 +</code>
  
  
Line 94: Line 97:
  
 Example: Example:
-  +<code javascript> 
-      "expires": 1373481184,  +
-      "max_views": 3,  + "expires": 1373481184,  
-  + "max_views": 3,  
 + 
 +</code>
  
  
Line 106: Line 111:
 For demonstration purposes we are using the JQuery library but you could use any library of your choose as there is no dependency on JQuery. For demonstration purposes we are using the JQuery library but you could use any library of your choose as there is no dependency on JQuery.
  
-<code> +<code javascript 8
-    <script> +<script> 
-      /** + /** 
-       * onMeterActive +  * onMeterActive 
-       */ +  */ 
-      window._tpm['onMeterActive'] = function(meterDetails){ + window._tpm['onMeterActive'] = function(meterDetails){ 
-          console.log("Meter is active"); + console.log("Meter is active"); 
-           + //display the meter info for the user in a friendly way 
-          //display the meter info for the user in a friendly way + $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); 
-          $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); +
-      + /** 
-      /** +  * onMeterExpired 
-       * onMeterExpired +  */ 
-       */ + window._tpm['onMeterExpired'] = function(meterDetails ) { 
-      window._tpm['onMeterExpired'] = function(meterDetails ) { + console.log("Meter is expired"); 
-          console.log("Meter is expired"); +  
-           + //display the meter info for the user in a friendly way 
-          //display the meter info for the user in a friendly way + $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); 
-          $("body").append('<div class="status">' + meterDetails.views + ' of ' + meterDetails.max_views + '</div>'); +
-      + /** 
-      /** +  * onAccessGranted 
-       * onAccessGranted +  */ 
-       */ + window._tpm['onAccessGranted'] = function(accessDetails) { 
-      window._tpm['onAccessGranted'] = function(accessDetails) { + //format the epoch using Date 
-          //format the epoch using Date + var exp = new Date(0); 
-          var exp = new Date(0); + exp.setUTCSeconds(accessDetails.expires); 
-          exp.setUTCSeconds(accessDetails.expires); + console.log("Access granted (Expires: " + exp + ")"); 
-          console.log("Access granted (Expires: " + exp + ")"); + $("body").append('<div class="status">Member</div>'); 
-          $("body").append('<div class="status">Member</div>'); +
-      + 
-   + /** 
-      /** +  * onCheckoutSuccess 
-       * onCheckoutSuccess +  */ 
-       */ + window._tpm['onCheckoutSuccess'] = function(){ 
-      window._tpm['onCheckoutSuccess'] = function(){ + console.log("Checkout success!"); 
-          console.log("Checkout success!"); + //simple reload of page when purchase is successfull 
-          //simple reload of page when purchase is successfull + location.reload(); 
-          location.reload(); +
-      + /** 
-      /** +  * onShowOffer 
-       * onShowOffer +  */ 
-       */ + window._tpm['onShowOffer'] = function(meter){ 
-      window._tpm['onShowOffer'] = function(meter){ + console.log("onShowOffer"); 
-          console.log("onShowOffer"); + $("#offer-holder").append(meter.offerElem); 
-          $("#offer-holder").append(meter.offerElem); + $("#offer-holder").fadeIn('slow'); 
-          $("#offer-holder").fadeIn('slow'); + return false; 
-          return false; +
-      + 
-   +</script>
-  </script>+
          
 </code> </code>
 +