Skip to content

Instantly share code, notes, and snippets.

@j3k0
Last active September 15, 2022 09:51
Show Gist options
  • Save j3k0/3324bb8e759fef4b3054b834a5a88500 to your computer and use it in GitHub Desktop.
Save j3k0/3324bb8e759fef4b3054b834a5a88500 to your computer and use it in GitHub Desktop.
Tutorial Cordova In-App Purchase Consumable
<!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="gold-coins">Gold:</p>
<div id="consumable1-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', refreshGoldCoinsUI);
function initStore() {
if (!window.store) {
console.log('Store not available');
return;
}
store.verbosity = store.INFO;
store.register({
id: 'cc.fovea.purchase.consumable1',
alias: 'my_consumable1',
type: store.CONSUMABLE
});
store.error(function(error) {
console.log('ERROR ' + error.code + ': ' + error.message);
});
store.when('my_consumable1').updated(refreshProductUI);
store.when('my_consumable1').approved(function(p) {
p.verify();
});
store.when('my_consumable1').verified(finishPurchase);
store.refresh();
}
function refreshGoldCoinsUI() {
document.getElementById('gold-coins').innerHTML =
'Gold: <strong>' + (window.localStorage.goldCoins | 0) + '</strong>';
}
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="purchaseConsumable1()">Buy Now!</button>'
: '';
const el = document.getElementById('consumable1-purchase');
el.innerHTML = info + button;
}
function purchaseConsumable1() {
store.order('my_consumable1');
}
function finishPurchase(p) {
window.localStorage.goldCoins = (window.localStorage.goldCoins | 0) + 10;
p.finish();
refreshGoldCoinsUI();
}
@daemswibowo
Copy link

daemswibowo commented Sep 15, 2022

I did add the <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 then my app can't access to my api, it say Refused to connect to because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy. Any clue to fix this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment