返回

微信公众号H5支付及获取Code（前端部分）

前端

微信公众号H5支付

在微信公众号中，H5支付是一种常见的支付方式，它允许用户通过微信浏览器直接在H5页面上完成支付。实现微信公众号H5支付需要以下步骤：

获取Code

获取Code是微信公众号H5支付的第一步。Code是一个由微信服务器颁发的临时票据，用于获取用户的授权信息。获取Code的流程如下：

  1. 创建一个微信公众号应用，并获得其AppID和AppSecret。
  2. 在需要支付的页面中，使用以下URL生成一个授权链接：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

其中：

  • APPID：你的微信公众号的AppID
  • REDIRECT_URI：用户授权后跳转的页面地址
  • STATE：一个随机字符串，用于防止CSRF攻击
  1. 将授权链接放入<a>标签中，并在点击事件中监听Code的变化。例如：
<a href="授权链接" id="wechat-oauth-link">微信授权</a>

<script>
  document.getElementById('wechat-oauth-link').addEventListener('click', function(e) {
    // 处理Code获取
  });
</script>

前端支付流程

获取Code后，即可进行前端支付流程：

  1. 使用Code向微信服务器发起支付请求，获取预支付参数（prepay_id）。
  2. 使用预支付参数调用微信支付API，生成支付按钮。
  3. 用户点击支付按钮，即可完成支付。

示例代码

以下是一段示例代码，演示了如何获取Code和使用Code发起支付请求：

// 获取Code
const code = new URLSearchParams(window.location.search).get('code');

// 向微信服务器发起支付请求
const params = {
  appid: 'APPID',
  code: code
};
fetch('https://api.weixin.qq.com/sns/oauth2/access_token', {
  method: 'POST',
  body: JSON.stringify(params)
})
.then(res => res.json())
.then(data => {
  // 获取预支付参数
  const prepay_id = data.prepay_id;

  // 使用预支付参数调用微信支付API
  const params = {
    prepay_id: prepay_id
  };
  fetch('https://api.weixin.qq.com/pay/unifiedorder', {
    method: 'POST',
    body: JSON.stringify(params)
  })
  .then(res => res.json())
  .then(data => {
    // 生成支付按钮
    const button = document.createElement('button');
    button.setAttribute('type', 'button');
    button.setAttribute('class', 'wechat-pay-button');
    button.addEventListener('click', function() {
      // 发起支付
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        data,
        function(res) {
          // 处理支付结果
        }
      );
    });
    document.body.appendChild(button);
  });
});

结语

通过遵循本文中的步骤，开发者可以轻松地在微信公众号H5页面中实现支付功能。本指南提供了详细的说明和示例代码，帮助开发者快速上手。