> ## 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 美元...」
* 「銷售我的諮詢服務，一次性費用 299 美元...」

Lumi 自動化整個 Stripe 整合過程，建立產品和定價，產生結帳和入口網站邊緣函數，建立具有 RLS 的必要資料庫表格，並新增相應的 UI 按鈕——無需手動編碼或 Webhooks，除非您選擇為自訂目的實作它們。

## 一個簡單的逐步範例

<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>