H5支付

August 02, 2021 2899

商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付

🎈概述

​ H5支付时商户在微信客户端外的移动端页面展示商品或服务，用户在前述页面确定使用微信支付时，商户发起本服务呼起微信客户端进行支付

​ 主要用于触屏版的手机浏览器请求微信支付的场景，可以方便的从外部浏览器唤起微信支付

🎈业务流程

⚡商户

H5商城网站，经过ICP备案。

通过H5支付可以实现在非微信浏览器中使用微信支付的场景

⚡用户

  1. 用户从非微信浏览器的站点导航进入商户H5网页，选择需购买商品选择微信支付发起购买流程
  2. 进入微信客户端确认交易，输入密码
  3. 支付成功，用户收到支付凭证同时商户后台收到支付成功的通知

🎈接口流程

  1. 用户下单使用微信进行支付

  2. 商家后台向微信支付发起下单请求（交易类型trade_type=MWEB）

    URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder

    请求参数(必填参数)

    字段名 变量名 类型 描述
    公众号ID appid String(32) 微信分配的公众号ID
    商户号 mch_id String(32) 微信支付分配的商户号
    随机字符串 nonce_str String(32) 随机字符串，可通过随机数生成算法生成
    签名 sign String(32) 签名，可通过签名生成算法生成
    商品描述 body String(128) 商品简单描述，需按规范传递
    商户订单号 out_trade_no String(32) 商户系统内部的订单号
    总金额 total_fee Int 订单总金额，单位为分
    终端IP spbill_create_ip String(64) 用户端IP，获取方式
    通知地址 notify_url String(256) 接收微信支付异步通知回调地址（可直接访问，不能携带参数）
    交易类型 trade_type Srting(16) H5支付的交易类型为MWEB
    场景信息 scene_info Striing(256) 用于上报支付的场景信息（IOS移动应用、安卓移动应用、WAP网站应用、门店信息）

  3. 统一接口返回支付相关参数给商户后台（如支付跳转url）

    返回结果

    字段名 变量名 类型 示例值 描述
    返回状态码 return_code String(16) SUCCESS 通信标识（SUCCESS/FAIL）
    返回信息 return_msg String(128) OK 当返回状态码为FAIL时返回信息为错误原因

    return_code为SUCCESS时返回：

    字段名 变量名 类型 描述
    公共账号ID appid String(32) 调用接口提交的公众账号ID
    商户号 mch_id String(32) 调用接口提交的商户号
    随机字符串 nonce_str String(32) 微信返回的随机字符串
    签名 sign String(32) 微信返回的签名
    业务结果 result_code String(16) SUCCESS/FAIL

    return_code 和result_code都为SUCCESS时返回：

    字段名 变量名 类型 描述
    交易类型 trade_type String(16) 调用接口提交的交易类型(MWEB)
    预支付交易会话标识 prepay_id String(64) 微信生成的预支付回话标识，用于后续接口调用中使用，有效期2小时,针对H5支付此参数无特殊用途
    支付跳转链接 mweb_url String(64) mweb_url为拉起微信支付收银台的中间页面，可通过访问该url来拉起微信客户端，完成支付,mweb_url的有效期为5分钟。

    错误码

  4. 中间页进行H5权限的校验，安全性检查（常见问题）

  5. 如支付成功，商户后台会接收到微信侧的异步通知

  6. 用户在完成支付或取消支付后返回商户页面

  7. 商户在展示页面引导用户发起支付结果查询

  8. 商户后台判断是否接收到微信侧的支付结果，没有可调用订单查询接口确认

  9. 展示最终的订单支付结

🎈接口规则

⚡协议规则

  • 传输方式：采用HTTPS传输，保证交易安全性
  • 提交方式：采用POST方法提交
  • 数据格式：提交和返回数据都为XML格式，根节点名为xml
  • 字符编码：统一采用UTF-8字符编码
  • 签名算法：MD5
  • 签名要求：请求和接收均需校验签名（签名算法）
  • 证书要求：调用申请退款、撤销订单接口需要商户证书
  • 判断逻辑：先判断协议字段返回，在判断业务返回，最后判断交易状态

⚡安全规范

  1. 使用签名算法

  2. 随机字符串字段nonce_str使用生成随机数算法，保证签名不可预测

  3. API证书（获取和使用）

    • 证书文件应放在有访问权限控制的目录
    • 证书文件名应该是复杂且不容易猜测的
    • 服务器应该做好病毒和木马防护工作

  4. 客户回调API安全（通过采用HTTPS协议）

  5. 获取openid(标识微信用户)

🎈实现思路

  1. 支付前的一顿操作……..

  2. 点某个按钮触发跳转到带有微信支付按钮的页面

  3. 点击微信支付后根据订单相关信息生成支付订单同时调用统一下单接口，对微信支付系统发起请求

  4. 微信支付系统根据请求数据生成预支付交易会话标识（prepay_id）并返回过来

  5. :star:构造微信支付所需参数（请求参数见上）后调用统一下单接口向微信支付发起下单请求

    • trade_type=MWEB

    • 生成签名：将发送的参数按参数名ASCII码从大到小排序，使用键值对的格式拼接成字符串，然后在字符串后拼接key得到新的字符串并进行MD5运算

    • 生成随机字符串：调用随机数函数生成，将得到的值转换为字符串。

    • 获取用户端ip：获取’REMOTE_ADDR ‘（无代理情况）

    • 场景信息(WAP网站应用)：

      1
      2
      3
      4
      5
      6
      7
      {
        "h5_info": //h5支付固定传"h5_info"
      	 { "type": "", //场景类型
      	   "wap_url": "",//WAP网站URL地址
             "wap_name": "" //WAP 网站名
           }
      }

    • 通知地址：接收微信支付异步通知回调地址notify_url

  6. 统一下单接口返回支付相关参数（支付跳转url：meb_url）给商户后台

  7. 通过mweb_url调起微信支付中间页

  8. 中间页进行H5权限的校验，安全性检查

  9. 微信支付系统核验请求后提示输入支付密码

  10. 微信支付系统验证后返回支付结果后跳转回h5页面并异步通知网站支付结果，网站及时更新订单信息并在页面显示，更新订单日志

  11. 支付成功，用户收到支付凭证，商店后台收到支付成功通知

查看评论