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

# Stripe決済統合

> AgentでStripeを使ってアプリに決済とサブスクリプションを追加する方法を説明します。

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

<Note>
  StripeはStarter、Core、Proプランのビルダーおよびコラボレーティブワークスペースで利用できます。
</Note>

## 構築できるもの

ワンクリックでAgentを使ってアプリにStripeを追加できます — セットアップ不要。ストアフロントを構築したり、一回限りの決済を受け付けたり、サブスクリプションを作成したりできます。Agentが統合、データモデル、テスト環境を配線します。

## 仕組み

AgentはStripeサンドボックスから始めるため、実際のお金を動かさずに安全に決済をテストできます。すぐにフローを構築して試すことができます。準備ができたら、ライブStripeアカウントに切り替えて発行し、実際の決済を受け付けられます。

<Info>
  Stripeサンドボックスは、決済、サブスクリプション、イベントをシミュレートできる分離されたテスト環境です。詳しくは
  [Stripeのサンドボックスに関するドキュメント](https://docs.stripe.com/sandboxes)をご覧ください。
</Info>

## チームでStripeを使う

Stripeはコラボレーティブワークスペースで動作するため、チーム全員が同じアプリを一緒にビルド、テスト、マネタイズできます。ワークスペース内の全員が接続済みのStripeアカウントで作業でき、一人が単独で決済を構築する必要がありません。

## はじめに

* **AgentにStripeの使用を依頼する**
  * ホーム画面でスラッシュコマンドを使ってStripeを選択するか、直接依頼します：
    <AiPrompt>Build a storefront and integrate Stripe for payments</AiPrompt>

<Note>
  Stripe統合にはバックエンド機能を持つアプリが必要です。ホームページから**App**を選択してはじめてください。
</Note>

## サンドボックスでの決済テスト

1. アプリの**Preview**を新しいタブで開きます。
2. ストアフロントまたは決済ページからテスト購入を行います。
3. Stripeの標準テストカードを使用します：

```text theme={null}
Card number: 4242 4242 4242 4242
Expiry: any future date
CVC: any 3 digits
Name, address: any mock values
```

<Tip>
  サンドボックスでの購入は実際のネットワークを通じて処理されず、お金も動きません。エンドツーエンドのテストに安全です。
</Tip>

## 商品と価格の管理

2つのオプションがあります：

1. アプリから**Publish**を選択し、Stripeサンドボックスを申請することを選択します。
   * まだStripeアカウントをお持ちでない場合は、サンドボックスを申請するためにアカウントを作成してください。
2. Stripeダッシュボードで**Products**を開いて商品と価格を追加または編集します。
   Stripeサンドボックスで行った変更はReplitアプリに自動的に反映され、アプリのデータベースと同期されます。

### 同期されたStripeデータの確認

* プロジェクトエディターで**Database**を開きます。
* **MyData**を選択します。
* スキーマセレクターを**Stripe**に変更して、決済オブジェクトと関連レコードを確認します。

## 公開する

実際の決済を受け付けるには、Stripe Marketplaceから[Replit Integrated Payments](https://marketplace.stripe.com/apps/replit-integrated-payments)アプリをインストールしてライブStripeアカウントを接続します。インストールフローがライブアカウントを自動的に接続します — APIキーのコピーや貼り付けは不要です。

<Warning>
  サンドボックス統合は本番環境対応ではありません。以下の手順を完了するまで実際の決済を受け付けることはできません。
</Warning>

<Steps>
  <Step title="Publishペインを開く">
    アプリで**Publish**を選択してライブ接続フローを開始します。
  </Step>

  <Step title="Replit Integrated PaymentsアプリをインストールするStep">
    **Stripeアプリをインストール**を選択します。[Replit Integrated Payments](https://marketplace.stripe.com/apps/replit-integrated-payments)の掲載ページが表示されたStripeウィンドウが開きます。

    Stripeがアカウントの選択を求めたら、サンドボックスやテストアカウントではなく**ライブ**Stripeアカウントを選択します。
  </Step>

  <Step>
    Stripeの指示に従ってアプリをインストールします。ライブアカウントがまだ有効化されていない場合、StripeはまずKYB（Know Your Business）認証を案内します。

    インストールが完了するまでStripeウィンドウを開いたままにしてください。
    Stripeがインストールを確認したら、Replitはバックグラウンドで本番接続を完了します。
  </Step>

  <Step title="アプリを公開する">
    Replitに戻ります。**Publish**ペインにライブStripeアカウントが接続済みとして表示されます。アプリを公開して実際の決済の受け付けを開始します。
  </Step>
</Steps>

<Note>
  Replit Integrated Paymentsアプリのインストールは、PublishableキーとSecretキーをReplitにコピーする旧来の手動フローを置き換えます。アプリが本番キーを設定し、サンドボックスからライブへの同期を維持します。
</Note>

## 統合の管理

* **Integrations > Stripe**に移動してStripe connectorを開きます。
* そこから接続のテスト、ステータスの確認、設定の管理ができます。

## よくある質問

### 商品の価格を更新するには？

* Agentに依頼する：変更内容を説明するとAgentがアプリとStripeオブジェクトを更新します。
* Stripeダッシュボードを使用する：**Products**を開いて価格と商品の詳細を編集します。
  * サンドボックスでは、変更はアプリとデータベースに自動的に同期されます。
  * 本番環境では、まずライブアカウントに切り替えてから価格を更新してください。アプリが新しい設定を取得する必要がある場合は再発行してください。

### Replitでトランザクションをテストするには？

アプリの**Preview**を新しいタブで開きます。標準テストカード（4242 4242 4242 4242）と任意の将来の有効期限、任意のCVCでStripe Checkoutフローを実行します。詳細については上記の[サンドボックスでの決済テスト](#test-payments-in-the-sandbox)を参照してください。

### ライブStripeアカウントとは？

ライブStripeアカウントは、ビジネスの詳細情報で認証・有効化され、実際の決済を処理できるアカウントです。アカウントの作成と有効化については、Stripeのガイダンスをご覧ください：[Create and manage your Stripe account](https://docs.stripe.com/get-started/account)。

### Stripe APIキーを貼り付ける必要がありますか？

いいえ。Replit Integrated PaymentsアプリがライブStripeアカウントを接続する際に本番キーをインストールします。Stripeダッシュボードからライブキーをコピーする必要はありません。

以前にライブキーを貼り付けてStripeを接続していた場合、その接続は引き続き機能します。Stripe接続を削除して**Publish**ペインから再接続することで、Stripeアプリのインストールフローに切り替えられます。以下の[Stripe接続の更新または削除](#update-or-remove-the-stripe-connection)を参照してください。

## Stripe接続の更新または削除

ライブStripe接続で公開する準備ができていない場合、2つのオプションがあります：

### オプションA：Stripe統合を手動で削除する

プロジェクトからStripe統合を完全に削除できます。

<Steps>
  <Step title="インテグレーションタブを開く">
    Replitアプリに移動して上部の**Integrations**タブを選択します。**Connectors**の下で**Stripe**を見つけて**Manage**を選択します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-1-integrations.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=6c13ffeb8b367ec950a48d264540f967" alt="ManageボタンとともにStripe統合を表示するConnectorsのインテグレーションタブ" width="2000" height="1110" data-path="images/replitai/stripe-disconnect-1-integrations.png" />
    </Frame>
  </Step>

  <Step title="APIキーを展開する">
    シェブロンを選択して**Sandbox API keys**と**Live account API keys**を展開し、**Edit**を選択します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-2-edit-keys.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=60bbac9e871e84e28171ec9bfa22b28d" alt="EditボタンとともにStripeサンドボックスとライブアカウントのAPIキーが展開されている" width="2000" height="1274" data-path="images/replitai/stripe-disconnect-2-edit-keys.png" />
    </Frame>
  </Step>

  <Step title="アカウントを切断する">
    **Disconnect account**を選択してサンドボックス接続を削除し、**Disconnect live account**を選択してライブ接続を削除します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-3-disconnect.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=576034d8d4380747c4f8c5ccdc41c652" alt="Disconnect accountとDisconnect live accountボタンを表示するStripeサンドボックスとライブアカウントのAPIキー" width="2000" height="1271" data-path="images/replitai/stripe-disconnect-3-disconnect.png" />
    </Frame>
  </Step>

  <Step title="AgentにStripeコードの削除を依頼する">
    Agentチャットに移動し、アプリケーションからStripe connectorコードを削除するよう依頼します。これにより、Stripe統合全体が削除されます。
  </Step>
</Steps>

### オプションB：Stripe統合前のチェックポイントにロールバックする

Stripe統合を完全に元に戻して以前の状態に戻したい場合は、以前のチェックポイントにロールバックできます。

<Steps>
  <Step title="インテグレーションタブを開く">
    Replitアプリに移動して上部の**Integrations**タブを選択します。**Connectors**の下で**Stripe**を見つけて**Manage**を選択します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-1-integrations.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=6c13ffeb8b367ec950a48d264540f967" alt="ManageボタンとともにStripe統合を表示するConnectorsのインテグレーションタブ" width="2000" height="1110" data-path="images/replitai/stripe-disconnect-1-integrations.png" />
    </Frame>
  </Step>

  <Step title="APIキーを展開する">
    シェブロンを選択して**Sandbox API keys**と**Live account API keys**を展開し、**Edit**を選択します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-2-edit-keys.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=60bbac9e871e84e28171ec9bfa22b28d" alt="EditボタンとともにStripeサンドボックスとライブアカウントのAPIキーが展開されている" width="2000" height="1274" data-path="images/replitai/stripe-disconnect-2-edit-keys.png" />
    </Frame>
  </Step>

  <Step title="アカウントを切断する">
    **Disconnect account**を選択してサンドボックス接続を削除し、**Disconnect live account**を選択してライブ接続を削除します。

    <Frame>
      <img src="https://mintcdn.com/replit/B2FfFcjSO2_7EVcu/images/replitai/stripe-disconnect-3-disconnect.png?fit=max&auto=format&n=B2FfFcjSO2_7EVcu&q=85&s=576034d8d4380747c4f8c5ccdc41c652" alt="Disconnect accountとDisconnect live accountボタンを表示するStripeサンドボックスとライブアカウントのAPIキー" width="2000" height="1271" data-path="images/replitai/stripe-disconnect-3-disconnect.png" />
    </Frame>
  </Step>

  <Step title="Stripe統合前のチェックポイントを見つける">
    Agentチャットに移動し、Stripe統合の前に作成されたチェックポイントを探します。チャットペインの左上にある**時計アイコン**を選択して古いチャット履歴を確認します。

    <Frame>
      <img src="https://mintcdn.com/replit/YElKpLz4AJkoRVnw/images/replitai/stripe-rollback-5-clock-icon.png?fit=max&auto=format&n=YElKpLz4AJkoRVnw&q=85&s=5a8e86892fea6061d3af970dd6499a32" alt="チャット履歴とチェックポイントを表示するための時計アイコン" width="56" height="50" data-path="images/replitai/stripe-rollback-5-clock-icon.png" />
    </Frame>
  </Step>

  <Step title="「Rollback here」を選択する">
    良さそうなチェックポイントを見つけたら、**Rollback here**を選択してプロジェクトをその状態に復元します。

    <Frame>
      <img src="https://mintcdn.com/replit/YElKpLz4AJkoRVnw/images/replitai/stripe-rollback-6-checkpoint.png?fit=max&auto=format&n=YElKpLz4AJkoRVnw&q=85&s=a48d19624a6740286ff9f004c302547d" alt="「Rollback here」ボタンのあるチェックポイント" width="904" height="202" data-path="images/replitai/stripe-rollback-6-checkpoint.png" />
    </Frame>
  </Step>
</Steps>

## 注意事項と制限

* サンドボックスのアクティビティは実際の残高や顧客に影響しません。
* 一部のStripe機能はサンドボックスでテストできません（例：IC+料金やConnectの特定のフロー）。
  [Stripeのサンドボックスの制限](https://docs.stripe.com/sandboxes)を参照してください。
