flutterはそれ一つでwebアプリ、androidアプリ、iOSアプリが作れてしまう大変便利なフレームワークですが、収益化する際に必要な決済サービスとの連携方法の情報が少ないと感じました。flutter android + stripeやflutter ios + stripeに関しては、説明しているサイトがあるのですが、flutter web ＋ stripeに関してはは、ほとんど見つけることができませんでした。そこで記事にすることにしました。

まずはサンプルプログラムの動きになります。

サンプルプログラムの動作

次に大まかな処理の説明です。

処理イメージ

※決済情報をアプリ側で保持したい場合、cloud functionにwebhookを作成してstripeからのイベント通知を受信します。

サンプルプログラム

index.ts

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";
import Stripe from "stripe";
admin.initializeApp();

export const createCheckoutSessionSample = functions.region("asia-northeast1").https.onCall(async (data) => {
  const stripe = new Stripe("シークレットキー", {apiVersion: "2022-11-15"});
  const customer = await stripe.customers.create();
  const session = await stripe.checkout.sessions.create({
    customer: customer.id,
    payment_method_types: ["card", "customer_balance"],
    payment_method_options: {
      customer_balance: {
        funding_type: "bank_transfer",
        bank_transfer: {
          type: "jp_bank_transfer",
        },
      },
    },
    line_items: [{
      price: "プライスID",
      quantity: 1,
    }],
    mode: "payment",
    success_url: "http://localhost:50505/#/success",
    cancel_url: "http://localhost:50505/#/error",
  });
  return session.id;
});

checkout_session作成処理になります。
cloudfunctionへデプロイします。
シークレットキーはstripeでアカウント登録した際に発行されます。
プライスIDはstripeで商品登録した際に発行されます。

index.ts