j3k0/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
    </head>
    <body>
      <div class="app">
        <p id="locked">FEATURE LOCKED</p>
        <div id="nonconsumable1-purchase">Please wait...</div>
      </div>
      <script type="text/javascript" src="cordova.js"></script>
      <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

## index.js
document.addEventListener('deviceready', initStore);
document.addEventListener('deviceready', refreshLockedUI);

function initStore() {

  if (!window.store) {
    console.log('Store not available');
    return;
  }

  store.verbosity = store.INFO;
  store.register({
    id:    'nonconsumable1',
    type:   store.CONSUMABLE
  });

  store.error(function(error) {
    console.log('ERROR ' + error.code + ': ' + error.message);
  });

  store.when('nonconsumable1').updated(refreshProductUI);
  store.when('nonconsumable1').approved(function(p) {
    p.verify();
  });
  store.when('nonconsumable1').verified(finishPurchase);

  store.refresh();
}

function refreshLockedUI() {
  document.getElementById('locked').textContent =
    'Feature ' + window.localStorage.unlocked === 'YES' ? 'UNLOCKED! \o/' : 'locked :(';
}

function refreshProductUI(product) {
  const info = product.loaded
  ? `<h1>${product.title}</h1>` +
    `<p>${product.description}</p>` +
    `<p>${product.price}</p>`
  : '<p>Retrieving info...</p>';
  const button = product.canPurchase
  ? '<button onclick="purchaseNonConsumable1()">Buy Now!</button>'
  : '';
  const el = document.getElementById('nonconsumable1-purchase');
  el.innerHTML = info + button;
}

function purchaseNonConsumable1() {
  store.order('nonconsumable1');
}

function finishPurchase(p) {
  window.localStorage.unlocked = 'YES';
  p.finish();
  refreshLockedUI();
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
	<meta name="format-detection" content="telephone=no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
	<title>Hello World</title>
	</head>
	<body>
	<div class="app">
	<p id="locked">FEATURE LOCKED</p>
	<div id="nonconsumable1-purchase">Please wait...</div>
	</div>
	<script type="text/javascript" src="cordova.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	</body>
	</html>
	document.addEventListener('deviceready', initStore);
	document.addEventListener('deviceready', refreshLockedUI);

	function initStore() {

	if (!window.store) {
	console.log('Store not available');
	return;
	}

	store.verbosity = store.INFO;
	store.register({
	id: 'nonconsumable1',
	type: store.CONSUMABLE
	});

	store.error(function(error) {
	console.log('ERROR ' + error.code + ': ' + error.message);
	});

	store.when('nonconsumable1').updated(refreshProductUI);
	store.when('nonconsumable1').approved(function(p) {
	p.verify();
	});
	store.when('nonconsumable1').verified(finishPurchase);

	store.refresh();
	}

	function refreshLockedUI() {
	document.getElementById('locked').textContent =
	'Feature ' + window.localStorage.unlocked === 'YES' ? 'UNLOCKED! \o/' : 'locked :(';
	}

	function refreshProductUI(product) {
	const info = product.loaded
	? `<h1>${product.title}</h1>` +
	`<p>${product.description}</p>` +
	`<p>${product.price}</p>`
	: '<p>Retrieving info...</p>';
	const button = product.canPurchase
	? '<button onclick="purchaseNonConsumable1()">Buy Now!</button>'
	: '';
	const el = document.getElementById('nonconsumable1-purchase');
	el.innerHTML = info + button;
	}

	function purchaseNonConsumable1() {
	store.order('nonconsumable1');
	}

	function finishPurchase(p) {
	window.localStorage.unlocked = 'YES';
	p.finish();
	refreshLockedUI();
	}