业务场景：

微信支付

文档地址：

概述

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

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

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

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

JSAPI 支付

获取openid 过程

H5支付

概述

常见链接形如下面：

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

任务流程图

主要页面跳转：

泳道图

注意点

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

小程序支付

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 = ` 
<form id=alipaysubmit name=alipaysubmit action=https://openapi.alipay.com/gateway.do method=POST> 
<input type=hidden name=app_id value=201805106……/> 
<input type=hidden name=method value=alipay.trade.page.pay/> 
<input type=hidden name=format value=JSON/> 
<input type=submit value=ok style=display:none;> 
</form> <script>document.forms[alipaysubmit].submit();</script>`; 


_str = _str.replace(/form/, form target="_blank"); 
div.innerHTML=_str; document.body.appendChild(div); document.forms.alipaysubmit.submit();

注意点：

1.手机网站支付产品不建议在 App 端使用；如果需要在 App 端中使用支付，请接入 App 支付产品

详情请看文档：

2.在 iOS 系统中，唤起支付宝 App 支付完成后，不会自动回到浏览器或商户 App。用户可手工切回到浏览器或商户 App。

3.手机网站支付目前未安装支付宝钱包，不支持H5页面登陆支付。

在用户安装了支付宝客户端的前提下，产品支付流程基本不变，按原流程直接唤起钱包进行支付。

在未安装支付宝客户端的前提下，支付流程有所变化，升级后不再唤起h5网页支付，会引导用户下载支付宝客户端进行支付。

注：

1)、2019年8月份开始签约的手机网站支付产品会走新的支付流程，之前历史签约产品仍然走原产品流程。

2)、对于部分H5支付成功率极低的商户，为了提升支付体验和安全性，也会升级为新产品流程。

支付结果处理

具体根据业务，再对每个结果做相应的判断

总结与思考

相对h5接入的方式也仅限于在浏览器里，因各个浏览器封装内核不同，用户设置不同，以及浏览器体验不如原生，导致支付成功率也不如在app 中和小程序中，所以h5支付之后发展也必将是是一个弱入口，如何app开发不用发版本，是之后发展的方向。