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

# Accepter des paiements avec Stripe

> Acceptez des paiements avec le connecteur Stripe de Replit ou vos propres clés Stripe. Choisissez une configuration, testez le paiement et configurez les paiements en production.

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

Acceptez des paiements dans votre application avec le connecteur Stripe de Replit ou vos propres clés API Stripe.
Choisissez le connecteur pour une configuration de bac à sable gérée, ou utilisez vos propres clés lorsque vous avez besoin de contrôler l'intégration.

## Choisir une seule méthode par environnement

| Méthode | Configuration | Emplacement |
| - | - | - |
| [Connecteur Stripe de Replit](#connecteur-stripe-de-replit) | Agent configure un bac à sable Stripe, puis vous connectez votre compte en production. Disponible sur les plans payants. | **Intégrations > Stripe** |
| [Vos propres clés Stripe](#your-own-stripe-keys) | Vous gérez vous-même les clés API, le SDK Stripe et les points de terminaison de webhook. | **Secrets** |

Utilisez une seule méthode dans chaque environnement, pas les deux à la fois. Les combiner dans le même environnement provoque des conflits de connexion.
Vous pouvez utiliser des méthodes différentes selon les environnements, par exemple le bac à sable du connecteur en développement et vos propres clés en production.

## Idéal pour

* Les fondateurs qui gèrent des réservations, des locations ou des rendez-vous et ont besoin d'acomptes qui protègent leur temps.
* Les créateurs qui veulent des paiements fonctionnels dans un bac à sable dès aujourd'hui et des paiements en production sans configuration manuelle de clés.
* Les équipes disposant d'un compte Stripe existant ou d'exigences nécessitant une intégration manuelle du SDK et des webhooks.

## Connecteur Stripe de Replit

Utilisez cette méthode pour prélever un acompte remboursable à la réservation et facturer le solde plus tard, sans coller de clés API.

### Connecteurs

<Connectors
  items={[
{
  id: "stripe",
  name: "Stripe",
  why: "Paiement en bac à sable, moyens de paiement enregistrés, remboursements et connexion au compte en production",
},
]}
/>

### Avant de commencer

Partez d'une application avec un backend, une connexion et une base de données, afin que chaque réservation puisse stocker l'état de son paiement.
Choisissez ensuite le calcul :

* **Acompte à la réservation :** un montant fixe, par exemple 500 \$, ou un pourcentage du total.
* **Solde plus tard :** le reste du prix, prélevé sur la carte enregistrée à l'arrivée du client.
* **Délai de remboursement :** jusqu'à quand un client peut annuler et récupérer son acompte. 48 heures est une valeur par défaut courante.

### Donner le prompt à Agent

<AiPrompt>
  Ajoute des paiements d'acompte et de solde à cette application avec le connecteur Stripe de Replit, en commençant
  dans le bac à sable Stripe. À la réservation, prélève un acompte remboursable de \[500 \$] et enregistre le moyen
  de paiement du client. À l'arrivée du client, facture le solde restant sur le moyen de paiement enregistré. Si
  le client annule plus de \[48 heures] avant la réservation, rembourse l'acompte en totalité. En deçà de ce
  délai, conserve-le. Enregistre l'état de l'acompte et la référence de la carte enregistrée pour chaque réservation. Donne-moi une liste de tests pour l'acompte réussi, l'acompte refusé, le prélèvement du solde et le remboursement après annulation.
</AiPrompt>

Agent propose le connecteur Stripe et configure un bac à sable Stripe pour vous. Vous n'avez pas besoin de copier
de clés depuis le tableau de bord Stripe.

### À quoi s'attendre

Agent ajoute le paiement, les flux d'acompte et de solde, et la règle de remboursement. Testez-les dans Preview avec
la carte de test Stripe `4242 4242 4242 4242`, n'importe quelle date d'expiration future et n'importe quel CVC à 3 chiffres :

1. Effectuez une réservation et payez l'acompte. Vérifiez que la réservation affiche l'acompte comme payé et une carte enregistrée.
2. Prélevez le solde depuis la réservation. Vérifiez qu'il apparaît comme payé.
3. Annulez une deuxième réservation en dehors du délai de remboursement. Vérifiez le remboursement dans le tableau de bord de votre bac à sable Stripe.
4. Annulez une troisième réservation dans le délai. Vérifiez que l'application conserve l'acompte et explique pourquoi.
5. Payez avec la carte de test refusée de Stripe `4000 0000 0000 0002`. Vérifiez que la réservation n'est pas confirmée.

Lorsque les flux fonctionnent, connectez votre compte Stripe en production depuis le panneau **Publier**. Suivez
[Mise en ligne](/fr/features/monetization/stripe-payments#mise-en-ligne) sur la page Stripe Payments, puis effectuez une
réservation réelle à faible coût avec votre propre carte avant de partager l'application.

### Adapter à vos besoins

<AiPrompt>
  Passe à un paiement unique complet à la réservation au lieu d'un acompte et d'un solde.
</AiPrompt>

<AiPrompt>
  Envoie au client un reçu par e-mail après l'acompte et après le prélèvement du solde.
</AiPrompt>

### Dépannage

* **L'acompte est payé mais la réservation n'est pas confirmée :** demandez à Agent de relier l'événement de paiement réussi de Stripe à l'état de la réservation dans la base de données, puis testez une autre réservation.
* **Agent vous demande de coller des clés Stripe ou de configurer un webhook :** dites à Agent d'utiliser plutôt le connecteur Stripe de Replit. Mélanger le connecteur et vos propres clés dans le même environnement provoque des conflits.
* **La publication vous demande de connecter un compte Stripe en production :** le bac à sable n'accepte que des paiements de test. Connectez votre compte en production depuis le panneau **Publier**, comme décrit dans [Mise en ligne](/fr/features/monetization/stripe-payments#mise-en-ligne).
* **Vous avez besoin d'abonnements pour une application mobile :** utilisez plutôt les [abonnements RevenueCat](/fr/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).

## Voir aussi

<CardGroup cols={2}>
  <Card title="Aide sur les paiements et Stripe" href="/fr/help/payments-and-stripe">
    Réponses sur les méthodes de configuration, les noms de secrets requis et les erreurs de publication.
  </Card>

  <Card title="Stripe Payments" href="/fr/features/monetization/stripe-payments">
    Comment fonctionne le connecteur Stripe, du bac à sable au compte en production.
  </Card>
</CardGroup>