H5调用支付宝、微信支付

最新推荐文章于 2025-06-17 10:58:31 发布

AS、SD

最新推荐文章于 2025-06-17 10:58:31 发布

阅读量892

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE js 文章标签：微信 js vue

本文链接：https://blog.csdn.net/qq_42988102/article/details/120672640

VUE 同时被 2 个专栏收录

26 篇文章

订阅专栏

20 篇文章

订阅专栏

本文介绍了如何在H5环境中集成支付宝和微信支付的调用流程。通过JavaScript调用alipay接口，当接口返回form表单时，动态创建并提交表单以启动支付宝支付。对于微信支付，利用WeixinJSBridge.invoke方法，传递必要的支付参数，成功回调中判断支付状态并跳转到相应页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5支付宝支付调用

alipay({type: this.type, orderCode: this.orderCode}).then(res => {
//接口返回form表单
  // 调起阿里支付
    if (res.flag == 1) {
      const div = document.createElement('div');
      div.innerHTML = res.data;
      document.body.appendChild(div);
      document.forms[0].submit()
    } else {
      // 支付错误 跳转到订单列表页面
      this.toOrderList();
    }
  })

H5微信调用

WeixinJSBridge.invoke(
  'getBrandWCPayRequest', {
    "appId": params.appId,     //公众号名称，由商户传入
    "timeStamp": params.timeStamp,         //时间戳，自1970年以来的秒数
    "nonceStr": params.nonceStr, //随机串
    "package": params.package,
    "signType": params.signType,         //微信签名方式：
    "paySign": params.paySign //微信签名
  },
  function (res) {
    // 使用以下方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
    if (res.err_msg == "get_brand_wcpay_request:ok") {
      that.toPaySuccess()
    }
  }
);