微信支付宝支付多端总结

记录开发过程中支付宝，微信支付在PC端，移动端的处理

一，支付宝支付

首先我们需要在支付宝创建一个企业账号：memberprod.alipay.com/account/reg…

（1）PC端点击支付，调用后端接口，接口返回一段html片段，是一个form表单提交，页面上会显示一个二维码图片，直接用支付宝app扫码支付即可，支付成功后，页面会自动跳转到我们配置的回调地址

（2）移动端h5支付宝支付

同样的调用接口，会返回如下一段html 表单内容，将html内容展示在页面上

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=utf-8&method=alipay.trade.wap.pay&sign=aCegTNCKXD25l80POEK1w9kxAftnnM2iQkxsBBexwzO9LGQYTSGYrPdxflGTmrJMS%2Bf%2FVhFF3qr9YrXdFLsBECd1xHE5OkmD1BQCzZu7Y%2B42Nfw0N%2BNF9zTQMM3uYWCXshzwezEkTjDvRQYG%2FrKwR%2BPVWCtX5yvAk55nheoDmhLkEtVf%2Big0VckdSWk2iwa0%2B9p%2BjllDiCRnnzJlH7cPaI6v%2FCZ40M%2BcVjUhnh7ijCKrFUCnrvzXTHrq6lMyUB6ObwIpHDEQ2TwZ%2F92uc5tYEErMoQDhQKfaaFKDBEHSfZU25oNbKByyb21k2qBChIFcy9Rmp1nVQmGjBrZdCqKjNA%3D%3D&return_url=http%3A%2F%2F192.168.86.40%3A10086%2Fpages%2Forder%2Fdetail%3ForderCode%3D201906171054333533&notify_url=http%3A%2F%2Fhsz-test.lai-ai.com%2Fapi%2Fnotify%2FzfbPayNotify&version=1.0&app_id=2019061265523269&sign_type=RSA2&timestamp=2019-06-17+18%3A03%3A07&alipay_sdk=alipay-sdk-java-3.7.26.ALL&format=json"><input type="hidden" name="biz_content" value="{"out_trade_no":"RL3717180307C3D6","total_amount":0.01,"subject":"支付","product_code":"FAST_INSTANT_TRADE_PAY","body":"支付"}"><input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

如果有支付宝app，可以直接点击按钮支付，没有的话可以点击页面下载好之后再去支付

如果用户是在微信浏览器中打开的话，我们可以做一个引导操作，引导用户在浏览器中打开页面完成支付操作。

二，微信支付

同样我们需要在微信商户平台注册一个商户号，配置相关的东西

（1）微信PC端扫码支付，在进入页面的时候就会调用一个后端接口，拿到二维码链接code_url, 前端可以使用qrcode将链接转为二维码图片展示在界面

这里支付成功之后需要我们自己调用定时接口查询订单是否支付成功，支付成功后跳转到对应的结果页

（2）h5支付

发现新的开发指引文档没有详细写出具体的流程，所以这里还是贴出旧的文档地址来：pay.weixin.qq.com/wiki/doc/ap…

这一块在开发过程中需要重点注意的就是我们无法保证页面回调时，支付流程已经结束，所以即使我们设置了 redirect_url 也不会生效，所以我们需要自己弹个窗，由用户自己去点击查询是否返回支付。

（3）微信浏览器内（公众号支付）

这里有两种方式：

A. 不用引入sdk包，直接调用WeixinJSBridge.invoke()方法 WeixinJSBridge内置对象在其他浏览器中无效。（JSAP调起支付）

B. 需要引入sdk包，配置wx.config()，然后再调用微信支付 wx.chooseWXPay() (微信公众号支付文档)

注意：⚠️ （i）后端返回的字段 signType （签名方式）与调用sdk的方法返回的 signnature 有所不同;

（ii）支付的时候需要传openId，所以手机号登录也需要获取微信openId保存使用