如何在Flutter应用中通过Stripe集成MobilePay支付？

核心结论 #

你完全不用单独写Kotlin/Swift原生代码，Stripe Flutter SDK已经封装好了MobilePay的全流程逻辑，之前觉得繁琐是因为没走对Stripe的标准化支付流程。

步骤1：Flutter端配置与初始化 #

确保使用最新版flutter_stripe包，在pubspec.yaml中添加：

dependencies:
  flutter_stripe: ^latest_version

初始化SDK时开启MobilePay支持（Android/iOS的基础配置由SDK自动处理，无需原生代码）：

import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Stripe.instance.initialize(
    publishableKey: '你的Stripe公钥',
    merchantIdentifier: '你的商家标识（Stripe后台配置的名称）',
  );
  runApp(const MyApp());
}

步骤2：触发MobilePay支付流程 #

和卡片支付逻辑一致，先从后端获取PaymentIntent的client secret，再调用SDK启动MobilePay：

// 1. 从Laravel后端获取PaymentIntent的clientSecret
final response = await http.post(
  Uri.parse('https://你的域名/api/create-payment-intent'),
  body: jsonEncode({
    'amount': '1000', // 单位：最小货币单位，比如1000=10DKK
    'currency': 'dkk', // MobilePay默认支持丹麦克朗，按需调整
  }),
  headers: {'Content-Type': 'application/json'},
);
final data = jsonDecode(response.body);
final clientSecret = data['client_secret'];

// 2. 唤起MobilePay APP支付
try {
  await Stripe.instance.presentMobilePay(
    clientSecret: clientSecret,
    merchantName: '你的商城名称',
    orderDetails: '订单号：ORD20240501001', // 可选，展示给用户的订单信息
  );
  
  // 3. 支付成功后通知后端更新状态（或依赖Stripe Webhook自动处理）
  await http.post(
    Uri.parse('https://你的域名/api/confirm-payment'),
    body: jsonEncode({'client_secret': clientSecret}),
    headers: {'Content-Type': 'application/json'},
  );
  
  // 这里处理前端支付成功的UI逻辑
} on StripeException catch (e) {
  // 处理支付失败，比如用户取消、网络错误等
  print('支付失败：${e.error.message}');
}

步骤3：Laravel后端关键配置 #

补充PaymentIntent创建代码 #

创建PaymentIntent时必须指定payment_method_types包含mobilepay：

// Laravel控制器中的创建PaymentIntent方法
public function createPaymentIntent(Request $request)
{
    $stripe = new \Stripe\StripeClient(config('services.stripe.secret'));
    
    $paymentIntent = $stripe->paymentIntents->create([
        'amount' => $request->amount,
        'currency' => $request->currency,
        'payment_method_types' => ['card', 'mobilepay'], // 加入mobilepay
        'metadata' => [
            'order_id' => 'ORD20240501001', // 关联你的订单ID，用于后续回调更新
        ],
    ]);
    
    return response()->json([
        'client_secret' => $paymentIntent->client_secret,
        'payment_intent_id' => $paymentIntent->id,
    ]);
}

配置Stripe Webhook自动更新订单状态 #

在Stripe后台配置Webhook端点（比如https://你的域名/api/stripe/webhook），监听payment_intent.succeeded事件，无需前端主动通知：

// Laravel路由
Route::post('/stripe/webhook', [StripeWebhookController::class, 'handle']);

// StripeWebhookController.php
public function handle(Request $request)
{
    $payload = $request->getContent();
    $sigHeader = $request->header('Stripe-Signature');
    $webhookSecret = config('services.stripe.webhook_secret');

    try {
        $event = \Stripe\Webhook::constructEvent(
            $payload, $sigHeader, $webhookSecret
        );
    } catch(\UnexpectedValueException $e) {
        return response()->json(['error' => '无效请求体'], 400);
    } catch(\Stripe\Exception\SignatureVerificationException $e) {
        return response()->json(['error' => '签名验证失败'], 400);
    }

    // 处理支付成功事件
    if ($event->type === 'payment_intent.succeeded') {
        $paymentIntent = $event->data->object;
        // 通过metadata中的order_id找到对应订单并更新状态
        $order = Order::where('id', $paymentIntent->metadata->order_id)->first();
        if ($order) {
            $order->update(['status' => '已支付']);
        }
    }

    return response()->json(['success' => true]);
}

关键注意事项 #

• 确认Stripe后台已启用MobilePay，且你的商家账号所在区域支持该支付方式（比如欧洲、丹麦等）
• 测试时使用Stripe提供的MobilePay测试环境，不要直接用真实生产环境
• 若前端唤起MobilePay失败，检查Stripe公钥、商家标识是否与后台配置一致，以及设备所在区域是否支持MobilePay

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