こんにちは。今回は、FlutterFlowでのStripeでのクレジットカード決済機能の実装方法についてお話ししたいと思います。
アプリやウェブサイトの開発者にとって、安全で使いやすい決済システムは欠かせない要素ですよね。そこで、FlutterFlowの簡単な操作性とStripeの信頼性を活かして、スムーズな支払い処理を実現する方法をご紹介します。
プログラミングの知識がなくても大丈夫です。初心者の方でも追いやすい手順で、クレジットカード決済機能を追加することができます。
そもそもFlutterFlow（フラッターフロー）とは？
FlutterFlowとは、クロスプラットフォームアプリケーション開発フレームワークであるFlutterを利用して、ビジュアルなツールを用いてアプリケーションを作成するためのツールです。コードを書かずに、直感的なドラッグアンドドロップのインターフェースを通じてアプリケーションの設計と開発ができます。
他のノーコードツールと比較するとやや難易度が高いですが、その分ノーコードとは思えない高品質なアプリを開発できます。
iOS／Andoridのネイティブアプリ、およびWebアプリを同時に開発できるのも魅力的なポイントですね。
Stripe（ストライプ）とは？
Stripeとは、オンライン決済サービスの一つで、非常に便利かつ簡単に組み込みが可能な特徴を持っています。
FlutterFlowではStripeの決済に対応しており、Stripeを使用することでクレジットカードでの決済のみならず、pple PayやGoogle Payなどの支払い方法も利用することができます。
FlutterFlowでのStripe（ストライプ）決済の実装方法
今回は、以下のような商品を選択して購入する簡単なアプリの例で説明していきたいと思います。
まずはstripeのアカウントを取得
まだstripeアカウントがない方はまずはstripeのアカウントにいき、https://stripe.com/jp アカウントを取得しましょう。
stripeのAPIキーの取得
FlutterFlow側ではstripeのAPIキーを設定する必要があるため、stripe側でAPIキーを取得します。
まずはテスト用でいいので、テストモードにしてDevelopersのAPI KeysのところからPublishable keyとSecret keyを取得しましょう。
FlutterFlow側のStripe設定を有効にしAPIキーを登録
以下のスクショのようにFlutterFlowの設定のStripeをEnableにします。
今回はテスト用なのでIs ProductionはOFFのままでOKです。
そしてTest CretdentialsのPublishablesとSecretのKeyに、先ほど取得したKeyをコピペしましょう。
Merchant Display Nameはとりあえず適当な名前でOKです。Merchant Country Code はJPとしておきましょう。
カート機能や決済ボタンのUIの実装
いよいよカート機能や決済ボタンのUIを作成していきます。
ここでは細かい解説は省きますが、こんな感じで作ってみました。お好きなUIで作り込んでみてください。
FlutterFlowはテンプレートも多数用意されてるので簡単に作れるのが嬉しいですよね。
ECサイトのUIも含めて知りたい方は、以下記事・動画も参考にしてみてください。
ノーコードFlutterFlowでカート付きECアプリを作ってみよう！の記事はこちら
決済ボタンにstripeのアクションを設定する。
いよいよ、決済ボタンにstripeのアクションを定義していきます。
まず以下スクショのように、アクションからStripe Paymentを選択します。
Amountには価格を設定します。Currency CodeはJPYですね。
あとはお客さんのメールアドレスや表示名を設定します。
また、Allow Google PayやAllow Apple PayをONにすると、Google PayやApple Payも利用することができます。すごいですよね。
ただApple Pay、Google Payを利用するには別途設定が必要です。詳細は以下をご覧ください。
https://docs.flutterflow.io/settings-and-integrations/in-app-purchases-and-subscriptions/stripe
FlutterFlowのstripe（ストライプ）決済機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。