メインコンテンツまでスキップ

Stripeと連携して有料会員の機能を実装する。

概要

KurocoとStripeを連携すると、Stripeのサブスクリプション支払い実行後、対象のユーザーを自動で特定のグループに追加できます。 こちらを利用して、有料会員とその支払い機能を実装できます。

学べること

以下の手順でKurocoとStripeの連携からサブスクリプション購読・解除までの動作を確認します。

KurocoとStripeの連携

まずKurocoと連携するためのAPIキーをStripeから取得します。

StripeでAPIキーを取得

ブラウザでStripeのダッシュボードにアクセスし、右上の[Developers]をクリックします。

Image from Gyazo

次に、左サイドバーメニューの[API keys]をクリックすると、[Publishable key][Secret key]が表示されます。
後で使用するのでコピーしてください。

注意

Stripeにはテストモードと本番モードの2種類があります。 モードによってAPIキーが異なりますので切り替えの際はKuroco側の設定も更新する必要があります。

Image from Gyazo

StripeでWebhookを作成

次に、サイドメニューの[Webhooks]をクリックし、[Add an endpoint]をクリックします。

Image from Gyazo

Webhookの設定ページに移動したら、Stripeの決済が成功したかどうかをKurocoが判断するためのWebhookを追加します。

Image from Gyazo

以下のように設定します。

項目設定
Endpoint URL[外部システム連携] -> [Stripe]で表示されるエンドポイントURLを入力します。
Descriptionwebhookの説明を入力します。(任意)
Listen to[Events on your account] を選択します。
Version最新のバージョンを選択します。
Events[+ Select events]をクリックして、ドロップダウンから以下のイベント選択します。
  • customer.subscription.created
  • customer.subscription.deleted
  • customer.subscription.updated
選択ができたら[Add events] をクリックしてイベントを追加します。

完了したら、[Add endpoint]をクリックします。

エンドポイントのページに遷移するので、Signing secretの[Reveal]をクリックして、Webhookの秘密鍵を表示します。
後で使用するのでコピーしてください。

Image from Gyazo

KurocoでStripeとのAPI連携を設定

Kurocoの管理画面から[外部システム連携]->[Stripe]をクリックします。

Image from Gyazo

Stripeの外部システム連携ページが表示されたら、Stripeで取得したPublishable key(公開可能キー)、Secret key(シークレットキー)、Signing secret(ウェブフックシークレット)を入力します。

Image from Gyazo

項目設定
Status[有効にする]にチェックを入れます。
公開可能キーStripeで取得した[Publishable key]を入力します。
シークレットキーStripeで取得した[Secret key]を入力します。
ウェブフックシークレットStripeで取得した[Signing secret]を入力します。

入力が完了したら[更新する]をクリックして設定を反映します。

サブスクリプション商品の追加

次に、Stripe及びKurocoで利用するサブスクリプションの設定をします。

Stripeで商品の追加

Stripeの管理画面のメニューバーから[Products]をクリックし、左サイドバーから[All products]をクリックします。

Productsページに遷移するので、[+ Add a product]をクリックします。

Image from Gyazo

商品の追加ページに遷移するので、以下のように、商品の詳細を記入します。
詳しくは、Stripeのドキュメント商品および価格を管理するを参照してください。

項目設定
Name商品の名前を入力します。
Description商品の説明を入力します。
Pricing商品の価格を入力します。
Recurring定期支払にするため[Recurring]を選択します。
Billing period支払い周期を選択します。

設定が完了したら[Save product]をクリックして商品を追加します。

Image from Gyazo

商品の詳細ページに遷移するので、price_から始まるAPI IDをコピーしておきます。

Image from Gyazo

他の商品を追加する場合は、同様のステップを繰り返します。

KurocoのグループとStripeの商品を紐づけ

次にStripeの支払が完了した際に追加されるKurocoのグループを設定します。
Stripeの商品とKurocoのグループは1対1で紐づくので、複数の商品を利用する場合は商品ごとにグループを作成します。
新しいグループの作成方法については、グループを作成するを参照してください。

グループ一覧ページから対象のグループ名をクリックします。

Image from Gyazo

グループ編集の画面「StripeプライスID」の項目に、Stripeから取得したAPI IDを入力します。

ヒント

「StripeプライスID」の項目はStripeとKurocoの連携後に表示されます。表示されない場合は、上記のKurocoとStripeの連携に戻り、入力・設定が正しいか確認してください。

Image from Gyazo

Stripeの決済ページから正常に支払いが完了すると、支払いをしたメンバーがこのグループに自動的に追加されます。

APIの設定

最後に、支払い処理に必要なエンドポイントを追加して動作の確認をします。
支払い用のエンドポイントと、キャンセル用のエンドポイントの2つを準備します。

エンドポイントの設定

注意

決済機能を利用するためには、APIのセキュリティ設定をCookieまたは動的トークンに設定してください。

Kurocoの左サイドバーメニューから、[API]をクリックし、エンドポイントを追加するAPIを選択します。

Image from Gyazo

エンドポイント一覧画面で、[新しいエンドポイントの追加]をクリックし、以下2つのエンドポイントを追加します。

Image from Gyazo

チェックアウトエンドポイント

支払い用のURLを生成するためのエンドポイントです。

項目設定
カテゴリーPayments
モデルStripe, v1
オペレーションcheckout
products_listprice_から始まるStripeプライスIDを入力します。
  • 複数のStripeプライスIDを設定できます。
  • StripeプライスIDをフロントエンドから変更することはできません。
return_url支払いが成功した場合にリダイレクトされるフロントエンドのURLを設定します。
return_err_url支払いが失敗した場合にリダイレクトされるフロントエンドのURLを設定します。

Image from Gyazo Image from Gyazo

設定が完了したら[追加する]をクリックしてエンドポイントを追加します。

キャンセルエンドポイント

サブスクリプションをキャンセルするためのエンドポイントです。

項目設定
カテゴリーPayments
モデルStripe, v1
オペレーションcancel_order

Image from Gyazo

設定が完了したら[追加する]をクリックしてエンドポイントを追加します。

支払処理の確認

Swagger UIを利用して、支払い及び、連携したグループへの追加が期待通りに動作しているか確認します。

エンドポイント一覧画面で、[Swagger UI]をクリックします。

Image from Gyazo

支払いを行いたいメンバーでログインをして、チェックアウトエンドポイントの[Try it out]をクリックします。

Image from Gyazo

[Execute]をクリックします。

Image from Gyazo

支払い用のURLが発行されるのでブラウザからアクセスします。

Image from Gyazo

支払いページに遷移するので、カード情報を入力し、[申し込む]をクリックします。

ヒント

テストモードの場合はStripeのテストカードを利用して、支払処理後の動作確認が可能です。

Image from Gyazo

支払いが完了すると、エンドポイントで設定したフロントエンドのURLに遷移します。
return_urlが空欄の場合はフロントエンドURLのトップページに遷移します。

以下3点を確認し、動作が正常に完了したことを確認してください。

  • 支払いをしたメンバー情報のID情報タブで、所属グループにStripeと連携したグループが追加されている。
    Image from Gyazo

  • 支払いをしたメンバー情報のプロフィール情報タブで「StripeカスタマーID」と「StripeサブスクリプションID」が追加されている。
    Image from Gyazo

  • Stripe管理画面の[Billing]->[Subscription]で支払いをしたメンバーが追加されており、StripeサブスクリプションIDがKuroco管理画面と一致している。
    Image from Gyazo
    Image from Gyazo

キャンセル処理の確認

続いてキャンセル処理の確認をします。
サブスクリプションのキャンセルを行いたいメンバーでログインをして、キャンセルエンドポイントの[Try it out]をクリックします。

Image from Gyazo

[Execute]をクリックします。

Image from Gyazo

okのステータスが表示されたらキャンセル処理は完了です。

Image from Gyazo

以下3点を確認し、動作が正常に完了したことを確認してください。

  • 支払いをしたメンバー情報のID情報タブで、所属グループからStripeと連携したグループが削除されている。
    Image from Gyazo

  • 支払いをしたメンバー情報のプロフィール情報タブで「StripeサブスクリプションID」が削除されている。
    Image from Gyazo

  • Stripe管理画面の[Billing]->[Subscription][Current]タブから対象のメンバーが削除され、[Canceled]タブに追加されている。
    Image from Gyazo

注意

サブスクリプションのキャンセル処理は、確認ページにリダイレクトされることなく、即座に行われます。
また、キャンセル時の返金はありません。

その他

制限事項

現在、KurocoはStripeの以下の支払いタイプに対応していません。

  • ゲストチェックアウト(非ログインユーザーの支払)
  • One time設定の商品購入
  • メンバーへの複数のサブスクリプションIDの発行

Stripe CLI

Strileの開発者ツールであるStripe CLI を使用すると、コマンドラインから直接、Stripe の組み込みを構築、テスト、管理できます。

これを行うには、以下に示すフラグを指定して stripe listen というコマンドを実行します。ウェブフックシークレットを受け取るので、それをローカル環境に追加して情報を復号化します。

FlagDescription
--forward-toWebhookの呼び出しの転送先となるローカルホストのURLを入力します。
--eventsリッスンしたいイベントのリストをカンマ区切りで入力します。
--skip-verifyローカルSSL証明書がない、または無効な場合に、このフラグを使用して認証をスキップします。

Stripe CLIの詳細については以下を参照してください。


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。