온라인 및 오프라인 판매 시 위챗을 이용하여 편리하게 결제할 수 있으며 위챗 공식 계정을 통해 돈을 모으는 방법은 아래 그림과 같이 다양합니다.
오늘은 H5 시나리오에서 지불에 대해 이야기하겠습니다. 모바일 브라우저를 사용하여 여는 것은 H5 방법입니다. 가장 일반적인 프로모션은 SMS에 내장된 링크입니다. 이 시나리오에서는 WeChat 앱을 호출해야 합니다. WeChat 결제 및 후속 프로세스를 시작합니다.
1. 작동 시연
코드를 스캔할 수 있는 앱을 사용하여 아래의 QR 코드를 스캔하고 열고 링크를 모바일 브라우저에 복사하여 페이지를 엽니다.
CSDN의 자동 검토는 정말 말문이 막힙니다. 모든 QR 코드는 불법 사진으로 판단됩니다. nnd, 불만을 제기하십시오.
유인원 친구들은 아래 링크를 모바일 브라우저에 복사하고 열면 전체 결제 과정을 경험할 수 있습니다.
http://www.jjlm.ltd/weixinold/WeixinPayRecvH5Test.aspx
2. 위챗 결제 구성
이 기사 시리즈의 18번째 기사((2개 메시지) 예: C#.NET을 사용하여 WeChat 공개 계정 개발 방법 교육(18)--WeChat을 사용하여 팬들에게 빨간 봉투를 보내도록 지불_The Blog of Chaos Scars-CSDN Blog ) 위에서 언급했듯이 기본 구성 외에 다음 구성이 핵심입니다.
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