Flutter电商App中如何获取PayPal用户选择的收货地址？

核心思路是通过Flutter WebView的JavaScript通道实现前端JS与Flutter原生代码的通信，将PayPal JS SDK中获取到的收货地址数据传递到Flutter端处理。

1. 配置Flutter WebView的JavaScript通道 #

在WebView初始化时添加自定义JavaScript通道，用于接收JS传来的地址数据：

import 'dart:convert';
import 'package:webview_flutter/webview_flutter.dart';

WebView(
  initialUrl: Uri.dataFromString(payPalHtml, mimeType: 'text/html').toString(),
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: {
    JavascriptChannel(
      name: 'paypalAddressChannel',
      onMessageReceived: (JavascriptMessage message) {
        // 解析JS传递的地址JSON数据
        final Map<String, dynamic> addressData = jsonDecode(message.message);
        
        // 这里处理地址数据，比如计算美国地区税费
        final state = addressData['admin_area_1'];
        final postalCode = addressData['postal_code'];
        // 调用税费计算逻辑...
        
        print('用户最终选择的收货地址：${addressData['address_line_1']}, ${state}, ${postalCode}');
      },
    ),
  },
)

2. 修改PayPal JS SDK的onApprove逻辑 #

在嵌入WebView的HTML/JS代码中，修改onApprove方法，从订单详情中提取收货地址并通过通道发送到Flutter：

paypal.Buttons({
  createOrder: function(data, actions) {
    // 原有的创建订单逻辑保持不变
    return actions.order.create({
      purchase_units: [{
        amount: {
          value: '19.99' // 初始金额，后续可根据税费调整
        }
      }]
    });
  },
  onApprove: function(data, actions) {
    // 获取完整订单详情，提取收货地址
    return actions.order.get().then(function(orderDetails) {
      // 提取用户修改后的收货地址
      const shippingAddr = orderDetails.purchase_units[0].shipping.address;
      
      // 将地址转为JSON字符串，通过通道发送到Flutter
      window.paypalAddressChannel.postMessage(JSON.stringify(shippingAddr));
      
      // 若需先调整税费再完成支付，可在此暂停，等待Flutter端更新订单金额后再执行capture
      // 否则保留原有支付确认逻辑
      return actions.order.capture().then(function(details) {
        // 支付成功后的前端提示
        alert('支付完成，感谢您的购买');
      });
    });
  }
}).render('#paypal-button-container');

3. 税费调整的安全处理（可选） #

如果需要根据用户地址重新计算税费并更新订单金额，禁止前端直接修改金额（存在安全风险），需按以下流程操作：

1. Flutter端拿到地址后，调用后端接口计算税费
2. 后端调用PayPal订单更新API，修改订单金额
3. 后端返回确认后，Flutter通过WebView执行JS代码触发actions.order.capture()完成支付

内容的提问来源于stack exchange，提问作者Bani Akram