支付組件

通過微信掃碼，在微信瀏覽器內打開網頁，提交訂單並進行微信支付的前端代碼

jQuery：

VUE項目：

	// 確定支付
	       pay(msg){
	         //console.log('用戶選擇的支付方式===' + msg)
	         var that = this;
	        console.log('用戶uid===' + that.uid)
	        console.log('訂單號oid===' + that.oid)
	        if(msg[0] == 2){
	        //   that.$vux.loading.show({
	        //       text: '支付跳轉中'
	        //   });
	          that.wePay()
	        }else{
	          that.$vux.toast.text('請選擇支付方式', 'middle');
	        }
	      },
	
	
	  // 微信支付
	      wePay(){
	        var that = this;
	        that.$vux.loading.show({
	              text: '支付跳轉中~' 
	          });
	        that.$axios.post('webPay/?oid=' + that.oid + '&price=' + that.price).then(response => {
	          that.msg = response;
	          that.$vux.loading.hide()
	          that.callpay(response.data)
	        })
	        .catch((error) => {
	          // alert(error)
	          setTimeout(function(){
	            //that.$vux.loading.hide()
	            that.closePayModal();
	            that.$vux.toast.show("支付失敗 ",'middle');
	            // that.$router.push({name: 'index'});
	        },1000)
	      })
	    },
	
	
	    callpay(data){
	        var that = this;
			if (typeof WeixinJSBridge == "undefined"){
			    if( document.addEventListener ){
	                document.addEventListener('WeixinJSBridgeReady', 
	                that.jsApiCall(data), false);
			    }else if (document.attachEvent){
	                document.attachEvent('WeixinJSBridgeReady',  
	                that.jsApiCall(data)); 
	                document.attachEvent('onWeixinJSBridgeReady',  
	                that.jsApiCall(data)); 
			    }
			}else{
			    that.jsApiCall(data);
			}
	    },
	
	
	    jsApiCall(data){
	        var that = this;
			var new_data = JSON.parse(decodeURIComponent(data));     //此處很關鍵，
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest',
				new_data,
				function(res){
	    			if(res.err_msg == "get_brand_wcpay_request:ok" ){
	    				 location.href = "{:url('/order_status')}";
			      		// 使用以上方式判斷前端返回,微信團隊鄭重提示：
			            //res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
		      		}else{
		      			alert("支付失敗!");
		      		}
				}
			);
		}

使用cordova插件的寫法：

// 支付寶支付
      aliPay(){
        var that = this;
        that.$axios.post('appAliPay/?oid=' + that.oid + '&price=' + that.amountPaid).then(response => {
          console.log(response.data);
          //return false;
          if (response.data.payInfo) {
            var payInfo = response.data.payInfo;
            cordova.plugins.alipay.payment(payInfo, function (result) {
              //alert('支付結果：' + result)
              that.$vux.loading.hide()
              that.$vux.toast.show(result,'middle');
              if(result.resultStatus == '9000'){
                that.$vux.toast.show('支付成功！','middle');
              }else if(result.resultStatus == '8000'){
                that.$vux.toast.show('正在處理中！','middle');
              }else if(result.resultStatus == '4000'){
                that.$vux.toast.show('訂單支付失敗！','middle');
              }else if(result.resultStatus == '6001！'){
                that.$vux.toast.show('用戶中途取消','middle');
              }else if(result.resultStatus == '6002'){
                that.$vux.toast.show('網絡連接出錯！','middle');
              }else{
                that.$vux.toast.show('未知錯誤！','middle');
              }
              that.closePayModal();
              that.$router.replace({name: 'Order'});
            }, function (reason) {
              that.$vux.loading.hide()
              that.closePayModal();
              that.$vux.toast.show(reason.memo,'middle');
              that.$router.replace({name: 'Order'});
            });
          }else{
            //console.log("喚起支付失敗");
            that.$vux.loading.hide()
            that.closePayModal();
            that.$vux.toast.show("支付失敗",'middle');
            that.$router.replace({name: 'Order'});
          }
        }).catch((error) => {

        })
      },

      // 微信支付
      wePay(){
        var that = this;
        that.$axios.post('appWXPay/?oid=' + that.oid + '&price=' + that.amountPaid).then(response => {
          console.log(response.data)
          if (response.data.data.sign && response.data.data.prepayid){
            var params = {
              mch_id: response.data.data.partnerid, // merchant id
              prepay_id: response.data.data.prepayid, // prepay id returned from server
              nonce: response.data.data.noncestr, // nonce string returned from server
              timestamp: response.data.data.timestamp, // timestamp
              sign: response.data.data.sign, // signed string
            };
            //console.log("插件參數：");
            //console.log(params);
            Wechat.sendPaymentRequest(params, function (result) {
              console.log('支付結果：' + result)
              // alert('支付結果：' + result)
              that.$vux.loading.hide()
              that.closePayModal();
              that.$vux.toast.show(result,'middle');
              that.$router.push({name: 'Order'});
            }, function (reason) {
              //console.log('支付失敗' + reason)
              that.$vux.loading.hide()
              that.closePayModal();
              that.$vux.toast.show("支付失敗: " + reason,'middle');
              that.$router.push({name: 'Order'});
            });
          }else{
            that.$vux.loading.hide()
            that.closePayModal();
            that.$vux.toast.show("支付失敗 ",'middle');
            that.$router.push({name: 'Order'});
          }
        }).catch((error) => {
          // alert(error)
            that.$vux.loading.hide()
            that.closePayModal();
            that.$vux.toast.show("支付失敗 ",'middle');
            that.$router.push({name: 'Order'});
        })
      },