标签：
要在前端 H5 页面中发起微信支付，通常需要以下几个步骤：
- 获取支付参数：你的前端需要向后端请求支付参数（如
prepay_id、nonce_str等）。 - 调用微信 JS SDK：使用微信的 JS SDK 发起支付请求。
- 处理支付结果：根据支付成功和失败的回调，处理相应的逻辑。
流程步骤
1. 创建后端支付接口
后端服务需要接收支付请求，并调用微信支付 API，返回支付所需的参数。
示例：PHP 后端代码
require 'vendor/autoload.php'; // 引入微信支付 SDK
function createWechatPayOrder($orderData) {
$input = new \WxPayUnifiedOrder();
$input->SetBody("商品描述");
$input->SetOut_trade_no($orderData['order_no']);
$input->SetTotal_fee($orderData['total_fee']); // 单位：分
$input->SetNotify_url("https://yourdomain.com/notify");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($orderData['openid']); // 用户的微信openid
$order = WxPayApi::unifiedOrder($input);
return [
'appId' => $order['appid'],
'timeStamp' => (string)time(),
'nonceStr' => $order['nonce_str'],
'package' => 'prepay_id=' . $order['prepay_id'],
'signType' => 'MD5',
'paySign' => createSign($package) // 生成签名的方法
];
}
// 假设你为这个接口设置了路由
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$orderData = $_POST; // 获取订单数据
$paymentParams = createWechatPayOrder($orderData);
echo json_encode($paymentParams);
}
PHP
2. H5 页面发起微信支付
在 H5 页面中，你可以使用以下 JavaScript 代码进行支付：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>微信支付</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<button id="payButton">发起微信支付</button>
<script>
document.getElementById('payButton').onclick = function() {
// 假设你已经获取了订单号和金额
const orderData = {
order_no: "your_order_number",
total_fee: 100, // 注意：金额单位为分
openid: "user_openid" // 用户的openid
};
// 向后端请求支付参数
fetch('/api/create_wechat_pay_order', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(orderData)
})
.then(response => response.json())
.then(data => {
wx.config({
debug: false, // 开启调试
appId: data.appId,
timestamp: data.timeStamp,
nonceStr: data.nonceStr,
signature: data.paySign,
jsApiList: ['chooseWXPay']
});
wx.ready(function() {
wx.chooseWXPay({
timestamp: data.timeStamp,
nonceStr: data.nonceStr,
package: data.package,
signType: data.signType,
paySign: data.paySign,
success: function(res) {
alert("支付成功");
// 处理支付成功逻辑
},
cancel: function(res) {
alert("支付已取消");
},
fail: function(res) {
alert("支付失败");
}
});
});
})
.catch(error => {
console.error('支付请求错误:', error);
});
};
</script>
</body>
</html>
HTML
注意事项
- 安全性：确保后端服务的安全性，防止恶意请求。
- 支付状态验证：在支付成功后，最好通过你的后端进行支付状态的验证，确保订单实际支付成功。
- 金额单位：微信支付的金额单位为分，注意在传递时保持一致。
- 微信支付配置：确保前端页面在微信环境中（如微信浏览器）打开，并正确配置微信支付的相关参数。
标签： 来源：
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。