公式アカウント決済インターフェースの開発

今回は公式アカウント決済インターフェースの開発についてお届けします。公式アカウント決済インターフェースの開発における注意事項は何ですか? 以下は実際的なケースです。

公式アカウント決済とは、WeChat内のH5ページからWeChatペイメントを呼び出し、QRコードをスキャンせずに決済できる機能です。この関数を実装するときに最初に明確にしておきたいのは、販売者番号 mch_id に一致する appid のみが正常に支払うことができるということです。販売アカウントが正常に登録されると、関連情報がメールボックスに送信されます。支払いを促す鍵は、openid を利用して統一された注文を取得することです。 openid と appid は 1 対 1 に対応します。つまり、ログインに使用する appid が公式アカウントの appid ではない場合、取得した openid では公式アカウントでの支払いをトリガーできません（appid が一致しないというエラーが発生します）。販売者アカウント）。 WeChat のオープン プラットフォームでは Web サイト アプリケーションを作成でき、appid と appsecret もあり、WeChat にワンクリックでログインすることもできるため、ここで寄り道したことがあります。

ビジネスプロセス

以下は WeChat の公式プロセスです。重要な点は、統合された注文インターフェイスによって返される json 文字列を取得することです。いくつかの詳細です。

注文を作成する

支払いのために WeChat 公式アカウントに電話する前に、まず自分で注文を作成する必要があります。たとえば、リチャージ注文などです。重要なことは、最初に金額を決定してから次のステップに進むことです。

  public JsonResult CreateRecharegOrder(decimal money)
        {            if (money < (decimal)0.01) return Json(new PaymentResult("充值金额非法！"));            var user = _workContext.CurrentUser;            var order = _paymentService.CreateRechargeOrder(user.Id, money);            return Json(new PaymentResult(true) {OrderId = order.OrderNumber});
        }

統合注文を呼び出す

注文が正常に作成された後、ページは支払いページにジャンプします。この時点で、WeChat デモでは jsApiPay オブジェクトが提供されます。ただし、このオブジェクトにはページ オブジェクトを初期化する必要があります。

       [LoginValid]        public ActionResult H5Pay(string orderNumber)
        {            var user = _workContext.CurrentUser;            var order = _paymentService.GetOrderByOrderNumber(orderNumber);            //判断订单是否存在            //订单是否已经支付了
            var openid = user.OpenId;            var jsApipay = new JsApiPayMvc(this.ControllerContext.HttpContext);
            jsApipay.openid = openid;
            jsApipay.total_fee = (int)order.Amount * 100;
            WxPayData unifiedOrderResult = jsApipay.GetUnifiedOrderResult();
            ViewBag.wxJsApiParam = jsApipay.GetJsApiParameters();//获取H5调起JS API参数     
            ViewBag.unifiedOrder = unifiedOrderResult.ToPrintStr();
            ViewBag.OrderNumber = order.OrderNumber;            return View();
        }

MVC では、簡単に変更できます。つまり、ページ オブジェクトを httpContext に置き換えます。その後、内部のメソッドを直接使用できます。

JsApiPayMvc:

using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Runtime.Serialization;using System.IO;using System.Text;using System.Net;using System.Web.Security;using LitJson;namespace WxPayAPI
{    public class JsApiPayMvc
    {        /// <summary>
        /// 保存页面对象，因为要在类的方法中使用Page的Request对象        /// </summary>
        public HttpContextBase context { get; set; }        /// <summary>
        /// openid用于调用统一下单接口        /// </summary>
        public string openid { get; set; }        /// <summary>
        /// access_token用于获取收货地址js函数入口参数        /// </summary>
        public string access_token { get; set; }        /// <summary>
        /// 商品金额，用于统一下单        /// </summary>
        public int total_fee { get; set; }        /// <summary>
        /// 统一下单接口返回结果        /// </summary>
        public WxPayData unifiedOrderResult { get; set; }        public JsApiPayMvc(HttpContextBase _context)
        {
            context = _context;
        }        /**
        * 
        * 网页授权获取用户基本信息的全部过程
        * 详情请参看网页授权获取用户基本信息：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
        * 第一步：利用url跳转获取code
        * 第二步：利用code去获取openid和access_token
        * 
        */
        public void GetOpenidAndAccessToken(string code)
        {            if (!string.IsNullOrEmpty(code))
            {                //获取code码，以获取openid和access_token
                Log.Debug(this.GetType().ToString(), "Get code : " + code);
                GetOpenidAndAccessTokenFromCode(code);
            }            else
            {                //构造网页授权获取code的URL
                string host = context.Request.Url.Host;                string path = context.Request.Path;                string redirect_uri = HttpUtility.UrlEncode("http://" + host + path);
                WxPayData data = new WxPayData();
                data.SetValue("appid", WxPayConfig.APPID);
                data.SetValue("redirect_uri", redirect_uri);
                data.SetValue("response_type", "code");
                data.SetValue("scope", "snsapi_base");
                data.SetValue("state", "STATE" + "#wechat_redirect");                string url = "https://open.weixin.qq.com/connect/oauth2/authorize?" + data.ToUrl();
                Log.Debug(this.GetType().ToString(), "Will Redirect to URL : " + url);                try
                {                    //触发微信返回code码         
                    context.Response.Redirect(url);//Redirect函数会抛出ThreadAbortException异常，不用处理这个异常                }                catch(System.Threading.ThreadAbortException ex)
                {
                }
            }
        }        /**
        * 
        * 通过code换取网页授权access_token和openid的返回数据，正确时返回的JSON数据包如下：
        * {
        *  "access_token":"ACCESS_TOKEN",
        *  "expires_in":7200,
        *  "refresh_token":"REFRESH_TOKEN",
        *  "openid":"OPENID",
        *  "scope":"SCOPE",
        *  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
        * }
        * 其中access_token可用于获取共享收货地址
        * openid是微信支付jsapi支付接口统一下单时必须的参数
        * 更详细的说明请参考网页授权获取用户基本信息：http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
        * @失败时抛异常WxPayException        */
        public void GetOpenidAndAccessTokenFromCode(string code)
        {            try
            {                //构造获取openid及access_token的url
                WxPayData data = new WxPayData();
                data.SetValue("appid", WxPayConfig.APPID);
                data.SetValue("secret", WxPayConfig.APPSECRET);
                data.SetValue("code", code);
                data.SetValue("grant_type", "authorization_code");                string url = "https://api.weixin.qq.com/sns/oauth2/access_token?" + data.ToUrl();                //请求url以获取数据
                string result = HttpService.Get(url);
                Log.Debug(this.GetType().ToString(), "GetOpenidAndAccessTokenFromCode response : " + result);                //保存access_token，用于收货地址获取
                JsonData jd = JsonMapper.ToObject(result);
                access_token = (string)jd["access_token"];                //获取用户openid
                openid = (string)jd["openid"];
                Log.Debug(this.GetType().ToString(), "Get openid : " + openid);
                Log.Debug(this.GetType().ToString(), "Get access_token : " + access_token);
            }            catch (Exception ex)
            {
                Log.Error(this.GetType().ToString(), ex.ToString());                throw new WxPayException(ex.ToString());
            }
        }        /**
         * 调用统一下单，获得下单结果
         * @return 统一下单结果
         * @失败时抛异常WxPayException         */
        public WxPayData GetUnifiedOrderResult()
        {            //统一下单
            WxPayData data = new WxPayData();
            data.SetValue("body", "test");
            data.SetValue("attach", "test");
            data.SetValue("out_trade_no", WxPayApi.GenerateOutTradeNo());
            data.SetValue("total_fee", total_fee);
            data.SetValue("time_start", DateTime.Now.ToString("yyyyMMddHHmmss"));
            data.SetValue("time_expire", DateTime.Now.AddMinutes(10).ToString("yyyyMMddHHmmss"));
            data.SetValue("goods_tag", "test");
            data.SetValue("trade_type", "JSAPI");
            data.SetValue("openid", openid);
            WxPayData result = WxPayApi.UnifiedOrder(data);            if (!result.IsSet("appid") || !result.IsSet("prepay_id") || result.GetValue("prepay_id").ToString() == "")
            {
                Log.Error(this.GetType().ToString(), "UnifiedOrder response error!");                throw new WxPayException("UnifiedOrder response error!");
            }
            unifiedOrderResult = result;            return result;
        }        /**
        *  
        * 从统一下单成功返回的数据中获取微信浏览器调起jsapi支付所需的参数，
        * 微信浏览器调起JSAPI时的输入参数格式如下：
        * {
        *   "appId" : "wx2421b1c4370ec43b",     //公众号名称，由商户传入     
        *   "timeStamp":" 1395712654",         //时间戳，自1970年以来的秒数     
        *   "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串     
        *   "package" : "prepay_id=u802345jgfjsdfgsdg888",     
        *   "signType" : "MD5",         //微信签名方式:    
        *   "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
        * }
        * @return string 微信浏览器调起JSAPI时的输入参数，json格式可以直接做参数用
        * 更详细的说明请参考网页端调起支付API：http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7
        * 
        */
        public string GetJsApiParameters()
        {
            Log.Debug(this.GetType().ToString(), "JsApiPay::GetJsApiParam is processing...");
            WxPayData jsApiParam = new WxPayData();
            jsApiParam.SetValue("appId", unifiedOrderResult.GetValue("appid"));
            jsApiParam.SetValue("timeStamp", WxPayApi.GenerateTimeStamp());
            jsApiParam.SetValue("nonceStr", WxPayApi.GenerateNonceStr());
            jsApiParam.SetValue("package", "prepay_id=" + unifiedOrderResult.GetValue("prepay_id"));
            jsApiParam.SetValue("signType", "MD5");
            jsApiParam.SetValue("paySign", jsApiParam.MakeSign());            string parameters = jsApiParam.ToJson();
            Log.Debug(this.GetType().ToString(), "Get jsApiParam : " + parameters);            return parameters;
        }        /**
        * 
        * 获取收货地址js函数入口参数,详情请参考收货地址共享接口：http://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_9
        * @return string 共享收货地址js函数需要的参数，json格式可以直接做参数使用        */
        public string GetEditAddressParameters()
        {            string parameter = "";            try
            {                string host = context.Request.Url.Host;                string path = context.Request.Path;                string queryString = context.Request.Url.Query;                //这个地方要注意，参与签名的是网页授权获取用户信息时微信后台回传的完整url
                string url = "http://" + host + path + queryString;                //构造需要用SHA1算法加密的数据
                WxPayData signData = new WxPayData();
                signData.SetValue("appid",WxPayConfig.APPID);
                signData.SetValue("url", url);
                signData.SetValue("timestamp",WxPayApi.GenerateTimeStamp());
                signData.SetValue("noncestr",WxPayApi.GenerateNonceStr());
                signData.SetValue("accesstoken",access_token);                string param = signData.ToUrl();
                Log.Debug(this.GetType().ToString(), "SHA1 encrypt param : " + param);                //SHA1加密
                string addrSign = FormsAuthentication.HashPasswordForStoringInConfigFile(param, "SHA1");
                Log.Debug(this.GetType().ToString(), "SHA1 encrypt result : " + addrSign);                //获取收货地址js函数入口参数
                WxPayData afterData = new WxPayData();
                afterData.SetValue("appId",WxPayConfig.APPID);
                afterData.SetValue("scope","jsapi_address");
                afterData.SetValue("signType","sha1");
                afterData.SetValue("addrSign",addrSign);
                afterData.SetValue("timeStamp",signData.GetValue("timestamp"));
                afterData.SetValue("nonceStr",signData.GetValue("noncestr"));                //转为json格式
                parameter = afterData.ToJson();
                Log.Debug(this.GetType().ToString(), "Get EditAddressParam : " + parameter);
            }            catch (Exception ex)
            {
                Log.Error(this.GetType().ToString(), ex.ToString());                throw new WxPayException(ex.ToString());
            }            return parameter;
        }
    }
}

コードを表示

このページはローカルでデバッグでき、パラメーターが正しいかどうかを確認する方が便利です。

Avoke Payment

公式ページの例は以下の通り: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 ただし、主なパラメータ(マーク部分) ) はバックグラウンドによって決定されます。生成されたものは前のステップの ViewBag.wxJsApiParam です

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {           "appId" ： "wx2421b1c4370ec43b",     //公众号名称，由商户传入     
           "timeStamp"：" 1395712654",         //时间戳，自1970年以来的秒数     
           "nonceStr" ： "e61463f8efa94090b1f366cccfbbb444", //随机串     
           "package" ： "prepay_id=u802345jgfjsdfgsdg888",     
           "signType" ： "MD5",         //微信签名方式：     
           "paySign" ： "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request：ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
       }
   ); 
}

そのため、MVC では次のように記述する必要があります:

@{
    ViewBag.Title = "微信支付";
    Layout = "~/Views/Shared/_Layout.cshtml";
}<p class="page" id="Wxpayment">
    <p class="content">
        <p>订单详情：@Html.Raw(ViewBag.unifiedOrder)</p>
        <button id="h5pay" onclick="callpay()">支付</button>
    </p>
    <input type="hidden" value="@ViewBag.OrderNumber" id="ordernum"/></p>
 <script type="text/javascript">
    //调用微信JS api 支付
    function jsApiCall() {
        WeixinJSBridge.invoke(            'getBrandWCPayRequest',            @Html.Raw(ViewBag.wxJsApiParam),//josn串
            function (res)
            {
                WeixinJSBridge.log(res.err_msg);                //alert(res.err_code + res.err_desc + res.err_msg);
                if (res.err_msg == "get_brand_wcpay_request:ok") {                   var num = $("#ordernum").val();
                    $.post("/payment/WeiXinPaySuccess", { ordernumber: num }, function(data) {                        if (data.IsSuccess === true) {
                            alert("支付成功");
                            location.href = document.referrer;
                        } else {
                            
                        }
                    });
                } 
                if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                      $('.button').removeAttr('submitting');
                      alert('取消支付');
                } 
            }
        );
    }    function callpay()
    {        if (typeof WeixinJSBridge == "undefined")
        {
            alert("WeixinJSBridge =");            if (document.addEventListener)
            {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
            }            else if (document.attachEvent)
            {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
            }
        }        else
        {
            jsApiCall();
        }
    }</script>

Html.Raw を使用する必要があります。そうしないと、JSON 解析が正しくなくなり、支払いはできません。この時点でページをクリックすると、WeChat の読み込み効果が表示されますが、まだエラーが発生し、「3 現在の URL が登録されていません」と表示されます。支払いディレクトリは公式アカウントに設定する必要があります。この支払いディレクトリでは大文字と小文字が区別されるため、数回試す必要があります。パスワードを入力するウィンドウが表示されるまでのプロセスは実際には正しいです。これにより、支払いが成功した直後に js でコールバックを受け取ることができ、注文とビジネス ロジックを処理できるようになります。

概要

実稼働環境の場合は、複数の場所で呼び出して、再度カプセル化する必要があります。

function jsApiCall(json, success, fail) {
    WeixinJSBridge.invoke(        'getBrandWCPayRequest',
        json,//josn串
        function (res)
        {
            WeixinJSBridge.log(res.err_msg);            //alert(res.err_code + res.err_desc + res.err_msg);
            if (res.err_msg == "get_brand_wcpay_request:ok") {                //充值进去 要区分是出题充值 还是购买悬赏 前者冲到他的钱包
                //后者直接冲到系统账户
                if (success) success();
            } 
            if (res.err_msg == 'get_brand_wcpay_request:cancel') {                // alert('取消支付');
                if (fail)fail();
            } 
        }
    );
}function callpay(json,success,fail)
{    if (typeof WeixinJSBridge == "undefined")
    {
        alert("请在微信中打开!");        if (document.addEventListener)
        {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        }        else if (document.attachEvent)
        {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    }    else
    {
        jsApiCall(json, success, fail);
    }
}

コードを表示

  [LoginValid]        public ActionResult H5PayJson(string orederId)
        {            var user = _workContext.CurrentUser;            var order = _paymentService.GetOrderByOrderNumber(orederId);            //判断订单是否存在            //订单是否已经支付了
            var openid = user.OpenId;            var jsApipay = new JsApiPayMvc(ControllerContext.HttpContext)
            {
                openid = openid,
                total_fee = (int) order.Amount*100
            };            try
            {
                jsApipay.GetUnifiedOrderResult();                return Json(jsApipay.GetJsApiParameters());//实际还是字符串
            }            catch (Exception e)
            {                //统一下单失败
                return Json(new PortalResult(false, e.Message));
            }
        }

呼び出されると、支払いが直接呼び出されます。 ただし、受信した json が json オブジェクトではない場合、WeChat の読み込みアニメーションは常に停止します。

 $.post("/Checkout/H5PayJson", { orederId: orderId }, function (jsondata) {                                var jdata = JSON.parse(jsondata);                                if (jdata.appId) {
                                    callpay(jdata, function () {
                                        $.post("/payment/WeiXinPaySuccess", { ordernumber: orderId }, function (paymentdata) {                                            if (paymentdata.IsSuccess === true) {
                                                submitQuestion();
                                            } else {
                                                $.alert(paymentdata.Message);
                                            }
                                        });
                                    }, function () {
                                        $.alert("你已取消支付!");
                                    });
                                } else {
                                    alert("统一下单失败!");
                                }
                            });

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Webpackの自動リフレッシュと解析の使用法

Webpackのモジュールホットリプレースメントの詳細な説明

最初にJSイベントを発行してからサブスクライブする方法

以上が公式アカウント決済インターフェースの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。