如何在Flutter应用中集成PayPal JS SDK及Apple Pay、Venmo等支付方式？

1. 修复InAppWebView的JS交互问题 #

你的问题大概率出在JS代码的加载时机或事件绑定逻辑上，可以尝试以下优化：

• 确保PayPal JS SDK完全初始化后再渲染按钮：在Web页面中监听paypal.Buttons().isReady()状态，确认就绪后再显示按钮，避免点击时SDK未加载完成。
• 封装独立的支付触发函数：在Web页面中定义全局函数，比如：

  window.initiatePayment = async function() {
    const buttons = paypal.Buttons({
      createOrder: (data, actions) => {
        return actions.order.create({
          intent: 'CAPTURE',
          purchase_units: [{ /* 填入你的订单和分账参数 */ }]
        });
      },
      onApprove: (data, actions) => {
        return actions.order.capture().then(details => {
          window.flutter_inappwebview.callHandler('paymentSuccess', details);
        });
      }
    });
    if (buttons.isReady()) {
      buttons.render('#paypal-button-container');
    }
  }
  

  然后在Flutter端，等待WebView加载完成后调用这个函数：

  webViewController.evaluateJavascript(source: "initiatePayment();");
  

• 用Flutter的JavaScriptChannel或callHandler处理支付回调，确保Web端和Flutter端的通信链路正常。

2. 封装PayPal原生移动SDK #

PayPal官方提供了iOS和Android的Native SDK，你可以自行开发Flutter插件封装这些原生能力：

• iOS端：集成PayPal iOS SDK，它原生支持Apple Pay、Venmo和PayPal支付，订单创建和分账逻辑可直接对接你现有的REST API流程。
• Android端：集成PayPal Android SDK，支持Venmo、PayPal和银行卡支付。
• 封装完成后，Flutter端可直接调用原生方法触发支付，彻底避开WebView的JS兼容性问题，同时满足分账需求。

3. 拆分支付方式分别集成 #

针对不同支付方式用专门的Flutter插件或REST API单独处理：

• Apple Pay：使用Flutter的apple_pay插件收集用户支付信息并获取支付token，随后调用PayPal REST API的/v2/checkout/orders接口创建订单，将Apple Pay的token作为支付方式传入，完成后添加分账参数。
• Venmo：通过PayPal REST API创建订单时，指定payment_method_preference: 'UNRESTRICTED'并设置payment_method_types: ['venmo']，生成支付链接后用Flutter打开系统浏览器或WebView加载该链接，用户完成支付后，通过Webhook或轮询订单状态获取结果，再执行分账。
• 银行卡支付：使用PayPal REST API的/v2/vault/payment-tokens接口存储银行卡信息（需注意PCI合规），或者直接在创建订单时传入银行卡参数，结合Flutter表单收集信息（建议用PayPal的Hosted Fields嵌入WebView，避免直接处理敏感数据）。

4. 评估合规的聚合支付服务商 #

如果以上方案开发成本较高，可以寻找支持以下特性的聚合支付服务商：

• 同时覆盖PayPal、Apple Pay、Venmo和银行卡支付
• 支持无需重复付费的分账功能
• 提供Flutter SDK或易于封装的原生接口

内容的提问来源于stack exchange，提问作者Sahil Totala