diff --git a/examples/iap/README.md b/examples/iap/README.md
new file mode 100644
index 0000000..c2bd180
--- /dev/null
+++ b/examples/iap/README.md
@@ -0,0 +1,20 @@
+# Package for Google Play&XiaoMi Store
+1. Install Crosswalk App Tools, see https://github.com/crosswalk-project/crosswalk-app-tools for details.
+2. Change ```"xwalk_package_id"``` in manifest.json to the value below:
+   * ```"com.crosswalk.iapsample"``` for Google Play.
+   * ```"com.sdk.migame.payment"``` for XiaoMi Store.
+3. Download the extension zip file from https://github.com/crosswalk-project/crosswalk-android-extensions/releases and unpack it, change ```"xwalk_extensions"``` to the path of the extensions in manifest.json.
+4. Add the following additional permissions in the default AndroidManifest.xml:
+
+   ```
+   <uses-permission android:name="com.android.vending.BILLING" />
+   <uses-permission android:name="android.permission.GET_TASKS"/>
+   <uses-permission android:name="android.permission.GET_ACCOUNTS"/>
+   <uses-permission android:name="com.xiaomi.sdk.permission.PAYMENT"/>
+   ```
+5. Run ```crosswalk-pkg```:
+    ```
+    crosswalk-pkg --targets="arm" --platform="android" --release \
+    --crosswalk=/path/to/xwalk_app_template examples/iap
+    ```
+6. Sign the apk manually, see https://developer.android.com/tools/publishing/app-signing.html#signing-manually for details.
diff --git a/examples/iap/iap.html b/examples/iap/iap.html
index 7bcaacd..1168023 100644
--- a/examples/iap/iap.html
+++ b/examples/iap/iap.html
@@ -1,157 +1,158 @@
-<!DOCTYPE html>
-<html><head></head>
-
-<body>
-
-<style type="text/css">
-  body { margin: auto; width: 100%; }
-  .title { margin: 20; padding: 20; font-size: 42; font-weight: bold; text-align: center; }
-  div.centre {
-    background: blue;
-    width: 700px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .fuel,.first,.second,.third,.forth {
-    background: none repeat scroll 0 0;
-    float: left; width: 100px; margin: 1px; height: 20px;
-  }
-  .fuel { width: auto; }
-  .first  { color: red; background: red; }
-  .second { color: #FF8000; background: #FF8000; }
-  .third  { color: green; background: green; }
-  .forth  { color: #00B92F; background: #00B92F; }
-  .btnline { float: left; clear: left; }
-  .btn { font-size: 40; margin: 10px; padding: 10; width: 250px }
-</style>
-
-<div class="title">test</div>
-<p>
-<div class="centre">
-  <div class="fuel">Fuel:</div>
-  <div id="first" class="first"></div>
-  <div id="second" class="second"></div>
-  <div id="third" class="third"></div>
-  <div id="forth" class="forth"></div>
-
-  <div class="btnline" style="height: 20px"></div>
-  <div class="btnline">
-    <button id="btnDrive" class="btn">Drive!</button>
-    <button id="btnBuy" class="btn">Buy Gas</button>
-  </div>
-  <!-- TODO(hdq)
-  <div class="btnline">
-    <button id="btnUpgrade" class="btn">Upgrade</button>
-    <button id="btnInfinite" class="btn">Get Infinite Gas</button>
-  </div>
-  -->
-  <div class="btnline">
-    <button id="btnQuery" class="btn">Query Product Details</button>
-  </div>
-  <div class="btnline" id="queryDiv"></div>
-  <div class="btnline" id="resultDiv"></div>
-</div>
-
-<script>
-window.onload = function() {
-  if (typeof window.iap === 'undefined') {
-    document.title = 'Fail';
-    console.log("no IAP support");
-    return;
-  }
-
-  console.log("IAP Test - Will init IAP plugin");
-  var key = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsEVjLWKJ5B7EKjnH5NVx4eh83xntg1WXFIQhLXgtmiCU0Ro27dN8Q7Q5HIif4ugkFcQWFhlDC/WsliDKtLZQkadmS1sUweOanIo5+ZbNaQ1ITWwtkNdnPb+tRJCjhngft1hFIfLGsKrBMxS8slaWaQ537wgex74Pv5mxuQLhsFyei5GffzDQDz4KN6sQHPqtB+GLDWqKKk2bdAiopQRFRUwYR8edAYcHiMHHZSfidOjaYD1/timhFIUnwFihtvNy4K7OStjoy6kEwCmX9/zXS3SxKkOfk2bNg/Edc8xgym8GkfObUliySSNxS9ukzp1ShDuSjdwfJVt5mvmXk+7jiQIDAQAB';
-  iap.init(key);
-
-  var fuel=4;
-
-  var errorCallBack = function(error) {
-    document.title = 'Fail';
-    console.log(error);
-  }
-
-  function refresh() {
-    var d1 = document.getElementById("first");
-    var d2 = document.getElementById("second");
-    var d3 = document.getElementById("third");
-    var d4 = document.getElementById("forth");
-    if (fuel<1) d1.style.visibility='hidden';
-    else d1.style.visibility='visible';
-    if (fuel<2) d2.style.visibility='hidden';
-    else d2.style.visibility='visible';
-    if (fuel<3) d3.style.visibility='hidden';
-    else d3.style.visibility='visible';
-    if (fuel<4) d4.style.visibility='hidden';
-    else d4.style.visibility='visible';
-  }
-
-  var queryProductsCallBack = function(products) {
-    console.log("Products: " + JSON.stringify(products));
-    if (products.length == 0) {
-        document.getElementById("queryDiv").innerHTML = "No product available";
-        return;
-    }
-
-    document.getElementById("queryDiv").innerHTML = "";
-    for (var i=0; i<products.length; i++) {
-      var f1 = "ID: " + products[i]["productId"]+"<br>";
-      var f2 = "Price: " + products[i]["price"]+"<br>";
-      var f3 = "Currency: " + products[i]["price_currency_code"]+"<br>";
-      var f4 = "Title: " + products[i]["title"]+"<br>";
-      var f5 = "Description: " + products[i]["description"]+"<br>----------<br>"
-      document.getElementById("queryDiv").innerHTML += f1+f2+f3+f4+f5;
-    }
-  }
-
-  var buyCallBack = function(result) {
-    if (fuel<4) fuel+=1;
-    console.log(fuel);
-    refresh();
-
-    console.log("buy returns: "+JSON.stringify(result)); 
-    var orderId = result.orderId;
-    var packageName = result.packageName;
-    var productId = result.productId;
-    var purchaseTime = result.purchaseTime;
-    var purchaseState = result.purchaseState;
-
-    var m = new Date(1970,0,1);
-    m.setSeconds(purchaseTime/1000);
-    var dateStringGMT =
-      m.getUTCFullYear() +"/"+
-      ("0" + (m.getUTCMonth()+1)).slice(-2) +"/"+
-      ("0" + m.getUTCDate()).slice(-2) + " " +
-      ("0" + m.getUTCHours()).slice(-2) + ":" +
-      ("0" + m.getUTCMinutes()).slice(-2) + ":" +
-      ("0" + m.getUTCSeconds()).slice(-2);
-
-    document.getElementById("resultDiv").innerHTML += "Buy returned:"
-      + "<br>Order ID: " + orderId
-      + "<br>Package Name: " + packageName
-      + "<br>Product ID: " + productId
-      + "<br>Purchase Time(GMT): " + dateStringGMT
-      + "<br>Purchase State: " + purchaseState;
-  }
-
-  document.getElementById("btnQuery").onclick = function() {
-    console.log("Testing query products");
-    iap.queryProductDetails(["gas", "yearly", "premium"]).then(queryProductsCallBack, errorCallBack);
-  }
-
-  document.getElementById("btnDrive").onclick = function() {
-    console.log("Testing consume(local)");
-    if (fuel) fuel-=1;
-    console.log(fuel);
-    refresh();
-  }
-
-  document.getElementById("btnBuy").onclick = function() {
-    console.log("Testing buy");
-    iap.buy("gas").then(buyCallBack, errorCallBack);
-  }
-}
-</script>
-
-</body></html>
+<html>
+    <head>
+        <meta charset='utf-8'>
+        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
+        <style>
+            input.iapButton {
+                border:1px solid black;
+                height:30px;
+                width:40%;
+                margin: 5px;
+            }
+            input.iapDiv {
+                text-align:center;
+            }
+        </style>
+        <title>Sample of In-app purchase</title>
+    </head>
+
+    <script type='text/javascript'>
+        var noticeApple =  "<div style='color:red'>DO NOT USE REAL APPLE ID TO TEST!!!</div>" +
+                           "<div>Use the following account to run this demo:</div>" +
+                           "<div>User name: tom.wang@gmail.com</div>" +
+                           "<div>Password: Intel@123</div>";
+
+        var noticeGoogle = "<div style='color:red'>DO NOT USE REAL GMAIL TO TEST!!!</div>" +
+                           "<div>Use the following account to run this demo:</div>" +
+                           "<div>User name: web.otc.ssg@gmail.com</div>" +
+                           "<div>Password: Intel@123</div>";
+
+        var noticeXiaoMi = "<div>Please use your own XiaoMi ID to purchase and will make a charge.</div>"
+
+        var queryProducts = [];
+
+        function query() {
+            navigator.iap.queryProductsInfo(queryProducts).then(function(products) {
+                document.getElementById("result").innerHTML = "";
+                var buttonStyle = "display:inline-block; padding: 5px 20px; border: 1px solid black";
+                var html = "<ul>";
+                for (var i=0; i<products.length; i++) {
+                  html += "<li>" +
+                          "<h3>" + products[i]["title"] + "</h3>" +
+                          "<p>Description: " + products[i]["description"] + "</p>" +
+                          "<p>Price: " + products[i]["price"] + "</p>" +
+                          "<input " +
+                          "id='" + products[i]["productId"] + "' " +
+                          "value='buy " + products[i]["title"] + "' " +
+                          "onclick=purchase('" +  products[i]["productId"] + "') " +
+                          "type='button'>" +
+                          "</input>" +
+                          "</li>";
+                }
+                html += "</ul>";
+                document.getElementById("result").innerHTML = html;
+            });
+        }
+
+        function getReceipt() {
+            navigator.iap.getReceipt().then(function(receipt) {
+                document.getElementById("result").innerHTML = "Receipt: " + receipt;
+            }).catch(function(e) {
+                document.getElementById("result").innerHTML = "Operation failed: " + e.name;
+            });
+        }
+
+        function validateReceipt() {
+            navigator.iap.validateReceipt().then(function() {
+                document.getElementById("result").innerHTML = "Validation succeeded.";
+            }).catch(function(e) {
+                document.getElementById("result").innerHTML = "Validation failed: " + e.name;
+            });
+        }
+
+        function purchase(productId) {
+            navigator.iap.purchase({"productId": productId, "count": 1, "userInfo": "This is a test."}).then(function(result) {
+                document.getElementById("result").innerHTML = "Purchase succeeded.";
+            }).catch(function(e) {
+                document.getElementById("result").innerHTML = "Purchase failed: " + e.name;
+            });
+        }
+
+        function restore() {
+            navigator.iap.restore().then(function(products) {
+                var html = "<p>Products restored:</p>";
+                html += "<ul>";
+                for (var i=0; i<products.length; i++) {
+                  html += "<li>" + products[i] + "</li>";
+                }
+                html += "</ul>";
+                document.getElementById("result").innerHTML = html;
+            }).catch(function(e) {
+                document.getElementById("result").innerHTML = "Restore failed:" + e.name;
+            });
+        }
+
+        function init(channel) {
+            var html = "<div id='iapDiv'>" +
+                            "<input class='iapButton' type='button' value='Query Products' onclick=query() />" +
+                            "<input class='iapButton' type='button' value='Validate Receipt' onclick=validateReceipt() />" +
+                        "</div>" +
+                        "<div class='iapDiv'>" +
+                            "<input class='iapButton' type='button' value='Get Receipt' onclick=getReceipt() />" +
+                            "<input class='iapButton' type='button' value='Restore' onclick=restore() />";
+
+            if (channel == "XiaoMi") {
+                html += "<input class='iapButton' type='button' value='Purchase com.demo_1' onclick=purchase('com.demo_1') />";
+            }
+            html += "</div>";
+
+            document.getElementById("select").innerHTML = html;
+
+            var notice = "";
+            var options = {};
+
+            options.channel = channel;
+            options.debug = true;
+
+            if (channel == "Google") {
+                options.key = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsS5PnwtdKyYPJUe+Jr/mPtjfmIuP+fLcztR3t9ocRs4UfjsyunclopkM324NOoHGrKkkvcT+MDiP1IM2lSfH1Z39W8zMnZOZtlVSyiEitZVt39JL11A00PBn9zpBT0Zb4dm85bENFlw1B+F3K+QyDCjTJzkj/aG51NSEkXsEipyhUikgIp5HxiC63efpuH9G+Go7EThsdkDwn8yngm4KM6trtko+W/wGPYmk/LbZK2WEKpsGBOfJ3lzBf65+p8U1epd0/2Xf5qwz1dT5HiT6I7Wrh1VSRbGABOfDH4fjZVL5BVpoO9O7t9iyaBorPJbPgKXmx1aj0eG5ivNxtpNkUwIDAQAB";
+                notice = noticeGoogle;
+                queryProducts = ["com.crosswalk.apple", "com.crosswalk.grape"];
+            } else if (channel == "XiaoMi") {
+                notice = noticeXiaoMi;
+                options.key = '5691723970138';
+                options.id = '2882303761517239138';
+            } else if (channel == "Apple") {
+                notice = noticeApple;
+                queryProducts = ["org.xwalktest.iap", "org.xwalktest1.iap",
+                                 "org.xwalktest.cherry", "org.xwalktest.grape",
+                                 "org.xwalktest.peach"];
+            }
+
+            document.getElementById("notice").innerHTML = notice;
+            navigator.iap.init(options).then(function() {
+                document.getElementById("result").innerHTML += "Intialization succeeded.";
+            }).catch(function(e) {
+                document.getElementById("result").innerHTML += "Intialization failed: " + e.name;
+            });
+        }
+    </script>
+
+    <body>
+        <h2>Sample of In-app purchase</h2>
+        <div id="select">
+            <p>Select the store which you want to test.</p>
+            <div align="middle">
+                <input class='iapButton' type='button' value='Apple Store' onclick=init("Apple") />
+            </div>
+            <div align="middle">
+                <input class='iapButton' type='button' value='Google Play' onclick=init("Google") />
+            </div>
+            <div align="middle">
+                <input class='iapButton' type='button' value='XiaoMi Store' onclick=init("XiaoMi") />
+            </div>
+        </div>
+        <div id="notice"></div>
+        <div id="result" style="width:100%; height:100px; word-wrap: break-word; word-break: normal;"></div>
+    </body>
+</html>
diff --git a/examples/iap/iap.json b/examples/iap/iap.json
deleted file mode 100644
index 15579ca..0000000
--- a/examples/iap/iap.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "name": "iap-test",
-  "version": "0.0.0.1",
-  "app": {
-    "launch":{
-      "local_path": "iap.html"
-    }
-  }
-}
diff --git a/examples/iap/manifest.json b/examples/iap/manifest.json
new file mode 100644
index 0000000..20f13e5
--- /dev/null
+++ b/examples/iap/manifest.json
@@ -0,0 +1,7 @@
+{
+  "name": "InAppPurchaseDemo",
+  "start_url": "iap.html",
+  "xwalk_package_id": "com.crosswalk.iapsample",
+  "xwalk_app_version": "1.0.0",
+  "xwalk_extensions": ["/path/to/extensions"]
+}
