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

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

## 学べること

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

* [KurocoとStripeの連携](#kurocoとstripeの連携)
  - [StripeでAPIキーを取得](#stripeでapiキーを取得)
  - [StripeでWebhookを作成](#stripeでwebhookを作成)
  - [KurocoでStripeとのAPI連携を設定](#kurocoでstripeとのapi連携を設定)

* [サブスクリプション商品の追加](#サブスクリプション商品の追加)
  - [Stripeで商品の追加](#stripeで商品の追加)
  - [KurocoのグループとStripeの商品を紐づけ](#kurocoのグループとstripeの商品を紐づけ)

* [APIの設定](#apiの設定)
  - [エンドポイントの設定](#エンドポイントの設定)
  - [支払処理の確認](#支払処理の確認)
  - [キャンセル処理の確認](#キャンセル処理の確認)

## KurocoとStripeの連携

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

### StripeでAPIキーを取得

ブラウザで[Stripeのダッシュボード](https://dashboard.stripe.com/)にアクセスし、右上の[Developers]をクリックします。  

![Image from Gyazo](https://t.gyazo.com/teams/diverta/998a7d7b6e72a9ff73336acfc1fa202f.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1463f45913a90348113701014db4208d.png)

### StripeでWebhookを作成

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3c8abbd3fc861a4a343b3ca590460d7f.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/94aa9e09dd6d2d44b2a63a57b92cdc06.png)

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

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

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d0a520b9294b90323506c9f610630910.png)

### KurocoでStripeとのAPI連携を設定

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/bed3aa3ffa8cabc2e0838f271b0cb93f.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/108ab6a54e6603d27edea180e6cb6884.png)

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

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

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

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

### Stripeで商品の追加

Stripeの管理画面のメニューバーから[Products]をクリックし、左サイドバーから[All products]をクリックします。
   
Productsページに遷移するので、[+ Add a product]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2a97ee06c256958b8ea76a502bee77d0.png)

商品の追加ページに遷移するので、以下のように、商品の詳細を記入します。  
詳しくは、Stripeのドキュメント[商品および価格を管理する](https://stripe.com/docs/products-prices/manage-prices)を参照してください。

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d25df95fe43ed69f9fa8eaa6d7111fb2.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5f018cec74aa98e71cdf383dc2a574d5.png)

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

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

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/32cd62723ff8d7c5330b62088ffb9ea8.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/25cd5fcb3c06de1a142030e3ff56a7f5.png)

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

## APIの設定

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

### エンドポイントの設定

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/477300a8e16803900febf4469215a58b.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/1af3b17d5e6c1bdd530cdb39aa7a4168.png)

#### チェックアウトエンドポイント
支払い用のURLを生成するためのエンドポイントです。  

| 項目 | 設定 |
| :--- | :--- |
| カテゴリー | Payments |
| モデル | Stripe, v1 |
| オペレーション | checkout |
| products_list | `price_`から始まるStripeプライスIDを入力します。<ul><li>複数のStripeプライスIDを設定できます。</li><li>StripeプライスIDをフロントエンドから変更することはできません。</li></ul>|
| return_url | 支払いが成功した場合にリダイレクトされるフロントエンドのURLを設定します。 |
| return_err_url |  支払いが失敗した場合にリダイレクトされるフロントエンドのURLを設定します。 |
| trial_end |  トライアル期間の終了日を指定できます。 |
| trial_period_days |  トライアル期間の日数を指定できます。 |

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

ここでは以下のように設定しました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/a34f702656c4c922e5d7440910f8d0cc.png)

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

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

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

ここでは以下のように設定しました。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2184f4326c67b695e22e57fbeae4f8c1.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/410a1c3570453fa969d76aeacdfeabb8.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/11f34df1503e6fded0c0b7d4005eab05.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/503401472b2d923c12d215df04bd1df9.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/5d8f120814340bb9459cb8d2e6d595f6.png)

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

:::tip
テストモードの場合はStripeの[テストカード](https://stripe.com/docs/testing#international-cards)を利用して、支払処理後の動作確認が可能です。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/44c6b1ab3e4b22284ce3bb56a7b5e51e.png)

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

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

- 支払いをしたメンバー情報のID情報タブで、所属グループにStripeと連携したグループが追加されている。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/1b7f39bd891d0a063a4e451402e376c0.png)

- 支払いをしたメンバー情報のプロフィール情報タブで「StripeカスタマーID」と「StripeサブスクリプションID」が追加されている。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/453161e509029b43516a49bc015f153b.png)

- Stripe管理画面の[Billing]->[Subscription]で支払いをしたメンバーが追加されており、StripeサブスクリプションIDがKuroco管理画面と一致している。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/a4ab2faee0f781df82f33ac7c4a58ebe.png)  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/144255e4f4b6d43e03646fd984099043.png)

### キャンセル処理の確認

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9456bf51a59b865b258076a62a637a71.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/b6ffcfffd1029f38661dd098564c9904.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/fdbfac0405ee10a2b6e1d2c51128c1aa.png)

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

- 支払いをしたメンバー情報のID情報タブで、所属グループからStripeと連携したグループが削除されている。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/bbc80b0f85c8807b526e087dc0e4789f.png)

- 支払いをしたメンバー情報のプロフィール情報タブで「StripeサブスクリプションID」が削除されている。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/3bc158d86690dc006c773ab75c66ff23.png)

- Stripe管理画面の[Billing]->[Subscription]の[Current]タブから対象のメンバーが削除され、[Canceled]タブに追加されている。  
  ![Image from Gyazo](https://t.gyazo.com/teams/diverta/2c1d15d69eb4d12eb6bf798be3c12954.png)

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

## その他
### 制限事項

現在、KurocoはStripeの以下の支払いタイプに対応していません。
- ゲストチェックアウト（非ログインユーザーの支払）
- One time設定の商品購入
- メンバーへの複数のサブスクリプションIDの発行

### Stripe CLI
Strileの開発者ツールである[Stripe CLI](https://stripe.com/docs/stripe-cli) を使用すると、コマンドラインから直接、Stripe の組み込みを構築、テスト、管理できます。

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

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

Stripe CLIの詳細については以下を参照してください。
- [Stripe CLI を使ってみる](https://stripe.com/docs/stripe-cli)
- [Stripe CLI でイベントをリッスンする](https://stripe.com/docs/stripe-cli/about-events)