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