Flutter Web集成Stripe：如何传递customer_email参数？

在Flutter Web中集成Stripe订阅页面时，尝试通过redirectToCheckout传递customer_email参数导致崩溃，报错提示该参数不被接受，但Stripe API文档显示支持该选项。

代码实现 #

@JS()
library stripe;

import 'package:flutter/material.dart';
import 'package:flutter_stripe_demo/constants.dart';
import 'package:js/js.dart';

void redirectToCheckout(BuildContext _) async {
  final stripe = Stripe(apiKey);
  stripe.redirectToCheckout(CheckoutOptions(
    lineItems: [
      LineItem(price: nikesPriceId, quantity: 1),
    ],
    customer_email: "test@gmail.com",
    mode: 'subscription',
    successUrl: 'http://localhost:8080/#/success',
    cancelUrl: 'http://localhost:8080/#/cancel',
  ));
}

@JS()
class Stripe {
  external Stripe(String key);

  external redirectToCheckout(CheckoutOptions options);
}

@JS()
@anonymous
class CheckoutOptions {
  external List<LineItem> get lineItems;

  external String get mode;

  external String get successUrl;

  external String get cancelUrl;

  external String get customer_email;

  external factory CheckoutOptions({
    List<LineItem> lineItems,
    String mode,
    String successUrl,
    String cancelUrl,
    String sessionId,
    String customer_email,
  });
}

@JS()
@anonymous
class LineItem {
  external String get price;

  external int get quantity;

  external factory LineItem({String price, int quantity});
}

报错信息 #

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:51110/k2ADZWot2J4=
Flutter Web Bootstrap: Auto
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9104?uri=http://127.0.0.1:51110/k2ADZWot2J4=
You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.
IntegrationError: Invalid stripe.redirectToCheckout parameter: customer_email is not an accepted parameter.

问题出在你使用的是旧版Stripe Checkout的redirectToCheckout直接传参模式，这种模式不支持customer_email参数。正确做法是通过创建Checkout Session来传递该参数，步骤如下：

1. 后端创建Checkout Session
   在后端服务器调用Stripe API创建Session时传入customer_email，示例（Node.js）：

   const stripe = require('stripe')('你的密钥');
   
   const session = await stripe.checkout.sessions.create({
     payment_method_types: ['card'],
     line_items: [
       {
         price: '你的价格ID',
         quantity: 1,
       },
     ],
     mode: 'subscription',
     customer_email: 'test@gmail.com', // 在此处传入邮箱
     success_url: 'http://localhost:8080/#/success',
     cancel_url: 'http://localhost:8080/#/cancel',
   });
   

   将返回的session.id传递给前端。

2. 前端使用Session ID跳转
   修改Flutter代码，不再直接传lineItems和customer_email，改用sessionId：

   void redirectToCheckout(BuildContext _) async {
     // 调用后端接口获取sessionId
     final String sessionId = await fetchSessionIdFromBackend();
     final stripe = Stripe(apiKey);
     stripe.redirectToCheckout(CheckoutOptions(
       sessionId: sessionId,
       successUrl: 'http://localhost:8080/#/success',
       cancelUrl: 'http://localhost:8080/#/cancel',
     ));
   }
   
   // 更新CheckoutOptions类，移除customer_email相关定义
   @JS()
   @anonymous
   class CheckoutOptions {
     external String get sessionId;
     external String get successUrl;
     external String get cancelUrl;
   
     external factory CheckoutOptions({
       String sessionId,
       String successUrl,
       String cancelUrl,
     });
   }
   

3. 原因说明
   Stripe的redirectToCheckout有两种使用模式：

   • 直接传lineItems：属于简化模式，仅支持有限参数，不包含customer_email。
   • 传入sessionId：属于完整模式，所有在Session创建时设置的参数都会生效，这也是Stripe推荐的订阅场景集成方式。

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