Firebase による支払い処理

Firebase の機能と Stripe を使用すると、独自のサーバー インフラストラクチャを構築することなく、ウェブアプリで支払いを処理できます。このガイドでは、オープンソースの Firestripe サンプルアプリをカスタマイズして、デプロイする方法について説明します。

始める前に、Firebase コンソールでプロジェクトを作成し、Stripe アカウントを設定してください。

実装の概要

  1. Firebase Hosting を使用して、アプリに必要な Firebase 機能を設定し、アプリをデプロイします。Firebase CLI を使用すると、コマンドラインから Cloud Functions と Firebase Realtime Database を直接有効にし、シェルアプリをデプロイできます。
  2. Firestripe サンプルアプリのソースコードを入手します。プロジェクトに適切な情報を設定し、アプリに合わせてコードをカスタマイズします。
  3. アプリをデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを探します。

アプリの設定とデプロイ

まず、必要なすべての Firebase 機能を含み、Firebase プロジェクトに関連付けられているシェルアプリを使用します。シェルアプリをデプロイし、正しく設定されているかどうかテストします。

Firebase CLI での処理

  1. Firebase CLI の設定にある手順に沿って、Firebase CLI をインストールします。
  2. Firebase CLI をインストールしたら、firebase init を実行してシェルアプリを作成します。
  3. データベース機能ホスティングを選択します。プロジェクト リストから Firebase プロジェクトを選択します。

動作をテストする

  1. firebase deploy を実行して、シェルアプリをデプロイします。
  2. アプリが動作していることを確認します。

サンプルアプリの入手と設定

サンプルアプリでの処理

  1. Firestripe のソースコードを入手します。
  2. functions ディレクトリから npm install -g を実行して、Node.js ライブラリをローカルにインストールします。
  3. public/index.html ファイルに Firebase と Stripe のキーを設定します。

      firebase.initializeApp({
        apiKey: "YOUR WEB API KEY",
        authDomain: "YOUR FIREBASE APP NAME.firebaseapp.com",
        databaseURL: "https://YOUR FIREBASE APP NAME.firebaseio.com",
        storageBucket: "YOUR FIREBASE APP NAME.appspot.com",
        messagingSenderId: "YOUR CLOUD MESSAGING SENDER ID"
      });
      Stripe.setPublishableKey('YOUR STRIPE PUBLISHABLE KEY');
    

Firebase CLI での処理

  1. プロジェクトのディレクトリから次のコマンドを実行し、Stripe サーバーキーを設定します。firebase functions:config:set stripe.token="YOUR TEST SECRET KEY"
  2. firebase deploy を実行して、新しい変更を push します。

動作をテストする

YOURAPPNAME.firebaseapp.com で、支払いアプリの URL にアクセスし、次のことを確認します。

  • ユーザー名がページに表示されている。
  • クレジットカード情報を入力して追加できる。
  • 新しいチャージを作成できる。
  • ログアウトできる。

比較のため、Firestripe のサンプルを試してみてください。

ユーザーに簡単なプロセスを提供するため、支払いページの外観をカスタマイズしたり、既存のアプリにプラグインとして追加したりできます。

処理された支払いの確認

支払いページを設定してデプロイしたら、Firebase コンソールでユーザーとトランザクションのリストを確認できます。

Firebase コンソールでの処理

  1. データベースに移動します。
  2. ユーザーのリストを確認します。ユーザーがクレジット カード情報の追加や取引を行った場合には、そのユーザーのリストを確認します。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。