H5 access payment process - WeChat payment & Alipay payment

业务场景：

H5Docking WeChat payment and Alipay payment,appUnable to publish,需要支持在appAnd within the browser used at the same time.

So I took this opportunity to conduct research on front-end access to third-party payment,This time we only discuss WeChat payment,和支付宝支付.

微信支付

文档地址：微信支付

概述

WeChat payment methods mainly include,Mainly provide the following for ordinary merchants7种方式

付款码支付：such as large chain stores,超市,can pay when,Scan the user's personal payment code,进行支付,The trigger scene is generally：User opens personal payment code->

cashier scanner scan->门店收银台->商户后台->微信支付系统

JSAPI支付：Only available within WeChat,WeChat can be calledAPI,Directly evoke WeChat's payment component.For example, the embedded payment pages in some early official accounts.

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

App支付：appInner evoke to open the payment component for WeChat for payment

H5支付：The user opens the browserh5,,Arouse WeChat pay components.

小程序支付：The applet directly calls the applet WeChat paymentapi,小程序不能通过拉起H5页面做jsapi支付,小程序内只能使用小程序支付

刷脸支付：Requires an actual hardware scenario.

The main ones that are closely related to the front end are JSAPI支付,H5支付,小程序支付.

This time we focus on discussingJSAPI 支付,H5支付,小程序支付.

JSAPI 支付

There are many pre-configured items,Because it is used in the WeChat environment,WeChat has always been very restrained and rigorous in interactions involving the WeChat ecosystem

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

The main process WeChat document is very clear:

概括一下就是,h5 By calling the WeChat special offers JSbridge to evoke WeChat payment controls

获取openid 过程

I mainly add,Need to pre-fetch the user'sopenid.可通过openid拿到昵称、性别、所在地.则在获取openid 在获取openid will need to modify the input parameters,There will be a forced user authorization popup, 即使在未关注的情况下,只要用户授权,也能获取其信息.如果只是获取openid,then the user experience is just a page reload.

H5支付

概述

H5支付是指,The front end evokes WeChat in the browserapp,After the payment is successful, go back to the browser.

前端发起请求,需要后台server 支持,Request WeChat Pay Service,Return to the link of front-end WeChat payment.我们的回调地址,会以redirect_url The form of spelling is behind the returned link,Front end open this link,Can evoke WeChat payment.After completing WeChat payment,will return to the callback address.

Common links look like this：

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

任务流程图

Main page jump：

泳道图

注意点

1.当我们把h5页面嵌入到app内使用时,问题：ios After the WeChat payment is successful or the payment is cancelled,stay on WeChat,无法回到app.会打开safari

We made a transit page,专门供iOS 使用,在浏览器打开时,我们会以url schema 的形式唤起app,Open the payment results page.

2.注意微信xyRedirectUrl After coding length shall not exceed 800 WeChat Pay will report an error

小程序支付

Mini Programs need to pass WeChat authentication,Enable WeChat payment capability.Merchant ID required,General individual development more difficult

Call way to compareJSAPI 较为简单,Because it is in the WeChat environment,兼容性问题较少.

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

支付宝支付

文档地址 支付宝支付

There are also many payment methods of Alipay,Documentation is very detailed,Specific content can be directly inquiry document,我们在这里重点介绍 手机网站支付

手机网站支付

概述

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

前端调用方式：

需要从前端页面以 Form 表单的形式发起请求,The browser will automatically jump to the relevant page of Alipay（Usually the cashier or the signing page）,用户在该页面完成相关业务操作后再回跳到商户指定页面

任务流程图

Main page jump：

The front-end core code is as follows

// 后台接口返回来的是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.It is not recommended in mobile web payment products App 端使用;如果需要在 App Pay in terminal,please access App 支付产品

详情请看文档：唤起支付宝app

2.在 iOS 系统中,唤起支付宝 App 支付完成后,Does not automatically return to the browser or merchants App.User can manually switch back to browser or merchant App.

3.Mobile website payment currently does not have Alipay wallet installed,不支持H5Page login payment.

On the premise that the user has installed the Alipay client,The product payment process is basically unchanged,Directly call up the wallet to pay according to the original process.

Under the premise that Alipay client is not installed,The payment process has changed,After the upgrade is no longer arousalh5网页支付,Will guide users to download Alipay client to pay.

注：

1)、2019年8Mobile website payment products signed in this month will follow a new payment process,Previous historical contracted products still follow the original product process.

2)、对于部分H5Merchants with very low payment success rate,To improve payment experience and security,Also upgrade to new product process.

支付结果处理

WeChat payment results are asynchronous,Query the payment result of WeChat payment system through the interface service,再返回给前端,There needs to be a process of polling the results.General payment results are：

具体根据业务,Then make corresponding judgments for each result

总结与思考

• 对接第三方支付,If only from the front-end point of view,There's really very little to say,It's more about dealing with individual browsers,系统的兼容性问题,In fact also didn't find too general solution,从长远来看,It is officially recommended that ifapp recommended insidenativeway to access payment,If Alipay,微信内,After going to call up the respective applet to pull up the payment.

• 相对h5Access is also limited to the browser,Because each browser encapsulates the kernel differently,Different user settings,and the browser experience is not as good as native,As a result, the payment success rate is not as good asapp In the middle and the applet,所以h5Development after payment is bound to be a weak entry,如何appDevelopment without a release version,is the future development direction.

• Alipay payment methods are more diverse than WeChat payment methods,But the documentation is not as clear as WeChat,But Community Q&A does a better job.From the perspective of product latitude,WeChat does not provide an intermediate page like Alipay,Instead, the setting of the middle page is left to the merchant to decide.？Why does WeChat not provide a cashier on the web,Wechat not downloadedAPPCan't use WeChat Pay？I think it's more,Alipay pays more attention to payment attributes,WeChat pay more attention to the social attribute.

先自我介绍一下,小编13年上师交大毕业,曾经在小公司待过,去过华为OPPO等大厂,18年进入阿里,直到现在.深知大多数初中级java工程师,想要升技能,往往是需要自己摸索成长或是报班学习,但对于培训机构动则近万元的学费,着实压力不小.自己不成体系的自学效率很低又漫长,而且容易碰到天花板技术停止不前.因此我收集了一份《java开发全套学习资料》送给大家,初衷也很简单,就是希望帮助到想自学又不知道该从何学起的朋友,同时减轻大家的负担.添加下方名片,即可获取全套学习资料哦