WeChat公式アカウントWeb支払いの実装

1.支払いjs参照を追加する

 <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2.特定の実装プロセス：

1.最初に支払い注文番号を取得します

2.支払注文番号に従って支払パラメータを取得します

3. JavaScript経由でgetBrandWCPayRequestインターフェイスを呼び出してWeChat支払いリクエストを開始し、ユーザーが支払いプロセスに入ります

4.ユーザーが支払いに成功して[完了]ボタンをクリックすると、マーチャントのフロントエンドはJavaScriptの戻り値を受け取ります。販売者は、支払いが正常に表示される静的ページに直接ジャンプできます。

5.マーチャントのバックオフィスは、WeChatオープンプラットフォームから支払い成功コールバック通知を受け取り、注文の支払いが成功したことをマークします。

3.お支払い例

//ユーザーの再充電を想定

async chargeClick() {
      if (!this.validaPhone()) return;
      if (!this.userName) {
        this.$toast('请输入会员姓名');
        return;
      }
      if (!this.cashMoney || isNaN(this.cashMoney) || this.cashMoney <= 0) {
        this.$toast('请输入正确金额');
        return;
      }

      if ((this.cashMoney + '').split('.')[1] && (this.cashMoney + '').split('.')[1].length > 2) {
        this.$toast('金额最多输入两位小数');
        return;
      }
      let data = {
        ShopNo: this.shopId, // 门店编号,
        Name: this.userName, //会员姓名,
        Phone: this.userPhone, //手机号,
        RechargeMoney: +this.cashMoney //充值金额
      };
      let res = await customerRecharge(data);
      if (res.IsSuccess) {
        this.getPayParams(res.Result.OuterMiJiRechargeOrderNo);
      }
    },

	//通过支付订单号获取支付参数
    async getPayParams(orderNo) {
      const params = {
        M: false,
        OrderNo: orderNo
      };
      let res = await getwxjsapiparam(params);
      if (res.IsSuccess) {
        this.appParams = res.Result;
        this.initPay();
      }
    },

//获取到支付参数后调用微信支付api 进行支付
initPay() {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },

    onBridgeReady() {
      const that = this;

      WeixinJSBridge.invoke('getBrandWCPayRequest', this.appParams, function(res) {
        var msg = res.err_msg.split(':')[1];
        if (msg === 'ok') {
          // that.$toast('支付成功');
          that.$router.replace('/recharge/rechargeSuccess');
        } else if (msg === 'cancel') {
          that.$toast('用户取消支付');
        } else {
          that.$toast(msg);
        }
      });
    },