> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Stripe

> LumiのStripe統合を使用して、ウェブサイトに支払いを設定します。

<video controls className="w-full aspect-video rounded-xl" src="https://mkhqtbnlmhstatalllbc.supabase.co/storage/v1/object/public/lumi/assets/20251211211739199.mp4" />

Lumiのチャットインターフェースを通じてStripeを完全に設定できるようになりました。必要なものを説明するだけです。

* 「月額9.99ドルの会員プランを追加...」
* 「コンサルティングサービスを販売、1回限りの料金299ドル...」

LumiはStripe統合プロセス全体を自動化し、製品と価格の作成、チェックアウトとポータルのエッジ関数の生成、RLSを備えた必要なデータベーステーブルの構築、および対応するUIボタンの追加を行います。カスタム目的で実装することを選択しない限り、手動のコーディングやWebhookは必要ありません。

## シンプルなステップバイステップの例

<Steps>
  <Step title="プロジェクトの準備">
    まず、支払い統合の準備ができているプロジェクトを用意します。続行する前に、ログインや主要機能などのすべてのコア機能とページが完了していることを確認してください。

    <Tip>
      たとえば、会員制のサブスクリプションベースのAI画像生成ウェブサイトを作成する場合は、まずログインとAI機能を完了させてください。
    </Tip>
  </Step>

  <Step title="支払い要件の説明">
    支払いのニーズを説明してください。例：「Stripeを介して会員システムを実装します。無料ユーザーは毎日2枚の画像を取得し、Proユーザーは月額0.99ドルで無制限に使用できます。」
  </Step>

  <Step title="サンドボックスAPIキーの入力">
    Stripeサンドボックス環境のAPIキーを提供してください。ライブに移行する前に、サンドボックスで支払いプロセスを完全にテストすることを強くお勧めします。

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/1.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=0e71eaef362acb96d85d2b8a4cb95688" alt="1 Pn" width="1046" height="1186" data-path="images/1.png" />
  </Step>

  <Step title="製品と価格の作成">
    Lumiは、ニーズに基づいて正しい製品とそれに対応する説明、価格、支払いサイクルを自動的に作成します。変更がある場合は、会話を通じてLumiに通知することもできます。

    その後、Lumiはプロジェクト内の製品情報と購入プロセスの改善も支援します。

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/2.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=760001a6fced78a1f2a118b3091d395d" alt="2 Pn" width="1044" height="688" data-path="images/2.png" />
  </Step>

  <Step title="支払いプロセスのテスト">
    製品の作成と支払いの設定が完了したら、製品購入プロセスが期待どおりかどうかをテストしてください。これには以下が含まれます——

    * ページ上の「購入」をクリックした後、Stripeのテスト支払いページに正しくジャンプできるかどうか
    * テストカード (4242 4242 4242 4242) を使用して支払いを正常に完了できるかどうか
    * 支払いが成功した後、Lumiのデータベースにサブスクリプションレコードの作成が表示されるかどうか、およびプロジェクトページに対応する購入レコード（会員バッジ、購入履歴など）が表示されるかどうか

    エラーが発生した場合、Lumiはバックエンドレコードを自動的に読み取り、問題をより適切に解決します。

    <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/3.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=5134df4dcfcce1e7ae28c90c8b16df66" alt="3 Pn" width="1080" height="606" data-path="images/3.png" />
  </Step>

  <Step title="ライブ環境への切り替え">
    支払いプロセスのテストが完了したら、LumiにStripeの公式マーチャント環境への切り替えを依頼できます。

    * まず、Stripeの要件に従ってマーチャントアカウントを登録および認証する必要があります
    * 次に、LumiでStripeの公式環境のAPIキーに切り替えます
    * 最後に、Lumiのガイドラインに従ってステップバイステップで設定を完了します

          <img src="https://mintcdn.com/blockdance/xssS1okt2OxC-BM9/images/4.png?fit=max&auto=format&n=xssS1okt2OxC-BM9&q=85&s=9e01c6a7b204c73c1c32a9141039b96f" alt="4 Pn" width="1090" height="1124" data-path="images/4.png" />
  </Step>

  <Step title="最終テストとローンチ">
    <Tip>
      ヒント：公式環境に切り替えた後、低価格の製品やクーポンを作成して、支払いプロセスをさらにテストできます。
    </Tip>

    * 公式環境に切り替えた後、支払いプロセスを再度テストして、期待どおりかどうかを確認してください。
    * すべての準備が整ったら、ローンチしてユーザーと共有しましょう！
  </Step>
</Steps>
