微信支付已经成为了最主流的支付方式之一。作为开发者，学会在项目中集成微信支付功能是非常必要的。本文将介绍如何使用ThinkPHP5后端和Vue前端框架配合工作，实现微信支付控件的调起和支付功能。

Ripple Yu

于 2024-07-05 11:31:51 发布

阅读量532

点赞数 24

文章标签：微信 vue.js 前端 php

本文链接：https://blog.csdn.net/shouOvO/article/details/140200121

版权

环境准备

首先，我们需要准备以下环境：

后端框架：ThinkPHP5
前端框架：Vue.js
微信支付开发者账号：需要开通商户号并获取相关的API密钥

ThinkPHP5 后端

1，// JSAP 签名接口
public function getEncryptedData(Request $request)
{
// 接收前端传来的参数说明
// 应用ID
// 时间戳
// 随机字符串
// 订单详情扩展字符串
//接收前端传来的参数 ->参考数据
// wx8888888888888888
// 1414561699
// 5K8264ILTKCH16CQ2502SI8ZNMTM67VS
// prepay_id=wx201410272009395522657a690389285100
$appId = $request->param('appId');
$timeStamp = $request->param('timeStamp');
$nonceStr = $request->param('nonceStr');
$package = $request->param('package');

// 构建要加密的字符串
$dataToEncrypt = "$appId\n$timeStamp\n$nonceStr\n$package";

// 执行 OpenSSL 命令并获取加密数据
$encryptedData = shell_exec('echo -n -e "' . $dataToEncrypt . '" | openssl dgst -sha256 -sign apiclient_key.pem | openssl base64 -A');

// 返回加密数据给前端

//实际开发需要加上其他的数据，第二步需要的请求数据一并返回给前端
return json(['encryptedData' => $encryptedData]);
}

2，向微信发起预支付接口

public function postTransaction(Request $request)
{

       // 签名认证------
       // 发起请求的商户（包括直连商户、服务商或渠道商）的商户号mchid
       // 商户API证书序列号serial_no，用于声明所使用的证书
       // 请求随机串nonce_str
       // 时间戳timestamp
       // 签名值signature

       $schema = '1666284693';
       $merchant_id = 'your_merchant_id';
       $serial_no = 'your_serial_no';
       //以上参数也改为前Request接收数据
       $token = sprintf('mchid="%s",nonce_str="%s",timestamp="%d",serial_no="%s",signature="%s"',
       $merchant_id, $nonce, $timestamp, $serial_no, $sign);
       $authorization = "{$schema} {$token}";
       //-------------

$url = 'https://api.mch.weixin.qq.com/v3/pay/partner/transactions/jsapi';

$headers = [
'Authorization: ' . $authorization,
'Accept: application/json',
'Content-Type: application/json',
];
//Authorization: WECHATPAY2-SHA256-RSA2048 mchid="1900009191",nonce_str="593BEC0C930BF1AFEB40B4A08C8FB242",signature="uOVRnA4qG/MNnYzdQxJanN+zU+lTgIcnU9BxGw5dKjK+VdEUz2FeIoC+D5sB/LN+nGzX3hfZg6r5wT1pl2ZobmIc6p0ldN7J6yDgUzbX8Uk3sD4a4eZVPTBvqNDoUqcYMlZ9uuDdCvNv4TM3c1WzsXUrExwVkI1XO5jCNbgDJ25nkT/c1gIFvqoogl7MdSFGc4W4xZsqCItnqbypR3RuGIlR9h9vlRsy7zJR9PBI83X8alLDIfR1ukt1P7tMnmogZ0cuDY8cZsd8ZlCgLadmvej58SLsIkVxFJ8XyUgx9FmutKSYTmYtWBZ0+tNvfGmbXU7cob8H/4nLBiCwIUFluw==",timestamp="1554208460",serial_no="1DDE55AD98ED71D6EDD4A4A16996DE7B47773A8C"
$data = [
"sp_appid" => $request->param('sp_appid'),
"sp_mchid" => $request->param('sp_mchid'),
"sub_mchid" => $request->param('sub_mchid'),
"description" => $request->param('description'),
"out_trade_no" => $request->param('out_trade_no'),
"notify_url" => $request->param('notify_url'), // 支付结果通知地址
"amount" => [
"total" => $request->param('total'), // 单位为分
"currency" => $request->param('currency')
],
"payer" => [
"sp_openid" => $request->param('sp_openid'),
"sub_openid" => $request->param('sub_openid')
],
];

// 初始化 cURL
$curl = curl_init();

// 设置 cURL 选项
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

// 执行 cURL 请求
$response = curl_exec($curl);

// 检查是否有错误发生
if ($response === false) {
$error = curl_error($curl);
curl_close($curl);
return "cURL Error: " . $error;
}

// 关闭 cURL 资源
curl_close($curl);

// 处理响应
return $response;
}

3，缺少支付成功后的微信回调

以上代码没有回调函数，还需要完善支付成功后的回调操作。

Vue 前端实现

先通过网络请求调用第一个向微信发起预支付接口。请求回来后，将拿到的参数回调以下微信aip即可调起微信支付。

WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": "wx2421b1c4370ec43b", //公众号ID，由商户传入
"timeStamp": "1395712654", //时间戳，自1970年以来的秒数
"nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串
"package": "prepay_id=up_wx21201855730335ac86f8c43d1889123400",
"signType": "RSA", //微信签名方式：
//将签名改成调用后端接口拿取
"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名
},
function(res) {
// get_brand_wcpay_request:ok   支付成功
// get_brand_wcpay_request:cancel   支付过程中用户取消
// get_brand_wcpay_request:fail   支付失败
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
});

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();
}