当前位置：网站首页>Example: use C ＃ Net to teach you how to develop wechat official account (21) -- using wechat to pay online collection: H5 method
Example: use C ＃ Net to teach you how to develop wechat official account (21) -- using wechat to pay online collection: H5 method
2022-06-26 00:43:00 【Chaos scar】
On the line 、 Offline sales , You can use wechat to pay conveniently , There are many ways to collect money through wechat official account , Here's the picture ：
Let's talk about it today H5 Scenario payment , Open it with mobile browser H5 The way , The most common promotion is SMS built-in links , This scenario requires calling wechat app, Then start wechat payment and subsequent processes .
One 、 Operation demo
Use whatever you like to scan the code app Scan the QR code below , After opening, copy the link to the mobile browser opening page .
Two 、 Wechat payment configuration
In the first of this series 18 piece （(2 Bar message ) example ： use C#.NET Teach you to do WeChat official account development （18）-- Use wechat payment to send red envelopes to fans _ The blog of scar in troubled times -CSDN Blog ） There was an introduction to , In addition to the basic configuration , The following configurations are key ：
3、 ... and 、H5 Scenario payment demo source code
The source code of the front 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> Wechat payment H5 Collection test </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;">
Cashier
</div>
<form id="form1" runat="server">
<div>
<div style="margin-top:10px;background: #fff;">
<div class="line boline">
<span class="ti"> The order number :</span>
<asp:Label runat="server" id="lbBillNo" Text="" Visible="true" class="text" />
</div>
<div class="line boline">
<span class="ti"> product :</span>
<asp:Label runat="server" id="lbProductName" Text="" Visible="true" class="text" />
</div>
<div class="line boline">
<span class="ti"> The number : </span>
<asp:Label runat="server" id="lbProductNum" Text="" Visible="true" class="text" />
</div>
<div class="line">
<span class="ti"> Pay the amount :</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=" Pay now " 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 back-end 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 Tune up JS API Parameters
protected void Page_Load(object sender, EventArgs e)
{
lbProductId.Text = "202102040001";
lbProductName.Text = " Wechat payment H5 test ";
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(); /// Wechat units are divided into
string out_trade_no = lbBillNo.Text;
if (lbProductName.Text != null)
{
// If relevant parameters are passed , Then adjust the unified ordering interface , Obtain the entry parameters of subsequent related interfaces
H5Pay h5Pay = new H5Pay();
string scip = GetWebClientIp();// Get client reality IP
string url = h5Pay.GetPayUrl(scip,fee,out_trade_no,lbProductId.Text,lbProductName.Text);
lbUrl.Text = url;
Response.Redirect(url, false);// Jump to the middle page of wechat payment
}
else
{
Log.showlog("zhifu_callpay"," Page missing parameter , Please go back and try again ");
}
}
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 It is taken after acceleration 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;
}
}
}Four 、 Collection source code
The classes used in the above demonstration code are the same as those in the previous article , The source code has been given in the last article .
And the table used to store the collection records is also given in the previous article , There is only one field marked with different payment sources .
5、 ... and 、 After collection, the collection record status is updated
The content introduced in the previous article is the same , The code will no longer be posted repeatedly .
The front-end code ：WeixinPayRecvResultNotify.aspx
Back end code ：WeixinPayRecvResultNotify.aspx.cs
边栏推荐
- Graduation season | fitting the best self in continuous exploration
- Idea set the template of mapper mapping file
- Logstash discards log data that does not match the file name exactly
- 每日刷题记录 (四)
- Comprehensive introduction to Simulink solver
- 防抖和节流
- redux工作流程讲解+小例子
- 10.2.2、Kylin_ Kylin installation, uploading and decompressing, verifying environment variables, starting and accessing
- QT custom QSlider with cursor
- Function and principle of SPI solder paste inspection machine
猜你喜欢
鼠标拖拽围绕某个物体旋转展示
Atlas200dk brush machine
Mining pit record of modified field information in Dameng database
Comprehensive introduction to Simulink solver
使用VS2022编译Telegram桌面端(tdesktop)
从进程的角度来解释 输入URL后浏览器会发生什么？
Ssl/tls, symmetric and asymmetric encryption, and tlsv1.3
Leetcode 513. Find the value in the lower left corner of the tree
Redisson 3.17.4 发布
快手实时数仓保障体系研发实践
随机推荐
快手实时数仓保障体系研发实践
Types of feeder and how to work
When installing PSU /usr/bin/ld:warning: -z lazload ignore
2021-04-28
Farsync simple test
渗透工具-Burpsuite
The development context of Ba Kong Yuan universe industry
Openresty chapter 01 introduction and installation configuration
原型和原型链的理解
Things / phenomena / things / things / situations / appearances
AD20(Altium Designer) PCB 高亮网络
idea设置mapper映射文件的模板
QT custom QSlider with cursor
Compiler Telegram Desktop end (tdesktop) en utilisant vs2022
STL tutorial 5-basic concepts of STL and the use of string and vector
1-9network configuration in VMWare
Machine vision: illuminating "intelligence" and creating a new "vision" world
渲云携手英特尔，共创云渲染“芯”时代
CaMKIIa和GCaMP6f是一樣的嘛？
使用VS2022编译Telegram桌面端(tdesktop)