从零到一搞定APP支付功能的那些坑与解决方案

为什么我要对比这几个APP支付方案

最近在做一个移动端的项目，涉及到支付功能。说实话，我之前对这个领域的了解不是很深入，这次算是好好研究了一下。市面上有几种主流的支付方案，比如微信支付、支付宝支付、Apple Pay等。每个方案都有自己的特点和适用场景，所以我想通过这篇文章分享一下我的对比心得。

谁更灵活？谁更省事？

首先，我们来看一下这几个方案的实际使用情况。微信支付和支付宝支付在国内非常普及，基本上是每个应用都会集成的。而Apple Pay则主要面向iOS用户，虽然方便但覆盖范围有限。

微信支付：简单易用，但要注意的地方也不少

微信支付的整体集成过程相对简单，文档也还算详细。下面是一个简单的支付流程示例：

const wxPay = async (order) => {
  const res = await fetch('https://jztheme.com/api/wxpay', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(order)
  });

  const data = await res.json();
  if (data.return_code === 'SUCCESS') {
    // 调起微信支付
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": data.appId,
        "timeStamp": data.timeStamp,
        "nonceStr": data.nonceStr,
        "package": data.package,
        "signType": data.signType,
        "paySign": data.paySign
      },
      function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          // 支付成功
          console.log('支付成功');
        } else {
          // 支付失败
          console.log('支付失败', res);
        }
      }
    );
  } else {
    console.log('调起支付失败', data);
  }
}

这个方案的优点在于集成简单，用户基数大，支付体验也不错。但是也有一些坑需要注意：

• 签名问题：一定要注意生成签名的过程，否则很容易出错。
• 回调处理：支付结果的回调处理要小心，有时候可能会因为网络问题导致回调不及时。

支付宝支付：功能强大，但配置复杂

支付宝支付的集成相对复杂一些，需要更多的配置。下面是支付宝支付的一个示例代码：

const alipay = async (order) => {
  const res = await fetch('https://jztheme.com/api/alipay', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(order)
  });

  const data = await res.json();
  if (data.code === '10000') {
    // 调起支付宝支付
    AlipayJSBridge.call('tradePay', {
      tradeNO: data.trade_no
    }, function(result) {
      if (result.resultStatus === '9000') {
        // 支付成功
        console.log('支付成功');
      } else {
        // 支付失败
        console.log('支付失败', result);
      }
    });
  } else {
    console.log('调起支付失败', data);
  }
}

支付宝支付的优点在于功能强大，支持多种支付方式，而且安全性也很高。不过配置起来确实比较繁琐，特别是对于新手来说。

Apple Pay：体验好，但覆盖范围有限

Apple Pay的集成相对来说比较简单，主要是通过Apple提供的API来完成。下面是Apple Pay的一个示例代码：

const applePay = async () => {
  const paymentRequest = {
    countryCode: 'CN',
    currencyCode: 'CNY',
    supportedNetworks: ['visa', 'masterCard'],
    merchantCapabilities: ['supports3DS'],
    lineItems: [{
      label: '商品名称',
      amount: '1.00'
    }]
  };

  const session = new ApplePaySession(1, paymentRequest);
  session.begin();

  session.onvalidatemerchant = (event) => {
    fetch('https://jztheme.com/api/applepay/validate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ validationURL: event.validationURL })
    }).then(response => response.json())
      .then(data => {
        session.completeMerchantValidation(data.validationData);
      });
  };

  session.onpaymentauthorized = (event) => {
    fetch('https://jztheme.com/api/applepay/authorize', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(event.payment)
    }).then(response => response.json())
      .then(data => {
        session.completePayment(ApplePaySession.STATUS_SUCCESS);
      });
  };
}

Apple Pay的支付体验非常好，特别是在iOS设备上。不过由于它只支持特定的设备和系统版本，所以覆盖范围有限。

我的选型逻辑

经过一番折腾，我最终选择了微信支付作为主要的支付方案。原因如下：

• 用户基数大：微信支付在国内的用户基数非常大，几乎人人都有微信账号。
• 集成简单：相比支付宝，微信支付的集成更加简单，文档也更加详细。
• 支付体验好：微信支付的支付流程非常顺畅，用户体验不错。

当然，如果项目需要支持更多类型的支付方式，或者需要更高的安全性，那么支付宝支付也是一个不错的选择。至于Apple Pay，我觉得在iOS应用中可以考虑集成，但不是必须。

以上是我的对比总结，有不同看法欢迎评论区交流

这就是我对这几个APP支付方案的一些对比心得。希望对你有所帮助。如果有更好的建议或者不同的看法，欢迎在评论区交流。