微信支付JSAPI集成与ASP.NET实现详解
一、前言
在现代电子商务和在线交易中，微信支付已经成为一种非常流行的支付方式，微信提供了多种支付方式，其中JSAPI支付是一种用于网页端的支付方式，主要应用于电商网站和服务类网站的在线支付场景，本文将详细介绍如何在ASP.NET环境中集成微信支付JSAPI，并提供完整的代码示例和相关说明。
二、微信支付JSAPI简介
什么是微信支付JSAPI
微信支付JSAPI是微信官方提供的一种网页支付接口，主要用于在微信浏览器内完成支付操作，用户在微信中打开商家的H5页面，通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。
微信支付方式介绍
微信提供了多种支付方式，适用于不同的支付场景：
刷卡支付：用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付，适用于线下面对面收银的场景。
扫码支付：商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付，适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
公众号支付：用户在微信中打开商户的H5页面，通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付，适用于电商网站和服务类网站的在线交易场景。
APP支付：又称移动端支付，是商户通过在移动端应用APP中集成开放SDK调起微信支付模块完成支付的模式。
H5支付：用于在手机端微信外浏览器进行支付，但在微信内不能使用。
三、前期准备
开通微信支付功能
在进行微信支付开发之前，需要确保已经在微信支付商户平台开通了微信支付功能，并获取到相应的商户号和AppID。
创建JSAPI支付应用
在微信支付商户平台创建一个JSAPI支付的应用，并获取到相应的AppID和AppSecret。
安装.NET开发环境
确保已经安装了.NET开发环境，例如Visual Studio。
引入SDK
通过NuGet包管理器或手动下载和引用DLL文件的方式，将以下两个SDK引入到项目中：
Senparc.Weixin.MP.Core：用于处理微信JSAPI支付相关的逻辑。
Senparc.Weixin.MP.TenPay：用于处理微信支付相关的逻辑。
四、配置支付参数
在ASP.NET项目中，需要配置一些支付相关的参数，这些参数可以保存在配置文件中，或者直接在代码中进行硬编码，以下是一些常用的支付参数：
string appId = "yourAppId"; string mchId = "yourMchId"; string key = "yourKey"; string notifyUrl = "https://yourdomain.com/pay/notify";
五、项目结构说明
现在大多数公司项目都使用.NET Core框架，并且用到仓储Repository需要在Startup中绑定服务，并注入微信公众号支付的相关服务。
配置支付授权目录
在微信商户平台的产品中心->开发配置->公众号支付->支付授权目录中，配置好域名，这个目录是用来获取用户的openid及用户信息的。
配置网页授权获取用户基本信息接口
在微信公众平台的公众号设置->网页授权域名、JS安全域名中进行配置，这个配置的作用是使你能访问到支付的接口及回调页面能够返回，其中的域名必须是备案的。
六、前端页面调起支付
前端页面需要通过点击支付按钮调支付的接口，在支付接口中调用统一下单，获得下单结果，从统一下单成功返回的数据中获取微信浏览器调起jsapi支付所需的参数，前端页面拿到参数唤起微信支付，支付成功后返回ok，前端可以处理其他的跳转操作。
以下是一个简单的前端页面示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信支付样例-JSAPI支付</title>
<script type="text/javascript">
function callpay() {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
}
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "<%=appId%>", //公众号名称，由商户传入
"timeStamp": "<%=timeStamp%>", //时间戳，自1970年以来的秒数
"nonceStr": "<%=nonceStr%>", //随机串
"package": "<%=packageValue%>", //统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***）
"signType": "MD5", //微信签名方式：
"paySign": "<%=paySign%>" //微信签名
},
function (res) {
WeixinJSBridge.log(res.err_msg);
alert(res.err_code + res.err_desc + res.err_msg);
}
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="submit" runat="server" Text="立即支付" OnClientClick="callpay()" style="width:210px; height:50px; border-radius: 15px;background-color:#00CD00; border:0px #FE6714 solid; cursor: pointer; color:white; font-size:16px;" />
</div>
</form>
</body>
</html>
七、后台生成支付参数
后台需要生成支付参数，包括时间戳、随机串、统一下单接口返回的prepay_id参数值以及签名等，以下是一个简单的后台代码示例：
public ActionResult GenerateOrder([FromBody]OrderInfo orderInfo)
{
try
{
// 1. 统一下单，获取预付订单
var result = UnifiedOrder(orderInfo);
if (result.ReturnCode != "SUCCESS")
{
return Content("Error");
}
// 2. 获取微信分配的预支付交易会话标识
string prepayId = result.PrepayId;
string timeStamp = result.TimeStamp;
string nonceStr = result.NonceStr;
string packages = "prepay_id=" + prepayId;
string paySign = GeneratePaySign(appId, prepayId, nonceStr, timeStamp);
// 3. 返回给前端页面的参数
var parameters = new
{
appId = appId,
timeStamp = timeStamp,
nonceStr = nonceStr,
packages = packages,
signType = "MD5",
paySign = paySign,
};
return Json(parameters);
}
catch (Exception ex)
{
return Content("Error");
}
}
八、常见问题与解决方案
如何获取用户的openid？
答：在微信公众平台的公众号设置->网页授权域名、JS安全域名中进行配置，这个配置的作用是使你能访问到支付的接口及回调页面能够返回，其中的域名必须是备案的，然后通过前端页面获取用户的code，再通过后端接口获取用户的openid。
2. 如何解决微信支付提示“当前页面的URL未注册”？
答：这个问题通常是由于支付授权目录配置不正确导致的，请确保在微信商户平台的产品中心->开发配置->公众号支付->支付授权目录中配置正确的域名。
以上就是关于“asp.net jsapi”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!