前端使用支付宝和微信进行移动支付

最新推荐文章于 2024-09-26 11:13:47 发布

Dwyer-D

最新推荐文章于 2024-09-26 11:13:47 发布

阅读量1.1k

点赞数

分类专栏： web 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_36243479/article/details/108982342

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端移动支付（微信、支付宝）

微信支付

微信移动端支付分为两种：在微信浏览器内支付、在其他浏览器支付；

微信浏览器内支付（JSAPI）：

在开始使用微信支付之前需要明确一个变量 trade_type ，这个变量有三个值：
NATIVE:扫码支付使用；
JSAPI:微信内置浏览器唤起微信支付使用；
MWEB:非微信浏览器且非支付宝内置浏览器唤起微信支付使用；

然后判断当前浏览器是不是微信浏览器（在支付宝内不能唤起微信支付），具体判断逻辑如下：

isWechat = () => {
  const userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  }
  return false;
};

确定是微信浏览器后可以使用如下JSAPI的方式调用统一预支付接口进行唤起：

wechatMobilePay = data => {
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      {
        appId: data.appid, // 公众号名称，由商户传入
        timeStamp: data.timestamp, // 时间戳，自1970年以来的秒数
        nonceStr: data.nonce_str, // 随机串
        package: `prepay_id=${data.prepay_id}`,
        signType: 'MD5', // 微信签名方式：
        paySign: data.sign, // 微信签名
      },
      function(res) {
        if (res.err_msg == 'get_brand_wcpay_request:ok') {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          // TODO add query after payed
        }
      }
    );
  };
  
if (typeof WeixinJSBridge === 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener(
                    'WeixinJSBridgeReady',
                    this.wechatMobilePay(res),
                    false
                  );
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.wechatMobilePay(res));
                  document.attachEvent('onWeixinJSBridgeReady', this.wechatMobilePay(res));
                }
              } else {
                this.wechatMobilePay(res);
              }

参考官方文档：微信内H5调起支付
*：此时调用预支付接口的 trade_type 应该是JSAPI，如果使用NATIVE会出现 支付场景非法 的错误信息，且无法唤起微信支付；

非微信浏览器支付（H5支付）：

首先确保此浏览器非支付宝内置浏览器，此时需要调用统一下单接口，借助于后端发起下单请求，需要注意的是 trade_type 应该是MWEB；
同时需要配置一个名为 mweb_url 的url，以唤起微信支付中间页，中间页将进行H5权限校验和安全检查；

参考官方文档：H5支付

支付宝支付

支付宝支付必须在非微信浏览器内进行，随后需要调用API 手机网站支付接口 alipay.trade.wap.pay，前端通过Form表单的形式进行请求，如果手机安装有支付宝会自动唤起，如果手机未安装支付宝需要进行友好交互提示。

网站支付时需要执行接口返回的部分代码：

const divForm = document.getElementsByTagName('divform');
        if (divForm.length) {
          document.body.removeChild(divForm[0]);
        }
        const div = document.createElement('divform');
        div.innerHTML = res; // res里的data就是接口返回的form 表单字符串
        document.body.appendChild(div);
        document.forms[0].setAttribute('target', ''); // 新开窗口跳转
        document.forms[0].submit();

*：注意区分后台下单时接口的不同，PC端使用 alipay.trade.page.pay ，移动端使用 alipay.trade.wap.pay。