Micro Example
In-App Purchase involves a fair amount of configuration. In order to get a glimpse at a complete integration, you'll find here a minimal example and the expected result when run on a device.
This example is a Cordova application. The
index.html does nothing but load js/index.js.1
document.addEventListener('deviceready', onDeviceReady);
2
3
var myProduct;
4
5
function onDeviceReady() {
6
const {store, ProductType, Platform} = CdvPurchase;
7
refreshUI();
8
store.register([{
9
type: CdvPurchase.CONSUMABLE,
10
id: 'my_product',
11
platform: Platform.TEST,
12
]});
13
store.when()
14
.productUpdated(refreshUI)
15
.approved(finishPurchase);
16
store.initialize([Platform.TEST]);
17
}
18
19
function finishPurchase(p) {
20
localStorage.goldCoins = (localStorage.goldCoins | 0) + 10;
21
p.finish();
22
refreshUI();
23
}
24
25
function refreshUI() {
26
const {store, ProductType, Platform} = CdvPurchase;
27
myProduct = store.get('my_product', Platform.TEST);
28
const myTransaction = store.findInLocalReceipts(myProduct);
29
const button = `<button onclick="myProduct.getOffer().order()">Purchase</button>`;
30
31
document.getElementsByTagName('body')[0].innerHTML = `
32
<div>
33
<pre>
34
Gold: ${localStorage.goldCoins | 0}
35
36
Product.state: ${myTransaction ? myTransaction.state : ''}
37
.title: ${myProduct ? myProduct.title : ''}
38
.descr: ${myProduct ? myProduct.description : ''}
39
.price: ${myProduct ? myProduct.pricing.price : ''}
40
41
</pre>
42
${myProduct.canPurchase ? button : ''}
43
</div>`;
44
}
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Launching this on a device...
Note that it's a simple example that doesn't handle error cases, but it's fully functional. In-App Purchases don't have to hard!
Last modified 10mo ago