例: C#.NET を使用して WeChat 公式アカウントの開発方法を教えます (21) -- WeChat 支払いを使用してオンラインでお金を集める: H5 メソッド

オンラインおよびオフライン販売を行う場合、WeChat を使用して便利に支払いを行うことができ、WeChat 公式アカウントを通じて集金する方法は次の図に示すようにさまざまです。

今日は、H5 シナリオでの支払いについて説明します。モバイルブラウザを使用して開くのが H5 方法です。最も一般的なプロモーションは、SMS の組み込みリンクです。このシナリオでは、WeChat アプリを呼び出してから、 WeChat 支払いとその後のプロセスを開始します。

1. 動作デモ

コードをスキャンできるアプリを使用して、以下の QR コードをスキャンして開き、リンクをモバイルブラウザにコピーしてページを開きます。

CSDNの自動審査は本当に絶句で、どんなQRコードも違法画像と判断されてしまい、クレームを入れてください。

Ape friends は、以下のリンクをモバイルブラウザにコピーして開き、支払いプロセス全体を体験できます。

http://www.jjlm.ltd/weixinold/WeixinPayRecvH5Test.aspx

2.WeChat支払い設定

このシリーズの記事の 18 番目の記事 ((2 メッセージ) 例: C#.NET を使用して WeChat パブリックアカウントの開発方法を教えます (18) -- WeChat を使用してファンに赤い封筒を送るために料金を支払う_Chaos Scars のブログ - CSDN ブログ) 前述したように、基本構成に加えて、次の構成が重要です。

3. H5 シーンの支払いデモのソースコード

フロントエンドページのソースコードは次のとおりです。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="H5Test.aspx.cs" Inherits="Jjlm.H5Test" %>

<!DOCTYPE html>
<html>
<head runat="server">
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>微信支付H5收款测试</title>
</head>

<style>
    img{
        width: 100%;
        display: block;
    }
    body{
        margin:0;padding:0;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .line{
        display: flex;justify-content:space-between;height: 40px;margin: 0 20px;
    }
    .boline{
        border-bottom: 1px solid #ddd;
    }
    .ti{
        font-size: 18px;
        line-height: 40px;
    }
    .text{
        font-size: 16px;
        line-height: 40px;
    }
</style>

<body>
<div style="width: 100%;background:#555;color:#fff;font-size:20px;height: 40px;line-height: 40px;text-align: center;">
    收银台
</div>
<form id="form1" runat="server">
    <div>
        <div style="margin-top:10px;background: #fff;">
            <div class="line boline">
                <span class="ti">订单号:</span>
                <asp:Label runat="server" id="lbBillNo" Text="" Visible="true" class="text" />
            </div>
            <div class="line boline">
                <span class="ti">产品:</span>
                <asp:Label runat="server" id="lbProductName" Text="" Visible="true" class="text" />
            </div>
            <div class="line boline">
                <span class="ti">商品数量: </span>
                <asp:Label runat="server" id="lbProductNum" Text="" Visible="true" class="text" />
            </div>
            <div class="line">
                 <span class="ti">支付金额:</span>
                 <asp:Label runat="server" id="lbTotalFee" Text="" Visible="true" class="text" style="color: crimson;" />
            </div>
        </div>
		<div style="margin: 10px auto;">
			<img src="img/wxzf.jpg" alt="" style="width: 100%;">
        </div>
        <div style="margin: 10px auto;width: 90%;height: 40px;background: #20a91d;border-radius:10px;text-align: center;" runat="server" id="divBtn">
            <asp:Button ID="submit" runat="server" Text="立即支付"  Style="background: #20a91d;border-width:0px;color: #fff;line-height: 35px;font-size: 20px;outline:0px;-webkit-appearance: none;" OnClick="btnCallPayClick"/>
        </div>
        </br>
		
		<asp:Label runat="server" id="lbProductId" Text="" Visible="false" class="text" />
		<asp:Label runat="server" id="lbUrl" Text="" Visible="true" class="text" />

    </div>
</form>
</body>
</html>

バックエンドのソースコードは次のとおりです。

using System;
using System.Web;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using QinMing.Config;
using QinMing.WeixinPayCollect;

namespace Jjlm
{
    
	public partial class H5Test : System.Web.UI.Page
    {
		public static string wxJsApiParam {get;set;} //H5调起JS API参数
		
        protected void Page_Load(object sender, EventArgs e)
        {
            lbProductId.Text = "202102040001";
			lbProductName.Text = "微信支付H5测试";
			lbBillNo.Text = DateTime.Now.ToString("yyyyMMddHHmmssms");   //
			lbProductNum.Text = "1";
			lbTotalFee.Text = "0.01";
        }
		
		protected void btnCallPayClick(object sender, EventArgs e)
        {
			string fee = (Convert.ToDouble(lbTotalFee.Text)*100).ToString(); ///微信单位分
			string out_trade_no = lbBillNo.Text;

            if (lbProductName.Text != null)
            {
                //若传递了相关参数，则调统一下单接口，获得后续相关接口的入口参数
                H5Pay h5Pay = new H5Pay();
				string scip = GetWebClientIp();//获取客户端真实IP
				string url = h5Pay.GetPayUrl(scip,fee,out_trade_no,lbProductId.Text,lbProductName.Text);
				lbUrl.Text = url;
				Response.Redirect(url, false);//跳转到微信支付中间页 
            }
            else
            {
                Log.showlog("zhifu_callpay","页面缺少参数，请返回重试");
            }
        }	
        
		
		public string GetWebClientIp()  
        {  
            string userIP = "";  
            try  
            {  
                if (System.Web.HttpContext.Current == null  
            || System.Web.HttpContext.Current.Request == null  
            || System.Web.HttpContext.Current.Request.ServerVariables == null)  
                    return "";  
                string CustomerIP = "";  
                //CDN加速后取到的IP simone 090805  
                CustomerIP = System.Web.HttpContext.Current.Request.Headers["Cdn-Src-Ip"];  
                if (!string.IsNullOrEmpty(CustomerIP))  
                {  
                    return CustomerIP;  
                }  
                CustomerIP = System.Web.HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"];  
                if (!String.IsNullOrEmpty(CustomerIP))  
                {  
                    return CustomerIP;  
                }  
                if (System.Web.HttpContext.Current.Request.ServerVariables["HTTP_VIA"] != null)  
                {  
                    CustomerIP = System.Web.HttpContext.Current.Request.ServerVariables["HTTP_X_FORWARDED_FOR"];  
                    if (CustomerIP == null)  
                        CustomerIP = System.Web.HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];  
                }  
                else  
                {  
                    CustomerIP = System.Web.HttpContext.Current.Request.ServerVariables["REMOTE_ADDR"];  
                }  
                if (string.Compare(CustomerIP, "unknown", true) == 0)  
                    return System.Web.HttpContext.Current.Request.UserHostAddress;  
                return CustomerIP;  
            }  
            catch { }  
            return userIP;  
        }
	
    }
}

4. コレクションのソースコード

上記のデモコードで使用しているクラスは前回の記事と同じで、ソースコードは前回の記事に記載されています。

また、支払い記録を保存するために使用されるテーブルも前の記事で示されていますが、別の支払い元でマークされたフィールドがあります。

5. 収集後に収集記録のステータスを更新する

前回の記事で紹介した内容と整合性があり、コードを重複して掲載することはありません。

フロントエンドコード: WeixinPayRecvResultNotify.aspx

バックエンドコード: WeixinPayRecvResultNotify.aspx.cs

例: C#.NET を使用して WeChat 公式アカウントの開発方法を教えます (21) -- WeChat 支払いを使用してオンラインでお金を集める: H5 メソッド

おすすめ