React Js 微信支付 简单封装

本文出自：

http://blog.csdn.net/wyk304443164/

/**
 * Created by wuyakun on 2017/5/8.
 */

import common from './common';
import Fetch from './FetchIt';
import API_URL from "./url";

let Pay = {};

/**
 * 支付的回调
 */
let payCallback;

/**
 * 开始支付--这个方法其实是从后台请求微信支付签名。成功继续，失败回调
 * @param _order_id 传order_id即可
 * @param _thisObj 传this即可
 * @param _payType 支付类型--暂时只有微信
 * @param _callback 回调 true or false
 */

Pay.done = function (_order_id, _thisObj, _payType, _callback) {
    let postData = {
        order_id: _order_id,
    };
    if (typeof _callback === "function") {
        payCallback = _callback;
    }
    Fetch.postObjData(API_URL.mobile.payUrl, postData).then((data) => {
        this.doneResponse(data);
    }).catch(() => {
        payCallback(false);
    });
};

Pay.doneResponse = function (result) {
    this.callPay(result);
};

Pay.callPay = function (code) {
    if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
        }
    } else {
        this.jsApiCall(code);
    }
};

Pay.jsApiCall = function (code) {
    WeixinJSBridge.invoke('getBrandWCPayRequest', code, function (res) {
        if (!common.isNull(res) && !common.isNull(res.err_msg) && res.err_msg.indexOf('ok') > 0) {
            payCallback(true);
        } else {
            payCallback(false);
        }
    });
};

//退款---------------------没有了！！！！！！！！！！
let Refund = {};

//退款
Refund.done = function (order_id, callback) {
    let postData = {
        order_id: order_id,
    };
    Fetch.postObjData(API_URL.mobile.refundUrl, postData).then((data) => {
        console.log(data);
        if (typeof callback === "function") {
            callback();
        }
        //需要判断是否成功
    });
};

export {Pay as default, Refund}

调用也很简单

import Pay from '../../common/PayRefund';

startPay = () => {
        let id = '7018253979853';
        let _that = this;

        Pay.done(id, _that, 1, is_true => {
            if (is_true) {
                // 支付成功后的逻辑
                alert('支付成功');
            } else {
                // 支付失败后的逻辑
                alert('支付失败');
            }
        });
    };

其中this和payType其实并没有用到，只是方便以后使用，退款是直接访问后台，功能去掉了。 我就没写。需要的小伙伴自己添加即可。别忘了引入

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