# Stripeサブスクリプション

*Skill Level: Intermediate*

## 開始する前に

* [Stripe](https://stripe.com) アカウントを作成し、ビジネス情報と銀行口座情報を追加し、必要な検証を完了していることを確認してください。
* サブスクリプションコンポーネントが機能するには、**ユーザーがログインしている必要があります**。

## 手順

### Stripeサブスクリプション

![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-bf142cfb949c160b9af3ff16eeec8ed3991c5a20%2FStripe%20Subscription?alt=media)

#### Stripeで製品を設定する

1. [Stripeダッシュボード | 製品](https://dashboard.stripe.com/subscriptions/products) に移動します。
2. 新しい製品を作成するには <img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-208b2fd5fcf5f7ba044cdf857a086cc3e99b4855%2FStripe%20Add%20Product?alt=media" alt="" data-size="line"> をクリックします。
3. 製品情報を入力します

   <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ea108b02b3ced8e134c7d17e3cb9b61a15ef5cf8%2FAdd%20Product%20Stripe.png?alt=media" alt=""><figcaption></figcaption></figure>
4. 入力が完了したら <img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5c2ab9f2fff68b134eb82fa250f9eca082648cf8%2FStripe%20Save%20Product?alt=media" alt="" data-size="line"> を選択します。

#### アプリにStripeサブスクリプションコンポーネントを追加する

1. 「+」ボタンをクリックして追加パネルを開きます。
2. *Installed* までスクロールダウンします。
3. Stripeサブスクリプションコンポーネントをチェックアウト画面にドラッグします。

#### サブスクリプション支払いコンポーネントを構成する

1. Stripeアカウントに接続するには Connect with Stripe ボタンをクリックします。
2. Stripeサブスクリプションセクションで：
   1. Stripeから Price Plan ID（price\_stringID\_）をAdaloにコピーし、price\_id というStripeコンポーネントに入力します。
      1. [Stripeダッシュボード | 製品](https://dashboard.stripe.com/subscriptions/products) に移動します。
      2. 製品を選択します。
      3. IDをコピーしてAdaloに貼り付けます。
         1. PriceID は次のようになります：*price\_1IHCB8FAwoyiOM0lgJc2v4ec*
3. メールフィールドセクションで：
   1. 購入のメール確認を受け取るべきユーザーのメールアドレスを**必ず**指定してください。これは[Stripeダッシュボード](https://dashboard.stripe.com/)で顧客を識別し、コンポーネントがアクティブなサブスクリプションがあることを知る方法でもあります。
4. テストモード：
   1. この機能を使用するには、[テストモードを構成](https://app.gitbook.com/o/-Lha7TPH_T7jnvspjvYs/s/-LhGHkPsv15svPIU5I7C/~/changes/Xl1LOeoZLwaoJdDTMUQY/component-basics/marketplace-components/stripe/adding-payments-using-stripe-1)してください。

#### サブスクリプション支払いが成功した場合

1. サブスクリプションが正常に作成されると、ユーザーは確認メッセージを受け取り、その後のアクションが完了します。

   ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5e0a28547f8b8b0c733240fb6ddcbf8551910d2f%2FStripe%20Subscription%20Successful?alt=media)
2. サブスクリプションコンポーネントがある画面に戻ると、コンポーネントはログインしているユーザーのメールを確認し、該当する場合はアクティブなサブスクリプションを表示します。

   ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-167b9096d8b536b47cd808be12015e2e3cd13967%2FStripe%20Subscription%20Located?alt=media)
3. ユーザーは、ログインしているユーザーのメールに基づいてアクティブなサブスクリプションがある場合、***サブスクリプション設定*** のオプションがあり、サブスクリプションを更新またはキャンセルできます。![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-2766a8eb64e997f84302f9309d6673305ea6aae1%2FStripe%20Update%20Subscription?alt=media)
4. ユーザーは購読を解除することができ、確認を受け取ります。

<div align="left"><figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-038d754140d7b1ac052cab85ce94ea7e36d1f0bc%2FStripe%20Unsubscribed%20Confirmation?alt=media" alt="" width="335"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
*Please Note:* Stripeからユーザーの購読データを受け取るオプションや、Stripe Marketplace Componentを使用してStripeからアクティブな購読を検証するオプションはありません。これは、[Stripe | API Documentation](https://stripe.com/docs/api)を使用して[カスタムアクション](https://help.adalo.com/ja/integrations/custom-actions)を使用する必要があります。
{% endhint %}

#### 購読支払いが失敗しました

1. **支払いが拒否されました**
   1. 購読支払いが拒否されると、ユーザーは以下のエラーを受け取ります。

      ![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-45714111d7d7078dce10d3a8c418db389b83446f%2FScreenshot%202024-11-11%20at%209.58.41%E2%80%AFAM.png?alt=media)
   2. このエラーは、カードの詳細が間違っているか、資金が不足しているなどの支払いに関する問題によるものです。
   3. ユーザーは画面に残り、支払い詳細に問題がある場合に再度購読を試みることができます。
   4. エラーの理由を確認するために[Stripeダッシュボード](https://dashboard.stripe.com/test/payments)にログインできます。
2. **購読エラー**
   1. 購読が完了できない場合、ユーザーは以下のエラーを受け取ります。

      <div align="left"><figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-a4093e34d81f9785062a4edbf543646a89e540a8%2FScreenshot%202024-11-11%20at%2010.05.06%E2%80%AFAM.png?alt=media" alt="" width="259"><figcaption></figcaption></figure></div>
   2. この問題は、無効なPriceID、製品設定の問題、正しくないまたは無効なユーザーのメールアドレス、ユーザーがアプリにログインしていない、またはライブモードでテストモード製品が使用されているなど、コンポーネントのセットアップに問題がある場合に発生します。
   3. サポートに連絡する前に、コンポーネントのセットアップ、PriceIDの有効性、およびユーザーフローを確認してください。

### テストモード

1. コンポーネントで\_Test Mode\_をオンにします
2. Stripeのテストシークレットキーとテスト公開キーをサブスクリプションコンポーネントに入力します。
   * [Stripe | API Keys Documentation](https://stripe.com/docs/keys) でStripeアカウントでの設定方法を確認できます
3. Stripeでテスト製品を設定します
   1. [Stripeダッシュボード | 製品](https://dashboard.stripe.com/subscriptions/products)に移動します
   2. ダッシュボードの右上隅にあるテストモードを有効にします![](https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-63dc7798b0e51b32f7376ee969a4febc21b768ea%2FStripe%20Test%20Mode%20\(1\)?alt=media)
   3. <img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-208b2fd5fcf5f7ba044cdf857a086cc3e99b4855%2FStripe%20Add%20Product?alt=media" alt="" data-size="line">をクリックして新しい製品を作成します
   4. 製品情報を入力します

      <figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-ea108b02b3ced8e134c7d17e3cb9b61a15ef5cf8%2FAdd%20Product%20Stripe.png?alt=media" alt=""><figcaption></figcaption></figure>
   5. 入力が完了したら、<img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-5c2ab9f2fff68b134eb82fa250f9eca082648cf8%2FStripe%20Save%20Product?alt=media" alt="" data-size="line">を選択します
   6. サブスクリプションコンポーネント内の\_Price\_ID\_を更新します。
   7. プレビューアを開いて通常の支払いフローを完了します。
   8. 適切な[Stripe | テストモードカード](https://stripe.com/docs/testing#cards)を選択してテストしたいシナリオを選択します。
   9. カード情報を入力し、「今すぐ支払う」を選択します。

{% hint style="info" %}
テストモードで作成された製品はライブモードにコピーできますが、異なるprice\_IDになります
{% endhint %}

### テストが成功しました

サブスクリプションコンポーネントのテストが完了し、ライブに移行したい場合は、テストモードを無効にし、Price IDをライブ製品に変更する必要があります。

## ヘルプ

この記事に関する追加のヘルプが必要な場合は、いつでも[コミュニティフォーラム](https://forum.adalo.com/)で質問できます！投稿にはこの記事へのリンクも貼っておいてください！
