# JASPI 支付
# JSAPI 支付
在微信公众号网页中使用微信支付,必须借助 JSAPI,完成支付流程。
首先,需要创建一个商品页面,并在页面上提供一个下订单的入口,例如:一键购买。 (具体实现此处略)
当前示例中,提供了 3 个关键的页面:ProductList(商品列表)、ProductItem(商品详情) 和 JsApi(JSAPI 订单支付)。
# ProductList 商品列表
后端
参考代码:TenPayV3Controller 下的 ProductList() 方法。
public ActionResult ProductList()
{
var products = ProductModel.GetFakeProductList();
return View(products);
}
本项目参考文件:
/Controllers/TenPayV3Controller.cs
前端
本项目参考文件:
/Views/TenPayV3/ProductItem.cshtml
效果
# ProductItem 商品详情
后端
参考代码:TenPayV3Controller 下的 ProductItem() 方法。
public ActionResult ProductItem(int productId, int hc)
{
var products = ProductModel.GetFakeProductList();
var product = products.FirstOrDefault(z => z.Id == productId);
if (product == null || product.GetHashCode() != hc)
{
return Content("商品信息不存在,或非法进入!2003");
}
//判断是否正在微信端
if (Senparc.Weixin.BrowserUtility.BrowserUtility.SideInWeixinBrowser(HttpContext))
{
//正在微信端,直接跳转到微信支付页面
return RedirectToAction("JsApi", new { productId = productId, hc = hc });
}
else
{
//在PC端打开,提供二维码扫描进行支付
return View(product);
}
}
说明:上述代码使用
SideInWeixinBrowser()
方法对当前页面的运行环境做了判断,如果是在微信内打开,则直接进入 JsApi 支付页面(见下放 JsApi 的介绍),如果在非微信内部打开(如 PC),则展示商品详情,并提供多种支付方式的选择。
本项目参考文件:
/Controllers/TenPayV3Controller.cs
前端
本项目参考文件:
/Views/TenPayV3/ProductItem.cshtml
效果
从 商品列表 (opens new window) 中选择一个商品点击,如果在 PC 端,则可以看到详情页面:
上述的支付方式二:“扫一扫”支付下方有一个根据所选商品自动生成的二维码,使用手机微信扫一扫,即可进入对应的商品订单页面(即 JsApi 订单页面)。
# JSAPI 订单支付页面
后端
用户点击下单按钮后,需要在后台生成一个预支付订单并在页面上登记,代码请参考 TenPayV3Controller.JsApi()
[CustomOAuth(null, "/TenpayV3/OAuthCallback")]
public ActionResult JsApi(int productId, int hc)
{
try
{
//获取产品信息
//...
//调用 JsApi 获取预支付信息
//...
return View();
}
catch (Exception ex)
{
//...
}
}
本项目参考文件:
/Controllers/TenPayV3Controller.cs
上述代码中,传入的 productId
参数是商品的编号,此处作为 Sample 演示,是从内存中模拟列表并查询,实际项目中,商品信息一般存储在数据库中,根据 productId
从数据中查找商品数据;hc
函数是为了确保当前内存信息的有效性而设置的对应商品信息的 HashCode,实际开发项目中无需使用,可忽略。
此过程中,最关键的代码是:var result = TenPayOldV3.Unifiedorder(xmlDataInfo)
,result.prepay_id
即“预支付 ID”,前端页面必须凭借 prepay_id 才能让手机端唤起微信支付。此时,当前订单编号已经在微信支付后台进行了注册。
注意:该方法使用了 [CustomOAuth] 特性,用于自动使用微信公众号的 OAuth 功能识别用户身份,此功能属于公众号范畴,不在这里展开。
前端
前端的关键操作是当用户点击“支付”按钮后,执行 JS 代码:
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: "", //公众号名称,由商户传入
timeStamp: "", //时间戳
nonceStr: "", //随机串
package: "", //扩展包
signType: "MD5", //微信签名方式:MD5
paySign: "", //微信签名
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
//支付成功
}
}
);
本项目参考文件:
/Views/TenPayV3/JsApi.cshtml
效果