> ## 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で決済を受け付ける

> Replit Stripe connectorまたは独自のStripeキーで決済を受け付けます。セットアップ方法の選択、チェックアウトのテスト、本番決済の設定を説明します。

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

Replit Stripe connectorまたは独自のStripe APIキーのいずれかで、アプリに決済機能を追加できます。
管理されたサンドボックスのセットアップにはconnectorを、統合を細かく制御したい場合は独自のキーをお選びください。

## 環境ごとに1つの方法を選ぶ

| 方法 | セットアップ | 管理場所 |
| - | - | - |
| [Replit Stripe connector](#replit-stripe-connector) | AgentがStripeサンドボックスを設定し、その後ライブアカウントを接続します。有料プランで利用できます。 | **Integrations > Stripe** |
| [独自のStripeキー](#your-own-stripe-keys) | APIキー、Stripe SDK、Webhookエンドポイントを自分で管理します。 | **Secrets** |

各環境で使う方法は1つだけにし、両方を同時に使わないでください。同じ環境で組み合わせると接続の競合が発生します。
環境ごとに異なる方法を使うことは可能です。たとえば、開発環境ではconnectorのサンドボックスを、本番環境では独自のライブキーを使うといった構成です。

## こんな方に最適

* 予約、レンタル、アポイントメントを運営し、時間を守るためのデポジットが必要な起業家。
* 今日からサンドボックスで決済を動かし、手動のキー設定なしで本番決済に移行したいビルダー。
* 既存のStripeアカウントがある、または手動管理のSDKとWebhook統合が必要なチーム。

## Replit Stripe connector

APIキーを貼り付けることなく、予約時に返金可能なデポジットを受け取り、残額を後日請求したい場合にこの方法を使います。

### コネクタ

<Connectors
  items={[
{
  id: "stripe",
  name: "Stripe",
  why: "サンドボックスでのチェックアウト、保存済みの支払い方法、返金、ライブアカウントの接続",
},
]}
/>

### 始める前に

バックエンド、サインイン、データベースを備えたアプリから始めてください。これにより、各予約に支払いステータスを保存できます。次に、金額の計算方法を決めます。

* **予約時のデポジット：** 500ドルなどの固定額、または合計金額に対する割合。
* **後日の残額：** 料金の残りの部分。顧客が来店したときに保存済みのカードに請求されます。
* **返金期間：** デポジットの返金を受けられる最終キャンセル期限。48時間が一般的なデフォルトです。

### Agentに指示する

<AiPrompt>
  Add deposit and balance payments to this app with the Replit Stripe connector, starting in the
  Stripe sandbox. At booking, take a \[\$500] refundable deposit and save the customer's payment
  method. When the customer arrives, charge the remaining balance to the saved payment method. If
  the customer cancels more than \[48 hours] before the booking, refund the deposit in full. Inside
  that window, keep it. Save the deposit status and the saved-card reference on each booking. Give
  me a test checklist for deposit success, deposit decline, balance charge, and cancellation refund.
</AiPrompt>

AgentがStripe connectorを提案し、Stripeサンドボックスを設定します。Stripeダッシュボードからキーをコピーする必要はありません。

### 期待される動作

Agentはチェックアウト、デポジットと残額のフロー、返金ルールを追加します。Stripeのテストカード`4242 4242 4242 4242`、将来の有効期限、任意の3桁のCVCを使って、Previewでテストしてください。

1. 予約して、デポジットを支払います。予約にデポジットが支払い済みで、カードが登録されていると表示されることを確認します。
2. 予約から残額を請求します。支払い済みと表示されることを確認します。
3. 2件目の予約を返金期間外にキャンセルします。Stripeサンドボックスのダッシュボードで返金を確認します。
4. 3件目の予約を返金期間内にキャンセルします。アプリがデポジットを保持し、その理由を説明することを確認します。
5. Stripeの拒否用テストカード`4000 0000 0000 0002`で支払います。予約が確定されないことを確認します。

フローが正しく動作したら、**Publish**ペインからライブStripeアカウントを接続します。Stripe Paymentsページの[公開する](/ja/features/monetization/stripe-payments#go-live)に従い、アプリを共有する前に、ご自身のカードで低額の実際の予約を1件行ってください。

### 自分に合わせてカスタマイズする

<AiPrompt>
  Switch to one full payment at booking instead of a deposit and balance.
</AiPrompt>

<AiPrompt>
  Email the customer a receipt after the deposit and after the balance charge.
</AiPrompt>

### トラブルシューティング

* **デポジットは成功したが予約が確定されない：** AgentにStripeの支払い成功イベントをデータベースの予約ステータスに接続するよう依頼し、別の予約でもう一度テストしてください。
* **AgentからStripeキーの貼り付けやWebhookの設定を求められる：** 代わりにReplit Stripe connectorを使うようAgentに伝えてください。同じ環境でconnectorと独自のキーを混在させると競合が発生します。
* **公開時にライブStripeアカウントの接続を求められる：** サンドボックスではテスト決済しか受け付けられません。[公開する](/ja/features/monetization/stripe-payments#go-live)の説明に従い、**Publish**ペインからライブアカウントを接続してください。
* **モバイルアプリでサブスクリプションが必要：** 代わりに[RevenueCatサブスクリプション](/ja/features/monetization/revenuecat-subscriptions)を使用してください。

## Your own Stripe keys

Connect Stripe yourself: store your own API keys in Secrets, take payments with the Stripe SDK, and
receive payment events through a webhook. Use this path when you already manage a Stripe account
and want full control over the setup.

<Warning>
  This is a manual setup. You create and rotate the keys, register the webhook, and keep the
  integration working. Replit doesn't manage it. For a setup without API keys, use the
  [Replit Stripe connector](/use-cases/accept-payments-with-stripe#replit-stripe-connector).
</Warning>

### Before you start with your own keys

Copy your test API keys from the Stripe Dashboard and add them to your app's **Secrets**.
Add the webhook signing secret later, when you start the listener described below.

| Secret | Value |
| - | - |
| `STRIPE_SECRET_KEY` | Your secret key (`sk_...`) or restricted key (`rk_...`). This exact name is required. |
| `STRIPE_PUBLISHABLE_KEY` | Your publishable key (`pk_...`), used in the browser. |
| `STRIPE_WEBHOOK_SECRET` | The signing secret (`whsec_...`) from your development listener, or from your live webhook endpoint in production. |

Keep test keys in development. Configure live keys separately in your published app's secrets.

To add a key, select **Tools** in the Project Editor, then **Secrets** under **Setup**.
Select **New Secret**, enter the exact name in **Key**, enter your Stripe key in **Value**, and select **Add Secret**.

<Frame caption="Enter the exact secret name in Key. The example leaves Value empty; enter your own key there.">
  <img src="https://mintcdn.com/replit/2n-A_ptJoYn-gb3a/images/stripe/secret-name-context.png?fit=max&auto=format&n=2n-A_ptJoYn-gb3a&q=85&s=1133c28885534c63747df325de6ba576" alt="Project Editor with Secrets selected under Setup and the new-secret form highlighted, showing STRIPE_SECRET_KEY in Key and an empty Value field" width="2720" height="2040" data-path="images/stripe/secret-name-context.png" />
</Frame>

After completing the webhook setup below, your Secrets list contains the three names with their values hidden:

<Frame>
  <img src="https://mintcdn.com/replit/TBbCBDsd8nVQwxq3/images/velocity/add-payments/stripe-secrets.png?fit=max&auto=format&n=TBbCBDsd8nVQwxq3&q=85&s=80f25ad62982cb96274ab45692f7baff" alt="Replit Secrets pane showing the STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY, and STRIPE_WEBHOOK_SECRET secrets" width="1280" height="720" data-path="images/velocity/add-payments/stripe-secrets.png" />
</Frame>

### Prompt the agent for manual setup

<AiPrompt>
  Add Stripe Checkout to this app with the Stripe SDK and my own keys. Don't use the Replit Stripe
  connector. Read the secret key from STRIPE\_SECRET\_KEY and the publishable key from
  STRIPE\_PUBLISHABLE\_KEY. Add a webhook endpoint that verifies Stripe signatures with
  STRIPE\_WEBHOOK\_SECRET and marks orders as paid on checkout.session.completed. Tell me the
  endpoint path to register in Stripe, and give me a test checklist.
</AiPrompt>

### Test the manual integration

Agent adds checkout and a webhook endpoint. For development, follow Stripe's
[webhooks quickstart](https://docs.stripe.com/webhooks/quickstart) to install and authenticate the
Stripe CLI in your project's Shell. Ask Agent for your server's local port and webhook path.

Run the listener in that same environment, replacing the example port and path with your app's values:

```sh theme={null}
stripe listen --forward-to localhost:4242/webhook
```

Save the signing secret printed by `stripe listen` as `STRIPE_WEBHOOK_SECRET` in your development
Secrets, then restart your app so it reads the value. Keep both the app and the listener running
while you test in Preview. The listener forwards test events to the development server, so you
don't need a published URL or a public development webhook endpoint yet.

Watch the walkthrough to see the full setup:

<YouTubeEmbed videoId="TW8xaPERcRU" title="Stripe Checkout in Replit" />

Test with Stripe's test card `4242 4242 4242 4242`, any future expiry, and any 3-digit CVC.
Confirm the order shows as paid in your app and the Stripe CLI reports a successful response
from your webhook endpoint.

### Publish with your own live keys

Keep your development test keys and listener secret unchanged. In **Publishing > Adjust settings >
Production app secrets**, set `STRIPE_SECRET_KEY` and `STRIPE_PUBLISHABLE_KEY` to your live keys.
See [Manage production secrets](/core-concepts/project-editor/app-setup/secrets#manage-production-secrets).

Register a separate live-mode webhook endpoint in Stripe using your published app URL plus the
webhook path. Set `STRIPE_WEBHOOK_SECRET` in **Production app secrets** to that endpoint's signing
secret, not the CLI listener's secret, then publish or republish.
If this is your first publish, establish the published URL first, then finish the endpoint and
secret setup and republish before accepting payments.

If development uses the Replit Stripe connector's sandbox and production uses your own keys,
publishing checks `STRIPE_SECRET_KEY`:

* It must hold a live secret key (`sk_live_...`) or a live restricted key (`rk_live_...`). Test keys, publishable keys, and keys stored under other names don't count.
* Without a valid live key, publishing stops with **Connect a live Stripe account before publishing.**
* Products and prices don't sync from the sandbox to your live account. Create them in your live Stripe account yourself.

### Customize the manual integration

<AiPrompt>
  Handle refunds and failed payments from the webhook, and show the status on each order.
</AiPrompt>

<AiPrompt>
  Add a monthly subscription with Stripe Billing, using the same keys and webhook.
</AiPrompt>

### Troubleshoot the manual integration

* **Publishing says "Connect a live Stripe account before publishing":** check that the secret is named exactly `STRIPE_SECRET_KEY` and holds a live key that starts with `sk_live_` or `rk_live_`.
* **Webhook events fail signature checks:** make sure `STRIPE_WEBHOOK_SECRET` matches the endpoint's signing secret, and that you use the live-mode secret in production.
* **The connector and your own keys are both set up in one environment:** remove one of them. To remove the connector, see [Update or remove the Stripe connection](/features/monetization/stripe-payments#update-or-remove-the-stripe-connection).

## 関連情報

<CardGroup cols={2}>
  <Card title="決済とStripeのヘルプ" href="/ja/help/payments-and-stripe">
    セットアップ方法、必須のシークレット名、公開時のエラーに関する回答。
  </Card>

  <Card title="Stripe決済統合" href="/ja/features/monetization/stripe-payments">
    サンドボックスからライブアカウントまで、Stripe connectorの仕組み。
  </Card>
</CardGroup>