H5微信支付

H5微信支付前端流程

@H5微信支付前端处理流程

背景

基于项目的需要，需要做一个H5端的商城，自然少不了支付，鉴于微信的社交能力，我们前期只考虑了微信支付，在此过程中遇到的一些问题，简单整理下。
这里我只说前端需要处理的，其它的配置及参数什么的后端会给你整好所以不做介绍。

支付方式

1.微信内通过WeixinJSBridge（jsApi）来接入支付，具体方式可以查看文档
2.微信环境外（比如浏览器）吊起微信支付，具体方式可以查看文档

jsApi方式支付

1.此种方式只能在微信环境内支付，通过WeixinJSBridge（微信内置对象）来吊起支付。
2.支付流程，需要先去微信获取授权换取openid，（建议进入支付页面前先拿好openid,因为我在开发过程中发现在当前页面获取的话用户刷新页面 会报错，用户授权获取到的code只能用一次。）
我们的项目采用的React。所以通过window.WeixinJSBridge来判断是否有WeixinJSBridge否则代码会报错。

   // 外界调用 直接引入 wxPay.js 传入支付参数 以及跳转页面路由
  // 首先封装具体的封装方法
  // 参数说明 history ：路由 方便支付成功后可以跳转制定页面。
  // params: 支付需要的饿参数
  function onBridgeReady(params, history) {
   
  if (window.WeixinJSBridge) {
   
    window.WeixinJSBridge.