我第一次知道微信支付的“脾气”比我还大。
那些文档里密密麻麻的报错码，
怎样的“当前页面的URL未注册”，怎样的“package参数格式错误”。
像极了爱情——明明代码写对了，它就是不工作。
别信那些博客。
当你排查整整三个小时，其目的仅仅是为了那一个字符时，却没人会在凌晨三点向你告知，原来微信授权目录最后是少添加了那条斜杠。
网上那些“五分钟接入微信支付”的教程，全他妈是骗人的。
微信支付，为什么总卡在这一步？
99%的人死在“支付授权目录”上。
你可晓得呀，微信之中的那个目录校验事宜，它并非是对文件展开校验操作，而是针对URL字符串予以校验的。
页面的链接是，https://shop.com/vue/pay ，其后面跟着，id等于1。
这目录它就得搭配上，https://shop.com/vue/pay/。
多一个问号？不行。
少一个斜杠？不行。
写成了 http（但你是https）？不行。
我那时朝着屏幕骂了足足半小时，随后发觉：我所配置的是“/pay”，然而页面实际的路径却是“/pay/”，少了一个斜杠。
它不报“路径错误”。
它报“调用支付JSAPI缺少参数: appld”。
你以为是appId没传，查了半天，结果根本不是。
微信给的报错，永远在撒谎
最气人的是那个报错：
现有交易存有被骗风险，鉴于要保障你的资金安全，故而暂时没办法完成支付。
npm install vue-wechat-pay axios --save
我卖的是手作陶瓷杯子，29块9包邮。
诈骗什么？诈骗谁？
之后才晓得，新的域名，新的商户号，忽然有流量涌进来，风控系统认定你好似是搞诈骗的。
它不是针对你，它是保护用户。
但问题是，它不告诉你“我是风控拦了”。
它让你自己猜。
真正折磨人的不是代码
是那个“用户取消支付”和“密码错误”永远分不清的状态。
前端只能知道“取消了”。
为什么取消？嫌贵？卡里没钱？输错三次被锁了？
你不知道。
你只能写一个弹窗：
“支付失败，请重试。”
import VueWechatPay from 'vue-wechat-pay'
import axios from 'axios'
export default {
components: {
VueWechatPay
},
data() {
return {
appId: '',
timeStamp: '',
nonceStr: '',
package: '',
signType: '',
paySign: ''
}
},
methods: {
createOrder() {
// 调用后端接口获取支付参数
axios.post('/api/wechat/pay', { orderId: 1 })
.then(response => {
// 接收支付参数
const params = response.data;
// 初始化微信支付
this.$wechatPay.init({
appId: params.appId,
timeStamp: params.timeStamp,
nonceStr: params.nonceStr,
package: params.package,
signType: params.signType,
paySign: params.paySign
}).then(() => {
// 支付成功回调
alert('支付成功');
}).catch(error => {
// 支付失败回调
alert('支付失败：' + error);
});
})
.catch(error => {
console.error('获取支付参数失败：', error);
});
}
}
}
然后用户截图骂你：你们这什么破系统？
### 下单成功≠能付钱
prepay_id拿到手了，微信支付界面弹出来了——
你以为成了。
但prepay_id的有效期只有两小时。
用户打开页面，接了个电话，去倒了杯水，回来扫脸——过期了。
报什么？
报“package参数错误”。
有这样一种情况，用户没办法理解，产品经理同样没办法理解，然而只有你能够理解，那就是，他再度返回了，可是微信并不会等待他。
怎么写才算“会了”？
不是把demo跑通。
是知道这些坑，还愿意填。
我见过一个老师傅的做法：
点击支付按钮，并非直接开启支付流程，而是首先弹出一个显示“正在准备支付环境……”的加载状态提示。
const routes = [
{
path: '/wechat-pay',
component: WechatPay
}
];
这3秒里他在干嘛？
他借助后端接口，进行“查询订单状态”的操作，以此查看该订单是否已然被支付过了。
避免用户付了两次。
接着呢，他会运用后端去查询一番，查一查这个prepay_id是不是快要到过期的时间了，一旦快过期了，那就再次进行下单操作，然后更换成另一个全新的。
用户以为那只是转圈圈。
那是他在给微信擦屁股。
安全是个悖论
越安全的系统，体验越他妈像被审问。
微信要求只能在浏览器里调起支付，
要实名认证，
要限额，
绑卡多了说你有风险，绑卡少了说你额度不够。
但那些真正的骗子呢？
他们引导用户，称操作失误资金被冻结，还让扫码解冻，然而那所谓真的微信支付页面，其实质是假的，是钓鱼的呀。
@RestController
@RequestMapping("/api/wechat/pay")
public class WechatPayController {
@GetMapping("/create")
public ResponseEntity<Map> createPayOrder(@RequestParam("orderId") Long orderId) {
// 获取微信支付参数
Map params = wechatPayService.createPayOrder(orderId);
return ResponseEntity.ok(params);
}
}
真正的支付功能，每一步都像在闯关。
假的支付页面，丝般顺滑，直接让你输密码。
所以Vue接入微信支付，最难的是什么？
不是 axios 怎么发请求。
不是 wx.chooseWXPay 参数怎么写。
是你得接受：
你写对了，但它就是不成功。
你得学会看那些跟你代码无关的日志。
去查看一下商户平台有没有出现欠费的情况，再看一下IP是否进入了黑名单，还要看微信那边今日是不是正在进行灰度更新。
写代码只占30%。
余下的百分之七十，处于等待状态，处于查询状态，处于与客服纠缠“我的该商户究竟缘何被限制额度”的状态。
别对自己太苛刻。
凌晨三点的时候，你目光紧紧地盯着，那句“get_brand_wcpay_request:fail”。
那不是你菜。
那是微信支付在用自己的方式告诉你：
好了，你已经把人类能控制的部分都控制住了。
剩下的，交给我吧。
然后把手机拿远一点，眨眨眼。
明天还要上线。
Comments NOTHING