H5调起IOS原生商店支付

参考文档：http://www.html5plus.org/doc/zh_cn/payment.html

申请内购项目摘自 https://www.jianshu.com/p/1e79bfbe46e2

<template>
  <div id="app">
    <h3 @click="pay(ids[0])"></h3>
  </div>
</template>

<script>
    export default {
      data() {
        return {
           iap: {},
           ids: ["donation6","donation"],//应用内购项目，需要申请
        }
      },
     created() {
         document.addEventListener("plusready", function() {
            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
         });
         document.addEventListener("plusready",this.plusReady(),false);
     },
     methods: {
      plusReady() {
      let _this = this;
      // 获取支付通道
      plus.payment.getChannels(
        function(channels) {
          for (var i in channels) {
            var channel = channels[i];
            // 用于标识支付通道： "alipay" - 表示支付宝； "wxpay" - 表示微信支付； "appleiap" - 表示苹果应用内支付； "qhpay" - 表示360聚合支付（仅360手助流应用环境下支持）。
            if (channel.id === "appleiap") {
              _this.iap = channel;
              _this.requestOrder();
            }
          }
        },
        function(e) {
          console.log("获取支付通道失败：" + e.message);
        }
      );
    },
    requestOrder() {
      let _this = this;
      plus.nativeUI.showWaiting("检测支付环境...");
      _this.iap.requestOrder(_this.ids,function(e) {
          plus.nativeUI.closeWaiting();
          console.log("requestOrder success: " + JSON.stringify(e));
        },function(e) {
          console.log("requestOrder failed: " + JSON.stringify(e));
          plus.nativeUI.closeWaiting();
          plus.nativeUI.confirm("错误信息：" + JSON.stringify(e),
            function(e) {
              if (e.index == 0) {
                _this.requestOrder();
              } else {
                // back();
              }
            },
            "重新请求支付",["确定", "取消"]
          );
        }
      );
    },
    // 支付
    pay(id) {
      let _this = this;
      plus.nativeUI.showWaiting("", {style: "black",background: "rgba(0,0,0,0)"});
      plus.payment.request(_this.iap,{ productid: id },function(result) {
        plus.nativeUI.closeWaiting();
          _this.fetchPayStatus(result);
        },
        function(e) {
          console.log("错误信息",e)
          plus.nativeUI.closeWaiting();
          plus.nativeUI.alert(
            "错误信息：" + e.message,
            null,
            "支付失败：" + e.code
          );
        }
      );
    },
    fetchPayStatus(result) {
      // let ordercode = window.location.href.split("ordercode=")[1]; //收集支付需要专递的参数
      // console.log("ordercode", ordercode);
      axios({
        method: "post",
        url: "https://pay.52xxxxxdd.cn/PaiyxApxxxxxple/appxxxxxxcion",//换成自己请求支付的接口
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Accept: "application/json, text/plain, */*"
        },
        data: `transactionId=${result.transactionIdentifier}&receipt=${result.transactionReceipt}`,//传递的参数
      })
      // .then(res => {
      //   if(res.data.code === 1){
      //     window.location.href = `${window.location.origin}/bzjp/detail.html?ordercode=${ordercode}`;
      //   }
      // });
    },
  }
}
</script>