When doing online and offline sales, you can use WeChat to pay conveniently. There are many ways to collect money through the WeChat official account, as shown in the figure below:
Today we will talk about payment in the H5 scenario. Using a mobile browser to open is the H5 method. The most common promotion is the built-in link in the SMS. In this scenario, you need to call the WeChat app, and then start the WeChat payment and subsequent processes.
1. Operation demonstration
Use any app that can scan the code to scan the QR code below, open it and copy the link to the mobile browser to open the page.
The automatic review of CSDN is really speechless, any QR code is judged as an illegal picture, nnd, make a complaint.
Ape friends can copy the link below to the mobile browser and open it to experience the whole payment process.
http://www.jjlm.ltd/weixinold/WeixinPayRecvH5Test.aspx
2. WeChat payment configuration
In the 18th article of this series of articles ((2 messages) Example: Use C#.NET to teach you how to develop WeChat official account (18)--Use WeChat to pay fans to send red envelopes_The Blog of Chaos Scars-CSDN Blog) As mentioned above, in addition to the basic configuration, the following configuration is the key:
3. H5 scene payment demo source code
The source code of the front-end page is as follows:
<%@ 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>The backend source code is as follows:
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. Collection source code
The class used in the above demo code is the same as the previous article, and the source code has been given in the previous article.
And the table used to store payment records is also given in the previous article, but there is a field marked with a different payment source.
5. Update the status of the collection record after collection
It is consistent with the content introduced in the previous article, and the code will not be posted repeatedly.
Front-end code: WeixinPayRecvResultNotify.aspx
Backend code: WeixinPayRecvResultNotify.aspx.cs