微信和支付宝唤起支付逻辑H5页面唤起微信支付有两种方法：调用微信浏览器提供的内置接口WeixinJSBridge 引

H5页面唤起微信支付

有两种方法：

调用微信浏览器提供的内置接口WeixinJSBridge
引入微信jssdk，使用wx.chooseWXPay方法，需要先通过config接口注入权限验证配置。

在H5页面中唤起微信支付，通常可以通过以下步骤实现：这里是第二种方法示例，

确保已经申请了微信支付商户号，并且完成了相应的配置和认证。
在H5页面中引入微信支付的JS文件。例如，在页面的<head>标签内加入以下代码：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在H5页面加载完成后，初始化微信JS-SDK。你需要使用自己的APPID和商户号替换示例中的"YOUR_APPID"和"YOUR_MCHID"。同时，根据实际情况填写其他参数，如随机字符串、时间戳等。示例代码如下：

// 初始化微信JS-SDK
wx.config({
  debug: false, // 开启调试模式
  appId: 'YOUR_APPID', // 自己的APPID
  timestamp: '', // 时间戳
  nonceStr: '', // 随机字符串
  signature: '', // 签名
  jsApiList: ['chooseWXPay'] // 需要使用的JS接口列表
});

请注意，以上示例代码中的时间戳、随机字符串和签名需要根据实际情况进行生成和填写。是通过调用自己的服务器接口来获取这些参数。

在微信JS-SDK初始化完成后，通过wx.ready方法来执行支付操作。示例代码如下：


wx.ready(function() {
  // 在这里编写触发微信支付的代码
  // 获取预支付订单参数
  var prepayData = {
    appId: 'YOUR_APPID', // 自己的APPID
    timeStamp: '', // 时间戳
    nonceStr: '', // 随机字符串
    package: '', // 预支付订单号
    signType: 'MD5', // 签名类型
    paySign: '' // 签名
  };

  // 调用微信支付API
  wx.chooseWXPay({
    timestamp: prepayData.timeStamp,
    nonceStr: prepayData.nonceStr,
    package: prepayData.package,
    signType: prepayData.signType,
    paySign: prepayData.paySign,
    success: function(res) {
      // 支付成功后的操作
      console.log('支付成功');
    },
    cancel: function(res) {
      // 用户取消支付的操作
      console.log('支付取消');
    },
    fail: function(res) {
      // 支付失败的操作
      console.log('支付失败');
    }
  });
});


5. 上述代码中的预支付订单参数需要根据实际情况进行获取和填写。你可以通过调用自己的服务器接口来获取预支付订单信息，并进行签名等处理。

6. 最后，在微信中打开H5页面，触发支付操作，即可唤起微信支付界面。

H5唤起支付宝

前端这块工作更简单，后台会返回给前端一个form表单，我们要做的就是把这个表单进行提交即可。

代码示例：

   // 支付宝
    this.accountPay(null, (data) => {
        const divEl = document.createElement('divform');
        divEl.innerHTML = data.payData;
        document.body.appendChild(divEl);
        document.forms[0].submit();
    });