【FlutterFlow】Stripeを使った決済機能の実装方法

今回は、Stripeを使ってクレジットカード決済を実装する方法を紹介したいと思います。Stripeは非常に使い勝手が良くて固定費がかかってこないことから大手サービスプロバイダーでも導入されているケースが多くあります。

FlutterFlowでもStripeを非常に導入しやすくなっているので今回、どのように利用するかを紹介できればと思います。

Stripeとは

Stripeは、インターネットビジネスのための決済プラットフォームを提供する企業です。Stripeを利用することで、ウェブサイトやモバイルアプリでクレジットカードやデビットカードをはじめとする様々な決済手段を簡単に導入することができます。以下に、Stripeの主な特徴と利点を紹介します。

主な特徴

1. 多様な決済手段のサポート: クレジットカード、デビットカード、Apple Pay、Google Pay、銀行振込など、世界中の様々な決済手段をサポートしています。
2. 簡単な統合: 開発者向けのAPIと豊富なドキュメントが提供されており、短時間で決済機能を統合することができます。
3. 高いセキュリティ: PCI DSSに準拠しており、セキュリティ基準を満たしています。
4. 柔軟な料金プラン: トランザクションごとの料金設定により、初期コストを抑えて導入できます。

利点

• グローバル対応: 多通貨決済や地域ごとの決済手段をサポートし、グローバルなビジネス展開を支援します。
• 拡張性: サブスクリプションモデルやマーケットプレイスなど、多様なビジネスモデルに対応可能です。
• リアルタイムデータ: トランザクションデータや売上データをリアルタイムで確認できるため、ビジネスの意思決定に役立ちます。

Stripeを利用することで、ビジネスの規模や業種にかかわらず、安全で効率的な決済システムを導入できるため、多くの企業に選ばれています。

Stripe | インターネット向け金融インフラ

Stripe は、あらゆる規模のビジネスに対応したオンライン・対面支払いの処理と金融のソリューションを提供しています。豊富な API とコード不要のツールで、決済の受け付け、入金、財務プロセスの自動化を行うことができます。

stripe.com

ゴールイメージ

こんな感じで商品詳細ページから商品を購入するフローを作成したいと思います。

準備

Stripeのアカウント作成

FlutterFlowでStripeを利用するにあたり、事前にStripeのアカウントを作成する必要があります。Stripeのアカウントを作成し、決済に利用する「公開可能キー」「シークレットキー」を取得してください。

ここでは説明は割愛しますが、以下のページなどをご確認いただいてアカウントの作成を行ってください。

【クレジット決済システム】Stripe（ストライプ）のアカウントを作成する方法

クレジット決済システムStripe（ストライプ）のメリットやアカウント作成方法、初期設定方法をまとめて解説しています。

l-members.media

Firebaseのプラン変更

FirebaseのプランはBlazeプランでないと利用できないのであらかじめBlazeプランにアップデートしておいてください。

実装手順

はい、ではここからは具体的な実装手順を説明します。

FlutterFlow上でのStripeの有効化、および設定

以下のように[設定] > [In App Purchases & Subscriptions]にStripeがあります。[Enable Stripe Payments]をONにしてください。

Stripe PaymentsをEnableに設定し、その後表示されるTest Credentialsなどを入力します。Publishable Key、Secret KeyはStripeの画面で確認してください。

Merchant Country Codeは”JP”としておいてください。
設定が完了するとDeployを押してください。（FirebaseはBlazeプランでないとエラーになります）

数分待てばDeployが完了します。

商品詳細ページ作成

購入処理を行うための商品詳細ページを作成します。

適当ですが、商品を表示して購入ボタンを配置してください。商品のデータベースは以下のようになっていますが、こちらは自由に設定してください。値段だけは必ず含めてください。

購入確認用のコンポーネントを作成

購入確認を行うためのコンポーネントを作成します。購入ボタンを押した際に表示されるポップアップとなります。

今回は、Create Blankから作成します。（いい感じのコンポーネントもあるのでそちらをつかってもOKです）

Page ParameterにproductのDocumentを設定します。

ポップアップ（コンポーネント）は以下のようにしています。

購入アクションを設定

作成したコンポーネント内の「購入する」ボタンにStripeで決済を行うアクションを設定します。
ActionのIntegrations配下に”Stripe Payment”があるのでそれを選択します。

Stripeの決済は以下のように設定します。

２つ目のアクションで決済の結果をデータベースに登録します。テーブルとアクションは以下のように設定しています。

PaymentIDは一つ目のActionの結果を登録しています。他はPage parameterから各値を取得しています。

最後にポップアップを閉じるためにNavigate Backのアクションを設定しています。

購入ボタン押下時のポップアップ表示設定

最後に購入ボタンを押した際に先ほど作成したポップアップを表示する設定を行います。

ポップアップへはproducts Documentを渡します。

はい、これで購入処理が出来るようになったかと思います。

テストに使用する際のクレジットカード情報はこちらに記載のカード番号を使ってください。

Test card numbers

実際に資金を移動することなく、Stripe の実装を検証するには、テストカードを使用します。支払いの成功と拒否、カードエラー、不審請求の請求、銀行認証など、さまざまな国際的なシナリオをテストできます。カード以外の決済手段とリダイレクトをテス...

docs.stripe.com

おまけの設定

購入成功、失敗を受け取って成功時にはデータベースに値を登録してその後、決済成功のアラートダイアログを表示、失敗時には決済失敗のアラートダイアログを表示するともうちょっとイイ感じになります。

以下のように決済終了時にpaymentIDが返却されたかどうかで決済の成功・失敗は判断できます。

最後に

今回はStripeを使ってクレジットカード決済を行う方法を解説しました。シンプルな都度課金のケースで説明をしましたが別で継続課金も解説したいと思います。

それでは。