H5接入支付流程-微信支付&支付宝支付

业务场景：

H5对���微信支付和支付宝支付，app无法发版，需要支持在app内和浏览器内同时使用。

于是借此机会对前端接入对第三方支付进行了调研，本次只讨论微信支付，和支付宝支付。

微信支付

文档地址：微信支付

概述

微信支付方式主要包括，对普通商家主要提供以下7种方式

付款码支付：比如大型连锁店，超市，支付时可以，扫描用户的个人付款码，进行支付，触动场景一般为：用户打开个人付款码->

收银员扫描仪扫描->门店收银台->商户后台->微信支付系统

JSAPI支付：仅限在微信内使用，可调用微信的API，直接唤起微信的支付组件。比如早期的一些公众号里的内嵌支付页面。

Native支付：商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url，商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。注意：code_url有效期为2小时，过期后扫码不能再发起支付。

App支付：app内唤起为微信打开支付组件进行支付

H5支付：用户在浏览器端打开h5,，唤起微信支付组件。

小程序支付：小程序直接调用小程序微信支付api,小程序不能通过拉起H5页面做jsapi支付，小程序内只能使用小程序支付

刷脸支付：需要有实际的硬件场景。

和前端关系密切的主要有 JSAPI支付，H5支付，小程序支付。

我们此次重点讨论一下JSAPI 支付，H5支付，小程序支付。

JSAPI 支付

前置配置项比较多，因为在微信环境中使用，微信在涉及微信生态的交互方面一直非常克制和严谨

需要配置支付域名，网页授权域名，具体可以看文档，微信公众平台企业账号，商户号，开通jsapi支付权限，设置了页面授权域名，并且是你网站的域名地址，基本接口权限，尤其是jssdk部分权限，保证尽可能都开通

主要流程微信文档说的很清楚了:

概括一下就是，h5 通过调用微信提供的特殊 JSbridge 来唤起微信支付控件

获取openid 过程

我主要补充说下，需要前置去获取用户的openid。可通过openid拿到昵称、性别、所在地。则在获取openid 在获取openid 会需要修改入参数，会有强制用户授权弹窗， 即使在未关注的情况下，只要用户授权，也能获取其信息。如果只是获取openid，则对用户来说感受只是页面重新加载了一次。

H5支付

概述

H5支付是指，前端在浏览器唤起微信app,支付成功后在回到浏览器。

前端发起请求，需要后台server 支持，请求微信支付服务，返回前端微信支付的链接。我们的回调地址，会以redirect_url 的形式拼的返回的链接后面，前端打开这个链接，就可以唤起微信支付。完成微信支付后，会回到回调地址。

常见链接形如下面：

MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

任务流程图

主要页面跳转：

泳道图

注意点

1.当我们把h5页面嵌入到app内使用时,问题：ios 端在微信支付成功或者取消支付后，停留到了微信，无法回到app.会打开safari

我们做了一个中转页面，专门供iOS 使用，在浏览器打开时，我们会以url schema 的形式唤起app,打开支付结果页面。

2.注意微信xyRedirectUrl 编码后长度不可超过 800 微信支付会报错

小程序支付

小程序需要通过微信认证，开通微信支付能力。需要商户号资质，一般个人开发比较难搞

调用方式比较JSAPI 较为简单，因为是在微信环境内，兼容性问题较少。

wx.requestPayment({     "timeStamp":"",// 时间戳 "nonceStr": "",//随机字符串，长度为32个字符以下。     "package": "",//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*     "signType": "MD5",//签名方式 "paySign": "",//签名     "success":function(res){}, "fail":function(res){},     "complete":function(res){} })

支付宝支付

文档地址 支付宝支付

支付宝支付方式也有很多种，文档很细节，具体内容可直接查询文档，我们在这里重点介绍 手机网站支付

手机网站支付

概述

商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块，商家网页会跳转到支付宝中完成支付，支付完后跳回到商家网页内，最后展示支付结果。若无法唤起支付宝客户端，则在一定的时间后会自动进入网页支付流程。

前端调用方式：

需要从前端页面以 Form 表单的形式发起请求，浏览器会自动跳转至支付宝的相关页面（一般是收银台或签约页面），用户在该页面完成相关业务操作后再回跳到商户指定页面

任务流程图

主要页面跳转：

前端核心代码如下

// 后台接口返回来的是form标签字符串 let _str = `