微信公众号授权H5网站发起JSAPI支付的开发流程

一、介绍：

JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付，JSAPI支付只能用微信浏览器打开。

应用场景：

• 用户在微信公众号内进入商家H5网站，打开某个主页面，完成支付

二、准备工作：

JSAPI支付需要提前在微信各平台进行业务配置，包括账号注册、设置支付授权目录、设置JS接口安全域名以及设置授权回调页面域名等。

配置项	描述
注册微信公众号	微信公众号需要认证，认证后才会有相关开发接口权限
注册微信商户号	微信商户号开通后，会有appid、mch_id、key等信息提供
开通微信支付权限	登录商户平台，将商户号和公众号绑定，产品中心->appID授权管理
配置网页授权域名	开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名；设置方法：登录微信公众平台，设置->公众号设置->功能设置->网页授权域名->修改
配置jsapi安全域名	设置JS接口安全域名后，公众号开发者才可在该域名下调用微信开放的JS接口；设置方法：登录微信公众平台，设置->公众号设置->功能设置->JS接口安全域名->修改
配置支付安全目录	所有使用公众号支付方式发起支付请求的链接地址，都必须在支付授权目录之下；设置方法：登录微信商户平台，产品中心->开发配置，目录要设置到当前访问连接的上一级

其中网页授权域名和jsapi安全域名都为域名，而且不需要http等内容，直接XXX.XXX.com即可，可以为二级域名

三、支付流程

微信JSAPI支付的实际核心处理过程大概如下：

• 用户在微信通过公众号或其他链接方式打开商户的H5页面，商户网站引导用户进入授权页面同意授权获取code、access_token、openid等信息
• 进入页面后，用户点击支付按钮时，执行一个Ajax到后台
• 后台通过前台的信息（如商品名额，金额等），将其组装成符合微信要求格式的xml，然后调用微信的统一下单接口
• 调用成功后微信会返回一个组装好的xml，我们提取之中的消息（prepay_id），以及生成支付签名信息（paySign）
• 后台通过http get方式请求获得jsapi_ticket，并生成JSSDK签名信息（signature）
• 后台将prepay_id、paySign、signature等信息以JSON形式返回给前台
• 前台将该JSON传参给微信内置JS的方法中，调其微信支付，支付成功后，微信会将本次支付相关信息返回给我们的服务器

四、开发流程

1、网页授权

参考《微信开放文档 —— 网页授权》

第一步：修改授权回调域名
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，