支付场景之H5页面

大家好，欢迎来到IT知识分享网。

        很多老板与技术团队看了我们的微信小程序支付场景直呼专业，对我们牛卡派系统的支付流程有了一定的认识，那么小编就趁热打铁，将H5页面支付场景的整体流程放到下面了哦~

        今天内容可都是满满的干货，有需求的可以私信我们牛卡派哦。

H5页面微信支付

1.方案介绍

1.1应用场景

商户拥有一个H5商城或通过H5页面对外提供线上服务，当需要收款时调用牛卡派SAAS支付接口完成收款，下图是微信、支付宝、银联云闪付、手机默认浏览器环境下可以使用的H5页面收款效果。

1.2名词定义与说明

由于微信和支付宝未开放给三方机构原生H5支付能力，故牛卡派系统通过如下方式实现H5支付：

• 【H5页面微信支付】：通过微信JSAPI支付（JSAPI支付-产品介绍 | 微信支付商户平台文档中心 (.com)）实现，利用微信公众号接口进行调用和支付。前提是商户要有微信公众号。如果商户没有自己的公众号可以对接我们的支付托管产品，使用我们的公众号收款。
• 【H5页面三方浏览器支付】：仅支持支付宝、微信，支付宝通过Native形式实现，微信通过唤醒微信小程序方式实现

2. 接入前准备

2.1 商务准备

1. 商户已有H5商城网站或服务，并且已经过ICP备案；
2. 选择接入模式

• 服务商模式：指服务商与支付机构签约，服务商通过接口或控台方式完成商户入网。具体流程：服务商完成协议签署后，将准备好的入网材料提供给支付机构人员，由支付机构人员发起服务商入网申请，待审核通过入网成功后，服务商联系人将收到短信通知控台账号及密码。
  •      3. 在系统完成商户进件入网
    1. 服务商模式：
       1. 控台入网：参考服务商控台进件流程；
       2. API入网：
          1. 企业商户调用 企业商户基本信息入驻接口 、小微商户调用 个人商户基本信息入驻接口 完成开户、绑卡、结算配置。
          2. 调用 商户业务开通 开通微信/支付宝/银联云闪付入驻。

1.      4. 选择接入功能并准备相关材料
2. H5页面微信支付：提供商户或服务商主体的公众号，并在系统中开通微信支付业务并配置公众号appid；
3. H5页面三方浏览器支付：跳转支付宝可使用native模式实现，跳转微信可使用小程序模式实现；

2.2 对接准备

第一步：密钥获取

联调之前需要先获取公私钥；

第二步：公共参数获取

登录服务商/商户控台后，可在开发设置-开发者信息中，获取sys_id，product_id参数信息；

第三步：业务开通与配置

• 服务商模式：
• 步骤一：服务商功能及权限开通。服务商通过线下签约方式申请支付宝或微信、银联云闪付功能，支付机构人员在审核好服务商资料之后，为服务商开通相关支付功能，及费率配置。
• 步骤二：为商户开通功能及权限。服务商权限及费率配置完成后，服务商可在服务商控台为下属商户申请开通相关支付功能，或通过调用商户业务开通接口开通。

3.开发指引

3.1对接规范

调用接口，均采取POST形式提交，数据格式统一为JSON格式。

3.2业务开发配置

3.2.1微信侧准备：

准备一个已认证的公众号（微信内置浏览器）、小程序（第三方浏览器唤醒用）

3.2.2系统侧准备：

1. 微信：已开通微信业务，并配置小程序和公众号Appid
2. 商户微信实名认证状态已完成，实名认证状态显示已授权

   1）通过服务商控台确认已完成实名认证：新版控台-服务商控台-【商户信息】

        2）通过微信实名认证状态查询接口来确认相关配置

        3）商家已反馈实际在微信认证通过（由于系统对接的微信接口可能存在更新延迟情况，可按照微信实际认证情况为准）

3.3系统调用流程

H5支付方式的整体调用流程建议：

3.3.1微信调用流程

主要有以下几个步骤：

• 通过授权获取用户 open_id
• 用前端获取的用户信息调斗拱聚合正扫接口；
• 聚合正扫接口返回的pay_info提供前端页面发起支付；
• 牛卡派系统会将交易结果通知到商户后端系统。

接入步骤详细说明：

1.通过授权获取用户 open_id

​ 授权说明见微信官方链接： 网页授权

• 微信公众号后台配置授权域名，将微信校验文件放到服务器根目录下
• 用户静默授权获取code，前端页面在微信内打开授权地址，并重定向到自己项目目标地址

只为获取 open_id的话静默授权就可以，无需用户同意。

地址：

/*scope取值：snsapi_base/snsapi_userinfo - snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid） - snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） */ let url=`https://open.weixin..com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`; window.location.replace(url);

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

• 使用获取到的code，在服务端调用微信接口获取 access_token和 open_id

获取code后，请求以下链接获取access_token：

示例代码如下：

/*https://api.weixin..com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code*/ url = 'https://api.weixin..com/sns/oauth2/access_token' params = { 'appid': app_id, 'secret': 'wx_secret', 'code': wx_code, 'grant_type': 'authorization_code', } resp = requests.get(url, params, timeout=15) result_dict = json.loads(resp.text) openid=result_dict.get('openid')

2.调用系统聚合正扫接口

交易类型 trade_type 选T_JSAPI，用户子标识 sub_openid 填上一步获取的openid

将接口应答的支付信息pay_info返回前端页面

聚合正扫接口需关注以下字段：

*其中wx_data中，如填写openid则无需填写sub_appid+sub_openid。如不填openid，则需填写sub_appid和sub_openid。

同步返回关注以下字段：

3.发起支付

前端页面调用JSAPI 使用聚合正扫返回的pay_info内容发起支付。

示例代码：

WeixinJSBridge.invoke('getBrandWCPayRequest', { "appId": "wx2421b1c4370ec43b", "timeStamp": "", "nonceStr": "e61463f8efa94090b1f366cccfbbb444", "package": "prepay_id=up_wx335ac86f8c43d", "signType": "RSA", "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名 }, function(res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示： //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 } }); } if (typeof WeixinJSBridge == "undefined") { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady); } } else { onBridgeReady(); }

3.3.2H5页面三方浏览器支付流程

调用流程：

接入步骤说明：

1.APP跳转微信小程序

下载微信SDK 并参考 微信官方说明 接入SDK。

配置准备：

• 在微信开放平台上有账号而且有通过的移动应用。
• 在微信公众平台有账号而且有小程序，最好发布为体验版本

• 在微信开放平台把对应的移动应用和小程序建立关联
• 调用代码

示例代码：以IOS 为例，安卓示例请参考微信官方说明。

 //微信建议应用启动时调用 [WXApi registerApp:@"wx_app_id"];//wx_app_id 为移动应用的appid ... ... ... //跳转小程序部分 WXLaunchMiniProgramReq *launchMiniProgramReq = [WXLaunchMiniProgramReq object]; launchMiniProgramReq.userName = @"gh_4fxxxxxx"; //待拉起的小程序原始Id launchMiniProgramReq.path = @"pages/index/index?query='test'"; 拉起小程序页面的可带参路径，不填默认拉起小程序首页，对于小游戏，可以只传入 query 部分，来实现传参效果，如：传入 "?foo=bar"。 launchMiniProgramReq.miniProgramType = WXMiniProgramTypePreview; //拉起小程序的类型 [WXApi sendReq:launchMiniProgramReq]; ... ... ...

2.通过授权获取用户 open_id

​ a. 小程序端调用 wx.login(Object object)接口 获取登录凭证（code）

 wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://test.com/onLogin', data: { code: res.code } }) } else { console.log('登录失败！' + res.errMsg) } } })

b. 商户服务端使用前一步获取的code 换取 open_id ，后台请求以下链接 获取openID；

示例代码如下：

 /*GET https://api.weixin..com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code*/ url = 'https://api.weixin..com/sns/jscode2session' params = { 'appid': app_id, 'secret': 'wx_secret', 'js_code': wx_code, 'grant_type': 'authorization_code', } resp = requests.get(url, params, timeout=15) result_dict = json.loads(resp.text) openid=result_dict.get('openid')

3.下单请求支付信息

通过上面的App打开的path是’path/index’, 所以需要把App的onShow事件定义在page/index.js上

这里的options.scene是1069，这个场景id表示从app打开。

options.query.key1和options.query.key2就是app打开小程序传递的参数。

客户服务器端调用聚合支付接口下单拉起支付，需要传入前端调用获得的 open_id 获取微信返回支付 pay_info信息。

聚合正扫接口需关注以下字段：

*其中wx_data中，如填写openid则无需填写sub_appid+sub_openid。如不填openid，则需填写sub_appid和sub_openid。

同步返回关注以下字段：

4.小程序端发起支付

 wx.requestPayment( { 'timeStamp': '', 'nonceStr': '', 'package': '', 'signType': 'MD5', 'paySign': '', 'success':function(res){}, 'fail':function(res){}, 'complete':function(res){} })

3.3.3退款流程

完整的交易流程还要包括退款。由于用户或者商户的原因需要退款时，商户可以通过本接口将支付款退还给用户，退款成功资金将原路返回。微信、支付宝、银联云闪付参见扫码交易退款接口；其它类型的交易退款参见线上交易退款接口。

关注以下请参：

• 原交易请求流水号、原交易全局流水号、原交易微信支付宝的商户单号三选一即可；
• 退款金额不能大于交易金额；由于接口支持多次部分退款，多次退款场景下退款总额不能高于原交易金额；
• 退款也是以异步返回的成功或失败状态为最终结果；
• 一些特殊场景下退款时效可能比较长，注意接口描述文档中的退款时效说明；

3.3.4 对账流程

为了满足商户财务的对账需求，系统提供了对账功能。

方案一：控台下载；

方案二：接口获取；参见交易结算对账单查询接口

• 接口下载的对账文件包括以下四类：
  • 日对账单类型：包括日结算对账单、日分账对账单、日出金对账单；
  • 日交易数据：主要是各种支付交易记录；
  • 月结算对账单：按月汇总的结算对账单；
  • 月交易数据：按月汇总支付交易记录；

3.3.5异步通知

针对交易结果，系统会通过异步消息的方式通知客户系统。 

调用接口时上送的异步通知地址为http/https路径：服务器为POST回调，默认超时时间为5秒，超时后会重试3次；不支持HTTP重定向；服务器对应答不是200~300之间的错误，会默认重试3次；异步通知服务器对HTTPS不认证验签和ALLOW_ALL_HOSTNAME_VERIFIER；如商户自定义通知端口，请使用8000-9005内端口，否则无法通知；URL 上请勿附带参数；异步回调请求编码集为：UTF-8；收到通知后请返回状态码“200”,响应异步通知。

注意事项：

同样的异步消息可能会通知多次，因此接收异步消息的处理需做好幂等，保障多次接收到同样的消息处理后结果不变。

在实现异步消息接收的同时，都建议您在重要的业务环节，通过反查接口确认 非终态 支付订单的状态，以保证在发生异步消息延迟或无法送达情况下的支付结果一致性。

H5页面支付宝支付

 1.方案介绍

1.1应用场景

商户拥有一个H5商城或通过H5页面对外提供线上服务，当需要收款时调用牛卡派SAAS支付接口完成收款，下图是微信、支付宝、银联云闪付、手机默认浏览器环境下可以使用的H5页面收款效果。

1.2名词定义与说明

由于微信和支付宝未开放给三方机构原生H5支付能力，故汇付是如下实现H5支付

• 【H5页面支付宝支付】：通过支付宝native（支付宝开放平台 (alipay.com)）形式实现支付
• 【H5页面三方浏览器支付】：仅支持支付宝、微信，支付宝通过Native形式实现，微信通过唤醒微信小程序方式实现

2.接入前准备

支付宝接入准备与微信接入准备所需要的步骤一致。

 3.开发指引

3.1对接规范

调用接口，均采取POST形式提交，数据格式统一为JSON格式。

3.2业务开发配置

3.2.1支付宝侧准备：

无需提前准备

3.2.2系统侧准备：

1. 已开通支付宝业务
2. 商户支付宝实名认证状态已完成，实名认证状态显示已授权

   1）通过服务商控台确认已完成实名认证：新版控台-服务商控台-【商户信息】

        2）通过支付宝实名认证状态查询接口来确认相关配置

        3）商家已反馈实际在支付宝认证通过（由于斗拱对接的支付宝接口可能存在更新延迟情况，可按照支付宝实际认证情况为准）

3.3系统调用流程

H5支付方式的整体调用流程建议：

3.3.1支付宝调用流程

此种方式的主要原理：

• 通过拉起支付宝APP 然后调用支付宝内said为的扫码功能来发起支付。前端拿到服务端返回的支付信息（qr_code），在 APP 内 通过打开第三方APP的方式打开此URL。

接入步骤：

1. 调用系统聚合正扫接口trade_type = ‘A_NATIVE’ (支付宝正扫)；
2. 取出接口返回的qr_code，在 APP 内通过打开第三方APP的方式打开如下URL，举例：

   alipays://platformapi/startapp?saId=&qrcode=支付宝

Android示例代码：

 // 固定前缀 String topic = "alipays://platformapi/startapp?saId=&qrcode="; // 从系统正扫接口获取的参数（以下值仅为示例） String qrcodeUrl = "https://qr.alipay.com/bax02911brluc2xieoph6001" // 字符串拼接 String jumpUrl = topic + qrcodeUrl; // 按以上示例拼接得出结果 // jumpUrl 为 alipays://platformapi/startapp?saId=&qrcode=https://qr.alipay.com/bax02911brluc2xieoph6001 Intent intent = new Intent(); intent.setAction("android.intent.action.VIEW"); // jumpUrl 为先前示例中拼装的 url Uri contentUrl = Uri.parse(jumpUrl); intent.setData(contentUrl); activity.startActivity(intent);

IOS 示例代码：

 [[UIApplication sharedApplication]openURL:[NSURL URLWithString: jumpUrl]];

如需考虑未安装支付宝的情况，APP端可使用 webview，加载聚合正扫接口返回的链接（例：支付宝 此种方式，如未安装支付宝客户端，会跳转到支付宝下载页面，引导用户安装下载。

RN的方式参考以下示例：

 linkurl = 'alipays://platformapi/startapp?saId=&qrcode='+ {URL} Linking.openURL(linkurl);

Union App开发方式：

调用方式可以参考 Uni-app拉起方式说明

3.3.2H5页面三方浏览器支付流程

同上；

支付宝的退款流程、对账流程、异步通知也与上边微信的步骤一致哦~~