H5 跳转微信小程序支付
以下是使用 PHP 实现 H5 页面跳转到微信小程序支付的步骤和代码示例：
步骤：
- 获取用户 OpenID： 在 H5 页面中，你需要先获取用户的 OpenID。这可以通过微信网页授权机制实现。
- 调用统一下单接口： 使用 PHP 后端调用微信支付统一下单接口，传入订单信息和用户的 OpenID，获取预支付交易会话标识 prepay_id。
- 生成小程序支付参数： 使用 prepay_id 和其他必要参数，根据微信支付 API 文档的要求，生成小程序支付所需的参数。
- 调用小程序支付 API： 在 H5 页面中，使用 JavaScript 调用微信 JS-SDK 的 wx.miniProgram.navigateTo API，传入小程序支付参数，跳转到小程序并调起支付。
代码示例：
1. 获取用户 OpenID (H5 页面):
<!DOCTYPE html>
<html>
<head>
<title>H5 跳转微信小程序支付</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 获取当前页面的 URL
var currentUrl = encodeURIComponent(window.location.href);
// 微信网页授权 URL
var authorizeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
"appid=YOUR_APPID&" +
"redirect_uri=" + currentUrl + "&" +
"response_type=code&" +
"scope=snsapi_base&" +
"state=123#wechat_redirect";
// 重定向到微信授权页面
window.location.href = authorizeUrl;
</script>
</head>
<body>
</body>
</html>
2. 处理授权回调并调用统一下单接口 (PHP 后端):
<?php
// 获取 code
$code = $_GET['code'];
// 使用 code 获取 access_token 和 openid
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?" .
"appid=YOUR_APPID&" .
"secret=YOUR_APPSECRET&" .
"code=$code&" .
"grant_type=authorization_code";
$response = file_get_contents($url);
$data = json_decode($response, true);
$openid = $data['openid'];
// 生成订单信息
$orderData = [
'body' => '商品描述',
'out_trade_no' => 'YOUR_ORDER_ID', // 商户订单号
'total_fee' => 1, // 订单金额，单位：分
'spbill_create_ip' => $_SERVER['REMOTE_ADDR'],
'notify_url' => 'YOUR_NOTIFY_URL', // 支付回调地址
'trade_type' => 'JSAPI',
'openid' => $openid
];
// 调用统一下单接口
$unifiedOrderResult = unifiedOrder($orderData);
// ... 处理统一下单接口返回结果，获取 prepay_id ...
// 生成小程序支付参数
$miniProgramPayParams = generateMiniProgramPayParams($unifiedOrderResult['prepay_id']);
// 将小程序支付参数返回给 H5 页面
echo json_encode($miniProgramPayParams);
// ... 统一下单接口实现 ...
function unifiedOrder($orderData) {
// ... 构建请求参数 ...
// ... 发送请求到微信支付统一下单接口 ...
// ... 处理接口返回结果，获取 prepay_id ...
}
// ... 生成小程序支付参数 ...
function generateMiniProgramPayParams($prepayId) {
$timeStamp = time();
$nonceStr = generateRandomString();
$package = "prepay_id=" . $prepayId;
$signType = "MD5";
// 按 key=value 的格式拼接参数字符串
$stringA = "appId=YOUR_APPID&nonceStr=$nonceStr&package=$package&signType=$signType&timeStamp=$timeStamp";
// 在 stringA 最后拼接上 key=密钥
$stringSignTemp = $stringA . "&key=YOUR_API_KEY";
// 对 stringSignTemp 进行签名
$paySign = strtoupper(md5($stringSignTemp));
// 返回小程序支付参数
return [
'timeStamp' => (string)$timeStamp,
'nonceStr' => $nonceStr,
'package' => $package,
'signType' => $signType,
'paySign' => $paySign,
];
}
// ... 生成随机字符串 ...
function generateRandomString($length = 32) {
// ...
}
3. 跳转到小程序并调起支付 (H5 页面):
<!DOCTYPE html>
<html>
<head>
<title>H5 跳转微信小程序支付</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// ... 获取小程序支付参数 ...
// 调用微信 JS-SDK 跳转到小程序
wx.miniProgram.navigateTo({
appId: 'YOUR_MINI_PROGRAM_APPID', // 小程序 AppID
path: 'pages/index/index', // 小程序支付页面路径
extraData: miniProgramPayParams // 小程序支付参数
});
</script>
</head>
<body>
</body>
</html>
4. 在小程序支付页面接收参数并调起支付:
// pages/index/index.js
Page({
onLoad: function (options) {
// 获取 H5 页面传递的支付参数
const payParams = options;
// 调起微信支付
wx.requestPayment({
...payParams,
success: function (res) {
// 支付成功
},
fail: function (res) {
// 支付失败
}
});
}
});
注意：
- 将代码中的
YOUR_APPID、YOUR_APPSECRET、YOUR_API_KEY、YOUR_MINI_PROGRAM_APPID替换成你的实际值。 - 以上代码仅供参考，你需要根据实际情况进行修改和完善。
- 确保你的 H5 页面和微信小程序都已经在微信公众平台进行配置。
- 在实际开发过程中，需要更加完善的错误处理和安全性措施。
发表回复