# Intégrer une page de paiement à votre site

# Full embedded page 

Explorez un échantillon de code complet et fonctionnel d’une intégration avec [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) qui permet à vos clients de payer avec un formulaire intégré sur votre site web. L’exemple inclut du code côté client et côté serveur, et un composant d’interface utilisateur affiche la page de paiement.

### Installer la bibliothèque Node de Stripe

Installez le package et importez-le dans votre code. Si vous partez de zéro et qu’il vous faut un fichier package.json, vous pouvez également télécharger les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### npm

Installez la bibliothèque :

```bash
npm install --save stripe
```

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque Node de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-node).

### Installer la bibliothèque Ruby de Stripe

Installez le gem Ruby de Stripe et exigez-le dans votre code. Si vous partez de zéro et avez besoin d’un Gemfile, téléchargez les fichiers du projet à l’aide du lien dans l’éditeur de code.

#### Terminal

Installez le gem :

```bash
gem install stripe
```

#### Bundler

Ajoutez cette ligne à votre Gemfile :

```bash
gem 'stripe'
```

#### GitHub

Vous pouvez sinon télécharger le code source du gem Ruby de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-ruby).

### Installer la bibliothèque Java

Ajoutez la dépendance à votre build et importez la bibliothèque. Ou bien, si vous partez de zéro et avez besoin d’un exemple de fichier pom.xml (pour Maven), téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### Maven

Ajoutez la dépendance suivante à votre POM et remplacez {VERSION} par le numéro de version que vous souhaitez utiliser.

```bash
<dependency>\n<groupId>com.stripe</groupId>\n<artifactId>stripe-java</artifactId>\n<version>{VERSION}</version>\n</dependency>
```

#### Gradle

Ajoutez la dépendance à votre fichier build.gradle et remplacez {VERSION} par le numéro de version que vous souhaitez utiliser.

```bash
implementation "com.stripe:stripe-java:{VERSION}"
```

#### GitHub

Téléchargez le fichier JAR directement [depuis GitHub](https://github.com/stripe/stripe-java/releases/latest).

### Installer le package Python de Stripe

Installez le package Stripe et importez-le dans votre code. Si vous partez de zéro et qu’il vous faut un fichier requirements.txt, téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### pip

Installez le package via pip&nbsp;:

```bash
pip3 install stripe
```

#### GitHub

Téléchargez le code source de la bibliothèque stripe-python directement [depuis GitHub](https://github.com/stripe/stripe-python).

### Installer la bibliothèque PHP

Installez la bibliothèque avec composer et initialisez-la avec votre clé API secrète. Si vous partez de zéro et que vous avez besoin d’un fichier composer.json, vous pouvez également télécharger les fichiers à l’aide du lien de téléchargement dans l’éditeur de code.

#### Composer

Installez la bibliothèque&nbsp;:

```bash
composer require stripe/stripe-php
```

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque php de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-php).

### Configurer votre serveur

Ajoutez la dépendance à votre build et importez la bibliothèque. Si vous partez de zéro et avez besoin d’un fichier go.mod, téléchargez les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

#### Go

Veillez à initialiser avec des modules Go&nbsp;:

```bash
go get -u github.com/stripe/stripe-go/v85
```

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque Go de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-go).

### Installer la bibliothèque Stripe.net

Installez le package avec .NET ou NuGet. Si vous partez de zéro, vous pouvez également télécharger les fichiers qui contiennent un fichier .csproj configuré.

#### .NET

Installez la bibliothèque&nbsp;:

```bash
dotnet add package Stripe.net
```

#### NuGet

Installez la bibliothèque&nbsp;:

```bash
Install-Package Stripe.net
```

#### GitHub

Vous pouvez sinon télécharger le code source de la bibliothèque .NET de Stripe directement [depuis GitHub](https://github.com/stripe/stripe-dotnet).

### Installer les bibliothèques Stripe

Installez les packages et importez-les dans votre code. Si vous partez de zéro et qu’il vous faut un fichier `package.json`, vous pouvez également télécharger les fichiers du projet à l’aide du lien de téléchargement dans l’éditeur de code.

Installez les bibliothèques&nbsp;:

```bash
npm install --save stripe @stripe/stripe-js next
```

### Créer une session Checkout

Ajoutez un endpoint sur votre serveur qui crée une *Checkout Session* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription), en définissant [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) sur `embedded_page`.

La réponse de la session Checkout inclut une clé secrète du client, que celui-ci utilise pour monter Checkout. Renvoyez la [client_secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) dans votre réponse.

### Créer une session Checkout

Ajoutez à votre application une [action serveur](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) qui crée une *Checkout Session* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription), en définissant l’[ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) sur `embedded_page`.

La réponse de la session Checkout inclut une clé secrète du client, que celui-ci utilise pour monter Checkout. Renvoyer le [client_secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) de la fonction.

### Fournir une URL de redirection

Pour définir la manière dont Stripe redirige votre client après le paiement, indiquez l’URL de la page de retour dans le paramètre [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url) au moment de la création de la session Checkout. Après la tentative de paiement, Stripe redirige votre client vers la page de retour hébergée sur votre site Web.

Incluez la variable de modèle `{CHECKOUT_SESSION_ID}` dans l’URL. Avant de rediriger votre client, Checkout remplace la variable par l’ID de session Checkout. C’est à vous qu’il incombe de créer et d’héberger la page de retour sur votre site Web.

### Définir un produit à vendre

Define the products you’re selling when you create the Checkout Session by using [predefined price IDs](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-page#create-product-prices-upfront).

Conservez toujours sur votre serveur les informations sensibles relatives à l’inventaire de vos produits, notamment leur prix et leur disponibilité, pour éviter toute manipulation de la part du client.

### Choisir le mode

To handle different transaction types, adjust the `mode` parameter. For one-time payments, use `payment`. To initiate recurring payments with [subscriptions](https://docs.stripe.com/billing/subscriptions/build-subscriptions.md?payment-ui=checkout&ui=embedded-page), switch the `mode` to `subscription`. And for [setting up future payments](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=embedded-page), set the `mode` to `setup`.

### Ajouter Stripe à votre application React

Pour rester *en conformité avec la norme PCI* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) et vous assurer que les informations de paiement soient transmises directement à Stripe, sans jamais transiter par votre serveur, installez [React Stripe.js](https://docs.stripe.com/sdks/stripejs-react.md).

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Charger Stripe.js

Pour configurer la bibliothèque Stripe, appelez `loadStripe()` avec votre clé API publiable Stripe.

### Charger Stripe.js

Utilisez *Stripe.js* (Use Stripe.js’ APIs to tokenize customer information, collect sensitive card data, and accept payments with browser payment APIs) pour rester en conformité avec la *norme PCI* (Any party involved in processing, transmitting, or storing credit card data must comply with the rules specified in the Payment Card Industry (PCI) Data Security Standards. PCI compliance is a shared responsibility and applies to both Stripe and your business) en veillant à ce que les informations de paiement soient envoyées directement à Stripe sans passer par votre serveur. Chargez toujours Stripe.js directement à partir de *js.stripe.com* pour maintenir votre conformité. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

### Définir le formulaire de paiement

Pour collecter les informations du client en toute sécurité, créez un espace réservé vide `div`, dans lequel Stripe va insérer un iframe.

### Initialiser Stripe.js

Initialisez Stripe.js avec votre [clé API publiable](https://docs.stripe.com/keys.md#obtain-api-keys).

### Récupérer la clé secrète du client de la session Checkout

Créez une fonction `fetchClientSecret` asynchrone qui demande à votre serveur de [créer une session Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) et de récupérer la clé secrète du client.

### Récupérer la clé secrète du client de la session Checkout

Importez l’Action Serveur pour [créer une session de paiement](https://docs.stripe.com/api/checkout/sessions/create.md) et récupérer la clé secrète du client, puis passez-la au paramètre [`fetchClientSecret`](https://docs.stripe.com/js/embedded_checkout/create#embedded_checkout_create-options-fetchClientSecret).

### Initialiser Checkout

Initialisez Checkout avec votre fonction `fetchClientSecret` et montez-le sur l’espace réservé `<div>` de votre formulaire de paiement. Checkout s’affiche dans un iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS.

Évitez de placer Checkout dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

### Initialiser Checkout

Pour permettre aux composants enfants d’accéder au service Stripe via le client Checkout intégré, transmettez la promesse résultante de `loadStripe` et la clé secrète du client comme `option` au fournisseur Checkout intégré.

### Créer un endpoint pour récupérer une session Checkout

Ajoutez un endpoint pour récupérer l’état d’une session Checkout.

### Ajouter une page de retour

Pour présenter les informations de commande à votre client, créez une page de retour pour l’URL que vous avez fournie en tant que `return_url` de la session Checkout. Stripe redirige le client vers cette page une fois le paiement abouti.

### Ajouter un composant de retour

Pour présenter les informations de commande à votre client, ajoutez un nouveau composant de routage et de retour pour l’URL que vous avez fournie en tant que `return_url` de la session Checkout. Stripe redirige le client vers cette page une fois le paiement abouti.

### Ajouter une page de retour

Afin d’afficher les informations de commande pour votre client, ajoutez un fichier sous `pages/` pour l’URL que vous avez fournie en tant que `return_url` de la session Checkout. Stripe redirige votre client vers cette page après son paiement.

### Récupérer une session Checkout

Dès que votre page de retour est chargée, envoyez immédiatement une requête au endpoint de votre serveur. Utilisez l’ID de session Checkout dans l’URL pour récupérer le statut de la session Checkout.

### Gérer la session

Gérez le résultat de la session à l’aide de son état&nbsp;:

- `complete`&nbsp;: le paiement a abouti. Utilisez les informations de la session Checkout pour afficher une page de confirmation.
- `open`&nbsp;: le paiement a échoué ou a été annulé. Montez à nouveau Checkout pour que votre client puisse effectuer une nouvelle tentative.

### Définir vos variables d’environnement

Ajoutez vos clés publiques et secrètes à un fichier `.env`. Next.js la charge automatiquement dans votre application en tant que [variable d’environnement](https://nextjs.org/docs/basic-features/environment-variables).

Chaque endpoint webhook a une clé de signature unique. Les webhooks sont gérés dans [Workbench](https://docs.stripe.com/workbench.md) dans le Dashboard. Vous pouvez trouver la clé dans la vue détaillée de la destination pour votre endpoint webhook dans l’onglet [Webhooks](https://dashboard.stripe.com/workbench/webhooks) de Workbench. Si vous testez localement avec la Stripe CLI, vous pouvez également obtenir la clé à partir de la sortie de la CLI en utilisant la commande `stripe listen`.

Pour inclure une clé de signature de endpoint webhook pour écouter les [événements](https://docs.stripe.com/event-destinations.md), allez dans l’onglet [destinations d’événements](https://dashboard.stripe.com/workbench/webhooks) de Workbench ou utilisez la [Stripe CLI](https://docs.stripe.com/stripe-cli.md).

### Exécuter l’application

Démarrer votre serveur et accéder à <http://localhost:4242/checkout.html>

### Exécuter l’application

Démarrer votre serveur et accéder à <http://localhost:3000/checkout>

### Exécuter l’application

Démarrez votre application avec `npm run dev` et accédez à <http://localhost:3000>

### Faire un essai

Cliquez sur le bouton de paiement pour finaliser le paiement. Vous serez ensuite redirigé vers la page de retour spécifiée.

Si la page de retour s’affiche et que le paiement figure dans la liste des [paiements réussis](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful) sur le Dashboard, cela signifie que votre intégration fonctionne comme prévu. Utilisez l’une des cartes de test suivantes pour simuler un paiement&nbsp;:

| Scenario                            | Card Number      |
| ----------------------------------- | ---------------- |
| Payment succeeds                    | 4242424242424242 |
| Payment requires 3DS authentication | 4000002500003155 |
| Payment is declined                 | 4000000000009995 |

## Félicitations&nbsp;!

Vous disposez d’une intégration Checkout de base qui fonctionne. Découvrez maintenant comment personnaliser l’apparence de votre page de paiement et automatiser la collecte des taxes.

### Personnaliser la page de paiement

[Personnalisez](https://docs.stripe.com/payments/checkout/customization.md) l’apparence du formulaire intégré en&nbsp;:

- Ajoutant votre thème de couleur et votre police dans vos [paramètres de marque](https://dashboard.stripe.com/settings/branding/checkout).
- Utilisant l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions/create.md) pour activer des fonctionnalités supplémentaires, comme la collecte d’adresses et le pré-remplissage des données clients.

### Renseigner automatiquement les données client

Utilisez le paramètre [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) pour renseigner automatiquement l’adresse e-mail du client dans le champ de saisie correspondant. Vous pouvez également transmettre un ID de [client](https://docs.stripe.com/api/customers.md) dans le champ `customer`, ce qui permettra de remplir automatiquement le champ réservé à cet effet avec l’adresse e-mail enregistrée pour ce client.

### Choisir un bouton d’envoi

Modifiez le texte du bouton d’envoi en `pay`, `donate` ou `book` en définissant le [submit_type](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-submit_type). Le texte par défaut est `pay`.

### Collecter les informations de facturation et de livraison

Utilisez les paramètres [billing_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) et [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) pour collecter l’adresse de votre client. [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) exige une liste des pays autorisés (`allowed_countries`), que Checkout affiche dans un menu déroulant sur la page.

### Automatiser l’encaissement des taxes

Calculez et collectez le montant exact de la taxe sur vos transactions Stripe. En savoir plus sur la [taxe Stripe](https://docs.stripe.com/tax.md) et [comment l’ajouter à Checkout](https://docs.stripe.com/tax/checkout.md).

### Configurer Stripe Tax dans le Dashboard

[Activez Stripe Tax](https://dashboard.stripe.com/tax) pour suivre vos obligations fiscales, percevoir automatiquement les taxes et accéder aux rapports dont vous avez besoin pour remplir vos déclarations.

### Ajouter le paramètre de calcul automatique des taxes

Définissez le paramètre `automatic_tax` sur `enabled: true`.

### Nouveaux clients et clients récurrents

Par défaut, Checkout ne crée un [client](https://docs.stripe.com/api/customers.md) que lorsqu’un client est requis (par exemple, pour les abonnements). Sinon, Checkout utilise des [clients invités](https://docs.stripe.com/payments/checkout/guest-customers.md) pour regrouper les paiements dans le Dashboard. Vous pouvez éventuellement configurer Checkout pour qu’il crée toujours un nouveau client ou pour qu’il spécifie un client récurrent.

### Toujours créer des clients

Pour toujours créer des clients lorsqu’ils ne sont pas fournis, définissez [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) sur `'always'`.

### Indiquer les clients récurrents

Pour associer une session Checkout à un client existant, fournissez le paramètre [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) lors de la création de la session. Si vous utilisez Accounts&nbsp;v2, vous pouvez également transmettre un ID de compte dans le champ [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) afin de préremplir l’adresse e-mail associée. Pour en savoir plus, consultez la [différence entre les Customers&nbsp;v1 et les Accounts&nbsp;v2](https://docs.stripe.com/connect/use-accounts-as-customers.md).

// This test secret API key is a placeholder. Don't include personal details in requests with this key.
// To see your test secret API key embedded in code samples, sign in to your Stripe account.
// You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
const stripe = require('stripe')('<<YOUR_SECRET_KEY>>');
const YOUR_DOMAIN = 'http://localhost:4242';
const YOUR_DOMAIN = 'http://localhost:3000';
  const session = await stripe.checkout.sessions.create({

    ui_mode: 'embedded_page',
    customer_email: 'customer@example.com',
    submit_type: 'donate',
    billing_address_collection: 'auto',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [
      {
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1,
      },
    ],
    mode: {{CHECKOUT_MODE}},
    return_url: `${YOUR_DOMAIN}/return?session_id={CHECKOUT_SESSION_ID}`,
    return_url: `${YOUR_DOMAIN}/return.html?session_id={CHECKOUT_SESSION_ID}`,
    automatic_tax: {enabled: true},
    customer_creation: 'always',
    // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    // customer: '{{CUSTOMER_ID}}'
  });

  res.send({clientSecret: session.client_secret});
app.get('/session-status', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);

  res.send({
    status: session.status,
    customer_email: session.customer_details.email
  });
});
{
  "name": "stripe-sample",
  "version": "1.0.0",
  "description": "A sample Stripe implementation",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "author": "stripe-samples",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^21.0.1"
  }
}
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "21.0.1"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
\# This test secret API key is a placeholder. Don't include personal details in requests with this key.
# To see your test secret API key embedded in code samples, sign in to your Stripe account.
# You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
\# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
  session = client.v1.checkout.sessions.create({

    ui_mode: 'embedded_page',
    customer_email: 'customer@example.com',
    submit_type: 'donate',
    billing_address_collection: 'required',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [{
      \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
      price: '{{PRICE_ID}}',
      quantity: 1,
    }],
    mode: {{CHECKOUT_MODE}},
    return_url: YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}',
    return_url: YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}',
    automatic_tax: {enabled: true},
    customer_creation: 'always',
    \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    # customer: '{{CUSTOMER_ID}}'
  })

  {clientSecret: session.client_secret}.to_json
get '/session-status' do
  session = client.v1.checkout.sessions.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
import stripe
\# This test secret API key is a placeholder. Don't include personal details in requests with this key.
# To see your test secret API key embedded in code samples, sign in to your Stripe account.
# You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
\# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = stripe.StripeClient('<<YOUR_SECRET_KEY>>')
YOUR_DOMAIN = 'http://localhost:4242'
YOUR_DOMAIN = 'http://localhost:3000'
        session = client.v1.checkout.sessions.create(params={
            'ui_mode': 'embedded_page',
            'customer_email': 'customer@example.com',
            'submit_type': 'donate',
            'billing_address_collection': 'auto',
            'shipping_address_collection': {
              'allowed_countries': ['US', 'CA'],
            },
            'line_items': [
                {
                    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    'price': '{{PRICE_ID}}',
                    'quantity': 1,
                },
            ],
            'mode': {{CHECKOUT_MODE}},
            'return_url': YOUR_DOMAIN + '/return.html?session_id={CHECKOUT_SESSION_ID}',
            'return_url': YOUR_DOMAIN + '/return?session_id={CHECKOUT_SESSION_ID}',
            'automatic_tax': {'enabled': True},
            'customer_creation': 'always',
            \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
            # 'customer': '{{CUSTOMER_ID}}'
        })
    return jsonify(clientSecret=session.client_secret)
@app.route('/session-status', methods=['GET'])
def session_status():
  session = client.v1.checkout.sessions.retrieve(request.args.get('session_id'))

  return jsonify(status=session.status, customer_email=session.customer_details.email)
certifi==2026.1.4
chardet==5.2.0
click==8.3.1
Flask==3.1.2
idna==3.11
itsdangerous==2.2.0
Jinja2==3.1.6
MarkupSafe==3.0.3
requests==2.32.5
stripe==15.0.0
toml==0.10.2
Werkzeug==3.1.5
$stripe = new \Stripe\StripeClient($stripeSecretKey);
$YOUR_DOMAIN = 'http://localhost:4242';
$YOUR_DOMAIN = 'http://localhost:3000';

$checkout_session = $stripe->checkout->sessions->create([

  'ui_mode' => 'embedded_page',
  'customer_email' => 'customer@example.com',
  'submit_type' => 'donate',
  'billing_address_collection' => 'required',
  'shipping_address_collection' => [
    'allowed_countries' => ['US', 'CA'],
  ],
  'line_items' => [[
    \# Provide the exact Price ID (for example, price_1234) of the product you want to sell
    'price' => '{{PRICE_ID}}',
    'quantity' => 1,
  ]],
  'mode' => {{CHECKOUT_MODE}},
  'return_url' => $YOUR_DOMAIN . '/return.html?session_id={CHECKOUT_SESSION_ID}',
  'return_url' => $YOUR_DOMAIN . '/return?session_id={CHECKOUT_SESSION_ID}',
  'automatic_tax' => [
    'enabled' => true,
  ],
  'customer_creation' => 'always',
  \# Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
  # 'customer' => '{{CUSTOMER_ID}}'
]);

  echo json_encode(array('clientSecret' => $checkout_session->client_secret));
try {
  // retrieve JSON from POST body
  $jsonStr = file_get_contents('php://input');
  $jsonObj = json_decode($jsonStr);

  $session = $stripe->checkout->sessions->retrieve($jsonObj->session_id);

  echo json_encode(['status' => $session->status, 'customer_email' => $session->customer_details->email]);
  http_response_code(200);
} catch (Error $e) {
  http_response_code(500);
  echo json_encode(['error' => $e->getMessage()]);
}
// Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
$stripeSecretKey = '<<YOUR_SECRET_KEY>>';
            // This test secret API key is a placeholder. Don't include personal details in requests with this key.
            // To see your test secret API key embedded in code samples, sign in to your Stripe account.
            // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
            // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
            services.AddSingleton(new StripeClient("<<YOUR_SECRET_KEY>>"));
            var domain = "http://localhost:4242";
            var domain = "http://localhost:3000";

                UiMode = "embedded_page",
                CustomerEmail = "customer@example.com",
                SubmitType = "donate",
                BillingAddressCollection = "auto",
                ShippingAddressCollection = new SessionShippingAddressCollectionOptions
                {
                  AllowedCountries = new List<string>
                  {
                    "US",
                    "CA",
                  },
                },
                LineItems = new List<SessionLineItemOptions>
                {
                  new SessionLineItemOptions
                  {
                    // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                    Price = "{{PRICE_ID}}",
                    Quantity = 1,
                  },
                },
                Mode = {{CHECKOUT_MODE}},
                ReturnUrl = domain + "/return.html?session_id={CHECKOUT_SESSION_ID}",
                ReturnUrl = domain + "/return?session_id={CHECKOUT_SESSION_ID}",
                AutomaticTax = new SessionAutomaticTaxOptions { Enabled = true },
                CustomerCreation = "always",
                // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
                // Customer="cus_RnhPlBnbBbXapY",
            Session session = _client.V1.Checkout.Sessions.Create(options);

            return Json(new {clientSecret = session.ClientSecret});
    [Route("session-status")]
    [ApiController]
    public class SessionStatusController : Controller
    {
        private readonly StripeClient _client;

        public SessionStatusController(StripeClient client)
        {
            _client = client;
        }

        [HttpGet]
        public ActionResult SessionStatus([FromQuery] string session_id)
        {
            Session session = _client.V1.Checkout.Sessions.Get(session_id);

            return Json(new {status = session.Status,  customer_email = session.CustomerDetails.Email});
        }
    }
    "github.com/stripe/stripe-go/v85"
  // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
  sc := stripe.NewClient("<<YOUR_SECRET_KEY>>")
  domain := "http://localhost:4242"
  domain := "http://localhost:3000"
  params := &stripe.CheckoutSessionCreateParams{

    UIMode: stripe.String("embedded_page"),
    ReturnURL: stripe.String(domain + "/return.html?session_id={CHECKOUT_SESSION_ID}"),
    ReturnURL: stripe.String(domain + "/return?session_id={CHECKOUT_SESSION_ID}"),
    CustomerEmail: stripe.String("customer@example.com"),
    SubmitType: stripe.String("donate"),
    BillingAddressCollection: stripe.String("auto"),
    ShippingAddressCollection: &stripe.CheckoutSessionShippingAddressCollectionParams{
      AllowedCountries: stripe.StringSlice([]string{
        "US",
        "CA",
      }),
    },
    LineItems: []*stripe.CheckoutSessionCreateLineItemParams{
      {
        // Provide the exact Price ID (for example, price_1234) of the product you want to sell
        Price: stripe.String("{{PRICE_ID}}"),
        Quantity: stripe.Int64(1),
      },
    },
    Mode: stripe.String("{{CHECKOUT_MODE}}"),
    AutomaticTax: &stripe.CheckoutSessionAutomaticTaxParams{Enabled: stripe.Bool(true)},
    CustomerCreation: stripe.String(stripe.CheckoutSessionCustomerCreationAlways),
    // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
    // Customer:   stripe.String("{{CUSTOMER_ID}}"),
  }

  s, err := sc.V1CheckoutSessions.Create(context.TODO(), params)

  if err != nil {
    log.Printf("sc.V1CheckoutSessions.Create: %v", err)
  }

  writeJSON(w, struct {
    ClientSecret string `json:"clientSecret"`
  }{
    ClientSecret: s.ClientSecret,
  })
func retrieveCheckoutSession(sc *stripe.Client, w http.ResponseWriter, r *http.Request) {
  s, _ := sc.V1CheckoutSessions.Retrieve(context.TODO(), r.URL.Query().Get("session_id"), nil)

  writeJSON(w, struct {
    Status string `json:"status"`
    CustomerEmail string `json:"customer_email"`
  }{
    Status: string(s.Status),
    CustomerEmail: string(s.CustomerDetails.Email),
  })
}
require github.com/stripe/stripe-go/v85 v85.0.0
    // This test secret API key is a placeholder. Don't include personal details in requests with this key.
    // To see your test secret API key embedded in code samples, sign in to your Stripe account.
    // You can also find your test secret API key at https://dashboard.stripe.com/test/apikeys.
    // Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
    StripeClient client = new StripeClient("<<YOUR_SECRET_KEY>>");
        String YOUR_DOMAIN = "http://localhost:4242";
        String YOUR_DOMAIN = "http://localhost:3000";
        SessionCreateParams params =
          SessionCreateParams.builder()

            .setUiMode(SessionCreateParams.UiMode.EMBEDDED_PAGE)
            .setCustomerEmail("customer@example.com")
            .setSubmitType(SessionCreateParams.SubmitType.DONATE)
            .setBillingAddressCollection(SessionCreateParams.BillingAddressCollection.REQUIRED)
            .setShippingAddressCollection(
              SessionCreateParams.ShippingAddressCollection.builder()
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.CA)
                .addAllowedCountry(SessionCreateParams.ShippingAddressCollection.AllowedCountry.US)
                .build())
            .setMode({{CHECKOUT_MODE}})
            .setReturnUrl(YOUR_DOMAIN + "/return?session_id={CHECKOUT_SESSION_ID}")
            .setReturnUrl(YOUR_DOMAIN + "/return.html?session_id={CHECKOUT_SESSION_ID}")
            .setAutomaticTax(
              SessionCreateParams.AutomaticTax.builder()
                .setEnabled(true)
                .build())
            .setCustomerCreation(SessionCreateParams.CustomerCreation.ALWAYS)
            // Provide the Customer ID (for example, cus_1234) for an existing customer to associate it with this session
            // .setCustomer("{{CUSTOMER_ID}}")
            .addLineItem(
              SessionCreateParams.LineItem.builder()
                .setQuantity(1L)
                // Provide the exact Price ID (for example, price_1234) of the product you want to sell
                .setPrice("{{PRICE_ID}}")
                .build())
            .build();
      Map<String, String> map = new HashMap();
      map.put("clientSecret", session.getRawJsonObject().getAsJsonPrimitive("client_secret").getAsString());


      return map;
    get("/session-status", (request, response) -> {
      Session session = client.v1().checkout().sessions().retrieve(request.queryParams("session_id"));

      Map<String, String> map = new HashMap();
      map.put("status", session.getRawJsonObject().getAsJsonPrimitive("status").getAsString());
      map.put("customer_email", session.getRawJsonObject().getAsJsonObject("customer_details").getAsJsonPrimitive("email").getAsString());

      return map;
    }, gson::toJson);
    <script src="https://js.stripe.com/dahlia/stripe.js"></script>
      <div id="checkout">
        <!-- Checkout will insert the payment form here -->
      </div>
const stripe = Stripe("<<YOUR_PUBLISHABLE_KEY>>");
initialize();

// Create a Checkout Session
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const response = await fetch("/checkout.php", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };
  const checkout = await stripe.createEmbeddedCheckoutPage({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}
<!DOCTYPE html>
<html>
<head>
  <title>Thanks for your order!</title>
  <link rel="stylesheet" href="style.css">
  <script src="return.js" defer></script>
</head>
<body>
  <section id="success" class="hidden">
    <p>
      We appreciate your business! A confirmation email will be sent to <span id="customer-email"></span>.

      If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </section>
</body>
</html>
initialize();

async function initialize() {
  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const sessionId = urlParams.get('session_id');
  const response = await fetch(`/session-status?session_id=${sessionId}`);
  const response = await fetch("/status.php", {
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    method: "POST",
    body: JSON.stringify({ session_id: sessionId }),
  });
  const session = await response.json();
  if (session.status == 'open') {
    window.location.replace('http://localhost:4242/checkout.html')
  } else if (session.status == 'complete') {
    document.getElementById('success').classList.remove('hidden');
    document.getElementById('customer-email').textContent = session.customer_email
  }
}
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-router-dom": "^6.16.0",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "react-router-dom": "^6.16.0"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242/",
  "scripts": {
    "start": "react-scripts start --ignore client",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
import React, { useCallback, useState, useEffect } from "react";
import {loadStripe} from '@stripe/stripe-js';
import {
  EmbeddedCheckoutProvider,
  EmbeddedCheckout
} from '@stripe/react-stripe-js';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
// This is a public sample test API key.
// Don’t submit any personally identifiable information in requests made with this key.
// Sign in to see your own test API key embedded in code samples.
const stripePromise = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
  const fetchClientSecret = useCallback(() => {
    // Create a Checkout Session
    return fetch("/create-checkout-session", {
      method: "POST",
    })
    return fetch("/checkout.php", {
      method: "POST",
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  const options = {fetchClientSecret};
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={options}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
const Return = () => {
  const [status, setStatus] = useState(null);
  const [customerEmail, setCustomerEmail] = useState('');

  useEffect(() => {
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const sessionId = urlParams.get('session_id');

    fetch(`/session-status?session_id=${sessionId}`)
    fetch("/status.php", {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify({ session_id: sessionId }),
    })
      .then((res) => res.json())
      .then((data) => {
        setStatus(data.status);
        setCustomerEmail(data.customer_email);
      });
  }, []);
  if (status === 'open') {
    return (
      <Navigate to="/checkout" />
    )
  }

  if (status === 'complete') {
    return (
      <section id="success">
        <p>
          We appreciate your business! A confirmation email will be sent to {customerEmail}.

          If you have any questions, please email <a href="mailto:orders@example.com">orders@example.com</a>.
        </p>
      </section>
    )
  }
  return null;
}
          <Route path="/return" element={<Return />} />
{
  "name": "stripe-sample",
  "version": "0.1.0",
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "express": "^4.17.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0",
    "stripe": "^8.202.0"
  },
  "devDependencies": {
    "concurrently": "4.1.2"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start-client": "react-scripts start",
    "start-server": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "concurrently \"yarn start-client\" \"yarn start-server\""
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^3.7.0",
    "@stripe/stripe-js": "^7.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^3.4.0"
  },
  "homepage": "http://localhost:3000/checkout",
  "proxy": "http://localhost:4242",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  // Create Checkout Sessions from body params.
  const session = await stripe.checkout.sessions.create({

    ui_mode: 'embedded_page',
    customer_email: 'customer@example.com',
    submit_type: 'donate',
    billing_address_collection: 'auto',
    shipping_address_collection: {
      allowed_countries: ['US', 'CA'],
    },
    line_items: [
      {
        // Provide the exact Price ID (for example, price_1234) of
        // the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1
      }
    ],
    mode: 'payment',
    return_url: `${origin}/return?session_id={CHECKOUT_SESSION_ID}`,
    automatic_tax: {enabled: true},
  })
import {
  EmbeddedCheckout,
  EmbeddedCheckoutProvider
} from '@stripe/react-stripe-js'
import { loadStripe } from '@stripe/stripe-js'
import { fetchClientSecret } from '../actions/stripe'
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={{ fetchClientSecret }}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
\# https://dashboard.stripe.com/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<<YOUR_PUBLISHABLE_KEY>>
STRIPE_SECRET_KEY=<<YOUR_SECRET_KEY>>
\# Set this environment variable to support webhooks — https://stripe.com/docs/webhooks#verify-events
# STRIPE_WEBHOOK_SECRET=whsec_12345
export default async function Return({ searchParams }) {
  const {
    status,
    customer_details: { email: customerEmail }
  } = await stripe.checkout.sessions.retrieve(session_id, {
    expand: ['line_items', 'payment_intent']
  })
  if (status === 'open') {
    return redirect('/')
  }

  if (status === 'complete') {
    return (
      <section id="success">
        <p>
          We appreciate your business! A confirmation email will be sent to{' '}
          {customerEmail}. If you have any questions, please email{' '}
        </p>
        <a href="mailto:orders@example.com">orders@example.com</a>.
      </section>
    )
  }
import 'server-only'

import Stripe from 'stripe'

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)
1. Build the server

~~~
pip3 install -r requirements.txt
~~~
1. Build the server

~~~
bundle install
~~~
1. Build the server

~~~
composer install
~~~
1. Build the server

~~~
dotnet restore
~~~
1. Build the server

~~~
mvn package
~~~

2. Run the server

~~~
export FLASK_APP=server.py
python3 -m flask run --port=4242
~~~

2. Run the server

~~~
ruby server.rb -o 0.0.0.0
~~~

2. Run the server

~~~
php -S 127.0.0.1:4242 --docroot=public
~~~

2. Run the server

~~~
dotnet run
~~~

2. Run the server

~~~
java -cp target/sample-jar-with-dependencies.jar com.stripe.sample.Server
~~~

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

If you run into an error, when running npm start, try running the following code and starting again:
~~~
export NODE_OPTIONS=--openssl-legacy-provider
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)

3. Build the client app

~~~
npm install
~~~

4. Run the client app

~~~
npm start
~~~

5. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Run the server

~~~
go run server.go
~~~

2. Build the client app

~~~
npm install
~~~

3. Run the client app

~~~
npm start
~~~

4. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Run the server

~~~
go run server.go
~~~

2. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
1. Build the application

~~~
npm install
~~~

2. Run the application

~~~
npm start
~~~

3. Go to [http://localhost:3000/checkout](http://localhost:3000/checkout)
1. Build the server

~~~
npm install
~~~

2. Run the server

~~~
npm start
~~~

3. Go to [http://localhost:4242/checkout.html](http://localhost:4242/checkout.html)
\### Development

1. Build the application
~~~shell
$ npm install
~~~

2. _Optional_: download and run the [Stripe CLI](https://stripe.com/docs/stripe-cli)
~~~shell
$ stripe listen --forward-to localhost:3000/api/webhooks
~~~

3. Run the application
~~~shell
$ STRIPE_WEBHOOK_SECRET=$(stripe listen --print-secret) npm run dev
~~~

4. Go to [localhost:3000](http://localhost:3000)

### Production

1. Build the application
~~~shell
$ npm install

$ npm build
~~~

2. Run the application
~~~shell
$ npm start
~~~
## Prochaines étapes

#### [Réaliser les commandes](https://docs.stripe.com/checkout/fulfillment.md)

Configurez un webhook pour traiter les commandes dès que les paiements aboutissent. Les webhooks permettent de gérer de manière fiable les événements critiques.

#### [Recevoir des virements](https://docs.stripe.com/payouts.md)

Apprenez à transférer des fonds de votre compte Stripe vers votre compte bancaire.

#### [Remboursement et annulation des paiements](https://docs.stripe.com/refunds.md)

Traitez les demandes de remboursement en utilisant l’API Stripe ou le Dashboard.

#### [Gestion de la clientèle](https://docs.stripe.com/customer-management.md)

Offrez à vos clients la possibilité de gérer eux-mêmes leurs informations de paiement, leurs factures et leurs abonnements