快应用接入微信H5网页支付实战指南

快应用接入微信H5网页支付实战指南

随着移动应用的快速发展，快应用作为一种轻量级的应用形态，以其无需安装、即点即用的特点，受到了越来越多开发者和用户的青睐。在快应用中接入微信支付，尤其是H5网页支付，成为了很多开发者必须面对的问题。本文将详细介绍快应用接入微信H5网页支付的步骤和注意事项，帮助开发者快速上手。

一、前期准备

1. 注册微信开放平台账号

• 访问微信开放平台，注册并登录你的账号。
• 在开放平台中，新注册申请一个H5网站，并完成相关信息的填写和验证。

2. 配置商户号和支付授权目录

• 确保你的商户号已经注册并通过微信支付的审核。
• 在商户号中配置支付授权目录，确保快应用中的支付页面URL被包含在授权目录中。

二、服务端接入

1. 生成支付订单

• 用户在快应用中发起支付请求，快应用将请求发送到你的服务端。
• 服务端接收到请求后，根据业务逻辑生成支付订单，并调用微信支付的统一下单API。
• 微信支付统一下单API会返回一个预支付交易会话标识（prepay_id）和一个mweb_url（H5支付跳转链接）。

2. 返回支付参数

• 服务端将prepay_id和mweb_url等支付参数加密后返回给快应用。

三、快应用端配置

1. 声明微信支付功能

• 在快应用的manifest.json文件中声明wxpay功能，并配置相关参数。

  {
    "name": "service.wxpay",
    "params": {
      "package": "com.your.package.name",
      "url": "https://your.h5.payment.page"
    }
  }

2. 创建中间页

• 由于微信H5支付需要通过中间页跳转拉起支付界面，因此需要在快应用中创建一个中间页。

• 中间页在加载完成后，从页面的GET参数中解析出mweb_url，并自动向该URL跳转。

  // 中间页逻辑
  var payUrl = decodeURIComponent(getQueryString('mweb_url'));
  if (payUrl !== 'null') {
    window.location.replace(payUrl);
  }
  function getQueryString(name) {
    // 解析URL中的GET参数
  }

四、发起支付

1. 调用微信支付接口

• 在快应用中，使用wxpay.pay方法调用微信支付接口。

  wxpay.pay({
    prepayid: 'your_prepay_id', // 预支付交易会话标识
    extra: {
      mweb_url: 'your_mweb_url', // H5支付跳转链接
      // 其他自定义参数
    },
    fail: function(data, code) {
      console.log('支付失败, code=' + code);
    },
    cancel: function(data) {
      console.log('支付取消');
    },
    success: function(data) {
      console.log('支付成功');
    }
  });

2. 处理支付结果

• 支付完成后，微信支付会向你的服务器发送支付结果通知。
• 你的服务器需要接收并处理这些通知，以更新订单状态并返回给用户相应的支付结果。

五、常见问题处理

1. 支付请求被拒绝（错误码2001）

• 检查微信后台或manifest.json中的签名配置是否正确。
• 检查订单信息中的sign字段是否生成正确。
• 确保android app的后台审核流程已通过。

2. 没有拉起微信支付界面

• 检查中间页自动向mweb_url跳转的逻辑是否生效。
• 确保中间页的权限设置正确，除了js执行权限外，其他权限如domStorage等未授予可能导致问题。

3. 支付结果未同步

• 检查服务器是否成功接收并