【実践ガイド】Flutter×Stripeでスムーズな決済システムを簡単に導入する方法

flutter pub add flutter_stripe
flutter pub add http

Copy

import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:flutter/material.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Stripe.publishableKey = 'pk_test_XXXXXXXXXXXX'; // 公開キー
  runApp(MyApp());
}

Copy

const stripe = require('stripe')('sk_test_XXXXXXXXXXXX'); // 秘密キー
const express = require('express');
const app = express();
app.use(express.json());
app.post('/create-payment-intent', async (req, res) => {
    const paymentIntent = await stripe.paymentIntents.create({
        amount: 1000, // 金額
        currency: 'jpy', // 通貨
        payment_method_types: ['card'],
    });
    res.json({ clientSecret: paymentIntent.client_secret });
});

app.listen(3000, () => console.log("Server running on port 3000"));

Copy

import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class PaymentScreen extends StatefulWidget {
  @override
  PaymentScreenState createState() => PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  Map<String, dynamic>? paymentIntent;
  Future<void> createPayment(int amount) async {
    try {
      // 1. サーバーからPaymentIntentを取得
      final response = await http.post(
        Uri.parse('https://your-server.com/create-payment-intent'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({'amount': amount}),
     );
      final jsonResponse = json.decode(response.body);
      paymentIntent = jsonResponse;
      // 2. クライアント側でカード情報を入力
      await Stripe.instance.initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
         paymentIntentClientSecret: paymentIntent!['clientSecret'],
          merchantDisplayName: 'MyApp',
       ),
      );
      // 3. 決済を実行
      await Stripe.instance.presentPaymentSheet();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('決済に成功しました')),
      );
    } catch (error) {
      print('決済に失敗しました: $error');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('決済に失敗しました')),
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('カード決済')),
    body: Center(
      child: ElevatedButton(
          onPressed: createPayment,
          child: Text('決済する'),
        ),
      ),
    );
  }
}

Copy

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

class CardPaymentScreen extends StatefulWidget {
  @override
  CardPaymentScreenState createState() => CardPaymentScreenState();
}

class _CardPaymentScreenState extends State<CardPaymentScreen> {
 Map<String, dynamic>? paymentIntentData; // PaymentIntentのデータを格納する変数
  // サーバーにリクエストを送信し、PaymentIntentを作成する関数
  Future<void> createPaymentIntent() async {
    try {
      final response = await http.post(
        Uri.parse('http://your-backend.com/create-payment-intent'), // バックエンドのエンドポイント
        body: jsonEncode({'amount': 1000}), // 決済金額
        headers: {'Content-Type': 'application/json'}, // JSONリクエストを送信
    );
      paymentIntentData = jsonDecode(response.body); // レスポンスからPaymentIntentの情報を取得
    } catch (e) {
      print("Error creating payment intent: $e"); // エラーハンドリング
    }
  }
  /// ユーザーが入力したカード情報を使用して決済を確定する関数
  Future<void> confirmPayment() async {
    try {
      if (paymentIntentData == null) {
       await createPaymentIntent(); // PaymentIntentがない場合は新しく作成
      }
      // ユーザーの入力したカード情報を使って決済を確定
      await Stripe.instance.confirmPayment(
       paymentIntentClientSecret: paymentIntentData!['clientSecret'], // サーバーから受け取ったクライアントシークレット
        data: PaymentMethodParams.card(
          paymentMethodData: PaymentMethodData(), // カード情報を取得
        ),
      );
      // 決済成功時の処理
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("Payment Successful")), // 成功メッセージを表示
      );
    } catch (e) {
      // 決済失敗時の処理
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("決済に失敗しました: $e")), // エラーメッセージを表示
      );
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(title: Text("カード決済")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // カード情報を入力するフォーム
            CardFormField(
              controller: CardFormEditController(), // フォームのコントローラー
              style: CardFormStyle(
               backgroundColor: Colors.white,
                borderColor: Colors.grey,
                borderRadius: 8,
                cursorColor: Colors.black,
              ),
           ),
           SizedBox(height: 20),
            // 決済ボタン
            ElevatedButton(
             onPressed: confirmPayment, // ボタンが押されたら決済を実行
              child: Text("決済する"),
            ),
          ],
        ),
      ),
    );
  }
}

Copy

const paymentIntent = await stripe.paymentIntents.create({
    amount: 1000,
    currency: 'jpy',
    payment_method_types: ['card'],
    capture_method: 'manual',  // オーソリのみ
});
capture_method: 'manual' を指定すると、あとで手動で決済を確定できます。

Copy