Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
209 lines (182 sloc) 11 KB
<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Lightning J, Paywall TA Demo</title>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<a class="navbar-brand justify-content-left" href="#">LightningJ Paywall TA Demo</a>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Project Doc</a>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
<div id="welcomeCard" class="card" >
<div class="card-body">
<h5 class="card-title">Bitcoin Price Prediction Service</h5>
<h6 class="card-subtitle mb-2 text-muted"><i>Cost:</i> 10 Satoshis</h6>
<p class="card-text">Click on button below do receive a Bitcoin price indication with guaranteed 50% prediction accuracy.</p>
<button id="welcomeCardBuyButton" type="button" class="btn btn-primary">Buy Prediction</button>
<div id="predictionCard" class="card d-none" >
<div class="card-body">
<h5 class="card-title">Bitcoin Prediction Generated</h5>
<p id="predictionText" class="card-text text-white"></p>
<button id="predictionCardBuyButton" type="button" class="btn btn-primary">Buy New Prediction</button>
<button id="predictionCardResetButton" type="button" class="btn btn-primary">Reset</button>
<div id="invoiceModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Invoice Received</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
<div id="invoiceModalBody" class="modal-body">
<div class="modal-footer justify-content-left">
<button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Cancel</button>
<div class="fixed-bottom bg-secondary text-white"><i>Disclamer:</i> This is not a real TA application. This is just a demo of LightingJ Paywall Framework. Do NOT consider this as financial advice in any way.</div>
<!-- JavaScript Required for Paywall-->
<script src=""></script>
<script src="" ></script>
<script src="" ></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
function requestTA(){
var paywallHttpRequest = new PaywallHttpRequest();
var invoiceExpireTimer;
// The invoice expiration that updates the remaining time.
function updateIntervalTime(){
var invoiceRemainingTime = paywallHttpRequest.paywall.getInvoiceExpiration().remaining();
var remainingTime = invoiceRemainingTime.minutes() + ":" + invoiceRemainingTime.seconds();
$('#invoiceModal').on('', function (event) {
console.log("Hidden: " + paywallHttpRequest.paywall.getState());
if(invoiceExpireTimer !== undefined){
// Catch event that Invoice Modal is closes and free allocated resources by
// calling the abort() method.
if(paywallHttpRequest.paywall.getState() !== PaywallState.SETTLED &&
paywallHttpRequest.paywall.getState() !== PaywallState.EXECUTED) {
// The Invoice event handler that adds invoice information to the modal and then displays it.
paywallHttpRequest.paywall.addEventListener("InvoiceListener", PaywallEventType.INVOICE, function (type, invoice) {
// Add a Paywall Invoice event Listener that displays the invoice for the user.
var modalBody = $('#invoiceModalBody')
var invoiceExpire = new PaywallTime(invoice.invoiceExpireDate)
modalBody.append("<h6 class='text-center'>Invoice Expires In: <span id='invoiceTimeRemaining'>" + invoiceExpire.remaining().minutes() + ":" + invoiceExpire.remaining().seconds() + "</span></h6>") // Time Left
modalBody.append("<img class='mx-auto d-block' src='" + invoice.qrLink + "'/>"); // QR
var amountInSat = new PaywallAmount(invoice.invoiceAmount).as(BTCUnit.SAT);
modalBody.append("<h6>Price: " + amountInSat + "</h6>") // Time Left
modalBody.append("<div class=\"accordion\" id=\"advancedAccordion\">\n" +
" <div id=\"welcomeCard2\" class=\"card\" >\n" +
" <div class=\"card-header\" id=\"advancedAccordionHeader\">\n" +
" <h6 class=\"mb-0\">\n" +
" <button class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" data-target=\"#advancedAccordionBody\" aria-expanded=\"false\" aria-controls=\"advancedAccordionBody\">\n" +
" Advanced\n" +
" </button>\n" +
" </h6>\n" +
" </div>\n" +
" <div id=\"advancedAccordionBody\" class=\"collapse\" aria-labelledby=\"advancedAccordionHeader\" data-parent=\"#advancedAccordion\">\n" +
" <div class=\"card-body\">\n" +
" <div class=\"card\" >\n" +
" <div class=\"card-body\">\n" +
" <h6 class=\"card-subtitle mb-2 text-muted\"><i>Invoice:</i></h6>\n" +
" <p id=\"bolt11Invoice\" class=\"card-text\">" + invoice.bolt11Invoice + "</p>\n" +
" </div>\n" +
" </div>\n" +
" <div class=\"card\" >\n" +
" <div class=\"card-body\">\n" +
" <h6 class=\"card-subtitle mb-2 text-muted\"><i>Node Info:</i></h6>\n" +
" <p id=\"nodeInfo\" class=\"card-text\">" + invoice.nodeInfo.connectString + "</p>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </div>"); // Advanced, with invoice and node
// Set the timer
invoiceExpireTimer = setInterval(updateIntervalTime,1000);
// Finally activate the invoice modal.
// Event listener that hides the modal upon settlement.
paywallHttpRequest.paywall.addEventListener("SettledListener", PaywallEventType.SETTLED, function (type, settlement) {
// Event listener that updates the modal with invoice expired information.
paywallHttpRequest.paywall.addEventListener("InvoiceExpiredListener", PaywallEventType.INVOICE_EXPIRED, function (type, invoice) {
var modalBody = $('#invoiceModalBody')
modalBody.append("<h6 class='text-center'>Invoice Expired</h6>") // Time Left
// The same onload handler that should have been used without paywall to call the service.
paywallHttpRequest.onload = function(){
if(paywallHttpRequest.status === 200) {
// Process the service response as would be done with a regular XMLHttpRequest
var response = JSON.parse(paywallHttpRequest.responseText);
var predictionText = $('#predictionText')
if (response.goingUp) {
} else {
// Error calling the underlying service.
alert("Error occurred calling the service.")
// Open up a connection to the paywalled service."GET","/tademo");
// Send the data to the service that will trigger the payment flow if required.
$("#predictionCardResetButton").click(function () {
You can’t perform that action at this time.