微信js支付

193 阅读3分钟

前言

今天来讲下js支付,以微信js支付为例。

支付宝,也差不多。

流程图

image.png

步骤有点多,一个阶段一个阶段的介绍

先扫码

检查码的状态

检查码的状态
检查商户的状态


这是用户第一次和支付网关通信

调用微信,获取授权码

获取授权码的目的,是为了获取用户的微信id——微信文档里是叫openid,但是其实就是唯一标记用户。


这是支付系统第一次和微信通信


注意,这次调用微信是异步返回,即微信会调用支付公司在微信后台配置的回调地址url

微信异步回调

微信回调的时候,主要携带了授权码字段

调用微信,获取用户的微信id

刚才不是拿到了授权码吗?现在要基于这个授权码,再去获取用户的微信id。

说白了,就是要知道付款人是谁。


这是支付系统第二次和微信通信

总共和微信通信两次

跳转到输入金额页面

用户可以在这个页面输入金额

输入金额

用户输入金额,比如吃饭花了100块钱

提交订单

这个时候,才是真正的支付

这是用户第二次和支付网关通信

说白了,就是提交订单金额而已


支付公司,会把这笔订单提交到银联那边去——》银联会把订单提交到微信那边去
然后,同步返回预支付订单id


注意,上一步刚才不是获取了用户的微信id吗?为什么要获取用户的微信id?

原因就是因为微信支付的时候,需要的入参包含:
1、订单金额
2、用户的微信id //付款人
3、支付公司的微信id //收款人

伪代码

ajax(url,回调方法(){  
  //成功:调用微信js函数,弹出密码框  
  微信密码框函数(唤起密码框函数名字,回调函数(){
    //成功
    什么都不用做,微信会自动回调支付公司在微信后台配置的成功页面
    
    //失败
    取消支付
  })
  
  //失败  
  提示异常信息
});

弹出密码框

刚才上一步,创建订单的时候,是通过ajax请求。

如果请求成功,微信会返回预支付订单id,那么就执行ajax的回调函数:在回调函数里面,会调用微信弹出密码框的js代码——前提是创建订单的时候,要成功返回预支付订单id。然后微信app,就会弹出密码框。然后,用户输入密码。输入密码之后,如果成功,就跳转到支付成功页面。


输入密码:这一步只和微信有关,和支付公司无关。

如果密码正确,微信就会自动回调支付公司在微信后台配置的支付成功页面。

跳转到支付成功页面

这个url是在微信后台配置的,如果成功,就跳转到这个成功页面。

总结

之所以有这么多的步骤,其实每一步都是有用的。

比如,创建订单的时候,需要知道付款人是谁。想要知道付款人id,就要调用微信获取。而想要获取到付款人id,又只需要先获取授权码。这都是一步扣一步的,说白了,上一步的结果就是下一步的入参。大概就是这么个意思。

参考

pay.weixin.qq.com/wiki/doc/ap…