いくつかの異なる Firebase 機能と Stripe を使用すると、独自のサーバー インフラストラクチャを構築せずに、ウェブ アプリで支払いを処理できます。このガイドでは、オープンソースのcloud-functions-strip-sample.web.appサンプルアプリの独自バージョンをカスタマイズしてデプロイする手順を説明します。
始める前に、 Firebase コンソールでプロジェクトを作成し、 Stripeアカウントを設定します。
実装の概要
- Stripeアカウントをセットアップします。
- Firebase コンソールでプロジェクトを作成します。
- プロジェクトの課金を有効にし、
firebase use --addを使用してプロジェクトを使用するように Firebase CLI を設定します。 - サンプル Firestrip アプリのソース コードを入手します。プロジェクトに適切な情報を使用して構成し、アプリに合わせてコードをカスタマイズします。
- アプリをデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを探します。
サンプルアプリのセットアップとデプロイ
- ソースコードを取得します。
- 認証プロバイダーの設定で Google と電子メールのサインインを有効にします。
- Cloud Firestore を有効にします。
- Firebase CLI をまだインストールしていない場合はインストールし、
firebase loginでログインします。 -
firebase use --addでプロジェクトを使用するようにこのサンプルを設定します。 -
cd functions; npm install; cd - Stripe API 秘密キーをCloud Functions 環境構成に追加します。
firebase functions:config:set stripe.secret=<YOUR STRIPE SECRET KEY>/public/javascript/app.jsにStripe 公開可能キーを設定します。const STRIPE_PUBLISHABLE_KEY=<YOUR STRIPE PUBLISHABLE KEY>;firebase deploy使用してプロジェクトをデプロイします。このコマンド:-
publicディレクトリ内のすべてのファイルをホスティングに送信して、Web サイトを利用できるようにします。 -
functionsディレクトリ内のコードを Cloud Functions for Firebase に送信します。 -
firestore.rulesでの構成に従って、Cloud Firestore データベースにセキュリティ ルールを設定します。提供されたルールでは、ユーザーは自分の支払いと支払い方法の読み取りと書き込みのみを許可されます。
-
サンプルアプリをテストする
your-firebase-project-id.web.appで支払いアプリの URL にアクセスし、次の機能が動作することを確認します。
- Google またはメール経由でサインインできます。
- 新しいStripe テスト カードを追加し、カード選択要素で表示できます。
- いずれかのカードを選択してチャージすることができます。
- サインアウトできます。
比較については、 cloud-functions-ストライプ-sample.web.appを参照してください。
ユーザーに効率的なエクスペリエンスを提供するには、支払いページの外観をさらにカスタマイズするか、既存のアプリにプラグインすることができます。
処理された支払いを表示する
支払いページを設定してデプロイしたら、Firebase コンソールをチェックして、ユーザーのリストとその支払い方法および支払いを確認できます。
- Cloud Firestoreに移動します。
- ユーザーのリストを確認し、クレジット カードを追加したり取引を行った場合は、各ユーザーの下にあるユーザーのリストを確認します。
ライブ支払いを受け入れる
ライブにする準備ができたら、テスト キーをライブ キーと交換する必要があります。これらのキーの詳細については、 Stripe のドキュメントを参照してください。
Stripe シークレット構成を更新します。
firebase functions:config:set stripe.secret=<YOUR STRIPE LIVE SECRET KEY>変更を有効にするには、Cloud Functions と Hosting の両方を再デプロイします (
firebase deploy。