如何通过GraphQL创建Shopify货到付款订单以避开Webview

1. 抓包分析Webview的GraphQL请求 #

官方文档没标注的Mutation，大概率藏在Webview的实际结账请求里。用Charles、Fiddler这类工具抓Webview下单时的网络请求，过滤GraphQL接口，找到COD场景下调用的Mutation名称和参数结构。比如你可能会发现Webview调用了通用的createOrder Mutation，只是参数里paymentMethod传了"cash_on_delivery"，直接把这个请求逻辑搬到Flutter里用graphql_flutter包调用即可。

示例代码（基于抓包得到的Mutation结构）：

final createCodOrderMutation = gql('''
  mutation CreateOrder(\$input: CreateOrderInput!) {
    createOrder(input: \$input) {
      id
      status
      totalAmount
    }
  }
''');

// 构造请求参数，核心是指定支付方式为COD
final variables = {
  'input': {
    'cartId': 'user-active-cart-id',
    'shippingAddress': {
      'line1': 'XX街道XX号',
      'city': 'XX市',
      'postalCode': '123456',
      'country': 'CN'
    },
    'billingAddress': {'sameAsShipping': true}, // 或单独传完整地址结构
    'paymentMethod': 'cash_on_delivery',
    // 补充其他必填参数：如优惠券ID、订单备注等
  }
};

final result = await graphQLClient.mutate(MutationOptions(
  document: createCodOrderMutation,
  variables: variables,
));

if (result.hasException) {
  // 处理错误：参数缺失、库存不足、接口异常等
} else {
  final orderData = result.data?['createOrder'];
  // 跳转订单详情页或提示用户下单成功
}

2. 切换到REST API（如果后端支持） #

不少电商后端会同时提供REST接口，查一下有没有创建订单的REST端点，比如POST /v1/orders，请求体里指定payment_method: "cod"，用Flutter的dio或http包直接调用，比GraphQL更简单直接。

3. 自建中间层适配（权限允许的话） #

如果原后端确实没有COD对应的GraphQL入口，自己搭个轻量的Node.js/Go中间层：

• 接收Flutter的订单请求，参数包含购物车ID、收货地址等必要信息
• 中间层内部先调用后端的基础订单接口创建订单，再调用支付方式更新接口将订单改为COD状态
• 把处理结果返回给Flutter

这种方法适合无法修改原后端的场景，虽多了一层，但能彻底避开Webview。

4. 要求后端团队补充专用Mutation #

如果是内部项目，直接找后端开发提需求，添加一个专门的createCashOnDeliveryOrder Mutation，参数包含购物车ID、收货地址、账单地址等必填字段，返回订单ID和状态。这是最规范、最易维护的方案，后续也不会因为抓包的接口变更出现问题。

内容的提问来源于stack exchange，提问作者Koutaiba Altellawi