# Accepter un paiement

Acceptez des paiements avec votre application MCP.

# Redirection

> This is a Redirection for when platform is web and ui is stripe-hosted. View the full page at https://docs.stripe.com/agentic-commerce/apps/accept-payment?platform=web&ui=stripe-hosted.

Collectez des paiements en dehors de votre application à l’aide d’une page de paiement hébergée par Stripe. Ce guide explique comment :

- Définissez des outils Model Context Protocol (MCP) pour afficher des produits et permettre aux clients de sélectionner des éléments à acheter.
- Collectez les informations de paiement avec [une page de paiement préconfigurée et hébergée par Stripe](https://docs.stripe.com/payments/checkout.md)
- Surveiller les webhooks après un paiement réussi

## Configurer Stripe

Ajouter la bibliothèque d’API Stripe à votre back-end.

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créer des produits et tarifs

Cet exemple affiche un groupe de produits dans l’application MCP. [Créez des produits et des prix dans le Dashboard ou avec l’interface de ligne de commande Stripe](https://docs.stripe.com/products-prices/manage-prices.md).

## Enregistrer un outil MCP dédié à Checkout

Enregistrez un outil MCP qui crée une [session Checkout](https://docs.stripe.com/api/checkout/sessions.md) pour un ensemble de *Prices* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions). Cet outil est appelé depuis l’application MCP lors d’une étape ultérieure.

```javascript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
  registerAppTool,
  registerAppResource,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
import { readFileSync } from "node:fs";
import Stripe from "stripe";
import { z } from "zod";

// Follow https://docs.stripe.com/keys-best-practices to protect your Stripe API keys.
const stripe = new Stripe(process.env.STRIPE_API_KEY);
const server = new McpServer({ name: "my-mcp-server", version: "1.0.0" });
const resourceUri = "ui://list-products.html";
async function createCheckoutSession(priceIds) {
  const lineItems = priceIds.map((price) => ({ price, quantity: 1 }));

  const session = await stripe.checkout.sessions.create({
    mode: "payment",
    line_items: lineItems,
    success_url: "https://example.com/checkout/success",
  });

  return session;
}

// Register the tool that creates a checkout session
server.registerTool(
  "buy-products",
  {
    title: "Buy products",
    description:
      "Create a checkout page link for purchasing the selected products",
    inputSchema: { priceIds: z.array(z.string()) },
  },
  async ({ priceIds }) => {const session = await createCheckoutSession(priceIds);

    return {
      content: [
        {
          type: "text",
          text: `[Complete your purchase here](${session.url})`,
        },
      ],
      structuredContent: {
        checkoutSessionId: session.id,
        checkoutSessionUrl: session.url,
      },
    };
  }
);
```

## Enregistrez un outil et une ressource d’interface utilisateur

Configurez l’interface utilisateur de votre application MCP en enregistrant un outil MCP et une ressource. Cette interface utilisateur :

1. Afficher la liste des produits
1. Permet au client de sélectionner les produits à acheter
1. Rediriger vers la page Stripe Checkout pour finaliser le paiement

### Enregistrez un outil MCP de liste de produits

Créez un outil MCP de liste des produits. Sa fonction de rappel renvoie les ID de prix des produits à afficher dans l’interface utilisateur.

```javascript
registerAppTool(
  server,
  "list-products",
  {
    title: "List products",
    description: "List the products available for purchase",
    _meta: { ui: { resourceUri } },
  },
  async () => {
    const suggestedProducts = [
      // The price IDs from the earlier step
      { priceId: "{{PRICE_ID}}", name: "Test product 1" },
      { priceId: "{{PRICE_ID}}", name: "Test product 2" },
    ];

    return {
      structuredContent: { products: suggestedProducts },
      content: [],
    };
  }
);
```

### Enregistrez une ressource UI de liste de produits

Créez une ressource MCP pour le widget de liste de produits. Elle définit le code de l’interface utilisateur qui affiche les produits.

```javascript
// Register the resource that serves the bundled HTML
registerAppResource(
  server,
  "list-products-widget",
  resourceUri,
  { mimeType: RESOURCE_MIME_TYPE },
  async () => {
    const html = readFileSync("dist/ui/list-products.html", "utf8");

    return {
      contents: [
        {
          uri: resourceUri,
          mimeType: RESOURCE_MIME_TYPE,
          text: html,
        },
      ],
    };
  }
);
```

Cet exemple utilise une majoration minimale. Dans une application de production, utilisez un framework tel que React. Consultez la [documentation des applications MCP](https://modelcontextprotocol.github.io/ext-apps/) pour découvrir d’autres exemples.

```html
<div id="root"></div>
<script type="module" src="/ui/mcp-app.js"></script>
```

```js
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "ProductList", version: "1.0.0" });

// Establish communication with the host
await app.connect();

/**
  * UI markup and event handlers
  */
const renderProduct = (product) => {
  return `
    <label>
      <input type="checkbox" name="cart[]" value="${product.priceId}">
      ${product.name}
    </label>
  `;
};

const handleSubmit = async (event) => {
  // We'll fill this in next
}

const renderApp = (products) => {
  const root = document.querySelector("#root");

  root.innerHTML = `
    <h1>Select products to purchase</h1>
    <form id="product-form">
      ${products.map(renderProduct).join("")}
      <button type="submit">Buy</button>
    </form>
  `;

  document
    .querySelector("#product-form")
    ?.addEventListener("submit", handleSubmit);
};

/**
 * Render the list of products from the tool's structuredContent
 */
app.ontoolresult = (params) => {
  const { products } = params.structuredContent ?? {};
  if (products) {
    renderApp(products);
  }
};
```

## Rediriger vers Checkout

Lorsque le client clique sur **Acheter** dans l’application MCP&nbsp;:

1. Appeler votre outil «&nbsp;Acheter des produits&nbsp;» pour générer une URL de Checkout Session.
1. Ouvrir l’URL de la Checkout Session.

Mettez à jour la fonction `handleSubmit`&nbsp;:

```javascript
const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const priceIds = Array.from(formData.values());
// Call the buy-products tool to create a Checkout Session
  const { structuredContent } = await app.callServerTool({
    name: "buy-products",
    arguments: { priceIds },
  });

  if (typeof structuredContent?.checkoutSessionUrl === "string") {
    await app.openLink({ url: structuredContent.checkoutSessionUrl });
  }
};
```

## Gérez les commandes réussies

Gérez les commandes réussies en écoutant l’événement `checkout.session.completed` (et `checkout.session.async_payment_succeeded` pour les moyens de paiement différés), puis en appelant une fonction de réalisation idempotente qui récupère la Checkout Session (en utilisant le paramètre expand pour `inclure line_items`), vérifie payment_status et traite les éléments.

Utilisez une page de destination `success_url` pour déclencher la réalisation immédiatement après la redirection, mais appuyez-vous sur les webhooks afin de garantir que chaque paiement est bien réalisé.

Testez en local avec l’interface de ligne de commande Stripe, puis déployez votre endpoint webhook.

Pour des instructions détaillées, consultez [Traiter les paiements reçus avec l’API Checkout Sessions](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=stripe-hosted).

## See also

- [Collecter des taxes](https://docs.stripe.com/payments/checkout/taxes.md)
- [Collecter les informations de livraison et les autres données client](https://docs.stripe.com/payments/checkout/collect-additional-info.md)
- [Personnalisez votre image de marque](https://docs.stripe.com/payments/checkout/customization.md)
- [Personnalisez votre page de confirmation de paiement](https://docs.stripe.com/payments/checkout/custom-success-page.md)


# Paiement instantané

> This is a Paiement instantané for when platform is web and ui is direct-api. View the full page at https://docs.stripe.com/agentic-commerce/apps/accept-payment?platform=web&ui=direct-api.

> - L’acceptation des paiements dans les applications ChatGPT est disponible pour les entreprises approuvées par OpenAI aux États-Unis.
- Les moyens de paiement pris en charge par le paiement instantané ChatGPT sont les cartes bancaires, Apple Pay, Google Pay et [Link](https://docs.stripe.com/payments/link.md).

Ce guide explique comment accepter un paiement dans votre application ChatGPT à l’aide du paiement instantané et de Stripe. Pour en savoir plus sur ce framework, consultez la [documentation sur le paiement instantané ChatGPT](https://openai.com/index/buy-it-in-chatgpt/).

## Diagramme de transaction
Diagramme pour le tunnel de paiement instantané ChatGPT (See full diagram at https://docs.stripe.com/agentic-commerce/apps/accept-payment)
## Créez un profil Stripe, puis connectez votre application ChatGPT

Créez un profil Stripe et autorisez OpenAI à se connecter à votre compte Stripe. Cela permet à ChatGPT de fournir de manière sécurisée un [token de paiement partagé (SPT)](https://docs.stripe.com/agentic-commerce/concepts/shared-payment-tokens.md) représentant les informations de paiement du client.

1. Créez votre [profil Stripe](https://docs.stripe.com/get-started/account/profile.md) dans le Dashboard Stripe
1. Acceptez les conditions du vendeur agentique de Stripe, puis cliquez sur **Autoriser pour permettre à OpenAI** de se connecter à votre profil.
1. Copiez votre Network ID. Cet ID est nécessaire pour créer des demandes de paiement dans l’application ChatGPT.

## Configurer Stripe

Ajoutez la bibliothèque d’API Stripe à votre back-end&nbsp;:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Créez un widget d'achat avec Stripe

Configurez l’interface utilisateur de votre application ChatGPT en créant un outil MCP «&nbsp;buy product&nbsp;» et une ressource d’interface utilisateur. Ce flux&nbsp;:

- Récupère un produit à partir du contexte de la conversation.
- Affiche les informations du produit et collecte l’adresse de livraison auprès du client.
- Appelle `window.openai.requestCheckout` lorsque le client est prêt à poursuivre.

### Créer des produits et tarifs

Cet exemple montre un tunnel de paiement pour un produit dans l’application ChatGPT. [Créez des produits et des prix dans le Dashboard ou à l’aide de l’interface en ligne de commande Stripe](https://docs.stripe.com/products-prices/manage-prices.md).

> Si vous disposez de votre propre logique produit personnalisée, vous n’avez pas besoin de créer des produits Stripe. À la place, remplacez les appels à l’API Stripe Products dans les sections suivantes par votre propre logique produit.

### Enregistrez une ressource et un outil «&nbsp;buy product&nbsp;» dans votre serveur MCP

Configurez ChatGPT pour afficher votre widget de paiement lorsque les clients demandent, dans la conversation, à acheter un produit spécifique.

```javascript
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import {
  registerAppTool,
  registerAppResource,
  RESOURCE_MIME_TYPE,
} from "@modelcontextprotocol/ext-apps/server";
import { readFileSync } from "node:fs";
import Stripe from "stripe";
import { z } from "zod";

// Follow https://docs.stripe.com/keys-best-practices to protect your Stripe API keys.
const stripe = new Stripe(process.env.STRIPE_API_KEY);
const server = new McpServer({ name: "my-mcp-server", version: "1.0.0" });
const resourceUri = "ui://widget/buy-product-template.html";

registerAppResource(
  server,
  "buy-product-widget",
  resourceUri,
  {
    title: "Buy Product",
    description: "Buy Product widget",
    mimeType: RESOURCE_MIME_TYPE,
  },
  async () => {
    const html = readFileSync("dist/ui/buy-product.html", "utf8");

    return {
      contents: [
        {
          uri: resourceUri,
          mimeType: RESOURCE_MIME_TYPE,
          text: html,
        },
      ],
    };
  }
);

registerAppTool(
  server,
  "show-buy-product-widget",
  {
    title: "Buy Product",
    description: "Start a checkout flow for a specific product.",
    // Add inputs here to help you find the product id
    inputSchema: { product_name: z.string() },
    _meta: { ui: { resourceUri } },
    annotations: { readOnlyHint: true }
  },
  async () => {
    // Add logic here to get product id from input schema

    const product = await stripe.products.retrieve('{{PRODUCT_ID}}');
    const amount = (await stripe.prices.retrieve(product.default_price as string)).unit_amount;

    return {
      content: [],
      structuredContent: {
        productName: product.name,
        amount: amount,
        priceID: product.default_price,
      },
    };
  }
);
```

### Créez l’interface utilisateur «&nbsp;buy product&nbsp;» avec le SDK des applications ChatGPT

Cette interface utilisateur s’affiche lorsque l’outil de l’étape précédente s’exécute. L’exemple ci-dessous utilise un balisage minimal. Dans une application de production, utilisez un framework tel que React. Consultez la [documentation du SDK des applications ChatGPT](https://developers.openai.com/apps-sdk) pour découvrir d’autres exemples.

```html
<div id="root"></div>
<script type="module" src="/ui/mcp-app.js"></script>
```

```js
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "BuyProduct", version: "1.0.0" });
await app.connect();

if (!window.openai?.requestCheckout) {
  throw new Error("requestCheckout is not available in this host");
}

const root = document.getElementById("root");
let product = { name: "", amount: 0, priceID: "" };

const render = () => {
  root.innerHTML = `
    <h1>${product.name || "Loading..."}</h1>
    <p>$${(product.amount / 100).toFixed(2)}</p>
    <form onsubmit="handleSubmit(event)">
      <button type="submit">Proceed</button>
    </form>
  `;
};

app.ontoolresult = (params) => {
  const { productName, amount, priceID } = params.structuredContent ?? {};
  product = { name: productName ?? "", amount: amount ?? 0, priceID: priceID ?? "" };
  render();
};

render();
</script>
```

### Collectez l’adresse de livraison et les taxes avec Stripe

Vous pouvez utiliser l’API Stripe Tax pour calculer les taxes utilisées à l’étape suivante. Pour plus d’informations, consultez la page [Utiliser l’API Tax autonome](https://docs.stripe.com/tax/standalone-tax-api.md).

### Ouvrez la fenêtre modale de paiement instantané ChatGPT

Cette interface invite les clients à sélectionner un moyen de paiement. Ajoutez une logique permettant de créer une session Checkout associée à l’ID de prix issu de l’étape précédente. L’extrait de code suivant ajoute un UUID à l’ID de prix afin de créer un ID de session Checkout.

```javascript
const getTax = (priceID) => {
    // Add your tax integration
 };

const createCheckoutSession = (priceID) => {
  const uuid = crypto.randomUUID();
  return `${priceID}::${uuid}`;
};

const handleSubmit = (e) => {
  e.preventDefault();
  const { name, amount, priceID } = product;
  const tax = getTax(priceID);
  window.openai.requestCheckout({// This is priceID passed in from the MCP buy product tool
    id: createCheckoutSession(priceID),
    // remove this when you are ready for live mode
    payment_mode: "test",
    payment_provider: {
      provider: "stripe",// Insert your Network ID from the Stripe dashboard
      merchant_id: networkID,
      supported_payment_methods: ["card"],
    },
    status: "ready_for_payment",
    currency: "USD",
    line_items: [
      {
        id: "line_items_123",
        item: {
          id: priceID,
          quantity: 1,
        },
        base_amount: product.amount,
        subtotal: product.amount,
        tax: tax,
        total: product.amount + tax,
      },
    ],
    totals: [
      {
        type: "items_base_amount",
        display_text: product.name,
        amount: product.amount,
      },
      {
        type: "subtotal",
        display_text: "Subtotal",
        amount: product.amount,
      },
      {
        type: "tax",
        display_text: "Tax",
        amount: tax,
      },
      {
        type: "total",
        display_text: "Total",
        amount: product.amount + tax,
      },
    ],
    fulfillment_options: [],
    fulfillment_address: null,
    messages: [],
    links: [
        {
          type: "terms_of_service",
          url: "https://example.com/terms",
        },
      ],
  });
}
```

## Enregistrez un outil MCP pour finaliser le paiement

Lorsque le client sélectionne un moyen de paiement dans l’interface de paiement ChatGPT et clique sur **Payer**, ChatGPT appelle votre outil `complete_checkout` et renvoie le SPT que vous utilisez pour créer un `PaymentIntent`.

Enregistrez un outil MCP `complete_checkout` qui prend en entrée un token d’autorisation de paiement partagé et le transmet à l’API [Payment Intents](https://docs.stripe.com/api/payment_intents.md) pour traitement.

```javascript

const retrievePriceID = (checkout_session_id: string) => {
  const [priceID, uuid] = checkout_session_id.split('::');
  return priceID;
};

server.registerTool(
  "complete_checkout",
  {
    description: "Complete the checkout and process the payment",
    inputSchema: {
      checkout_session_id: z.string(),
      buyer: z
        .object({
          name: z.string().nullable(),
          email: z.string().nullable(),
          phone_number: z.string().nullable(),
        })
        .nullable(),
      payment_data: z.object({
        token: z.string(),
        provider: z.string(),
        billing_address: z
          .object({
            name: z.string(),
            line_one: z.string(),
            line_two: z.string().nullable(),
            city: z.string(),
            state: z.string(),
            country: z.string(),
            postal_code: z.string(),
            phone_number: z.string().nullable(),
          })
          .nullable(),
      }),
    },
  },
  async ({checkout_session_id, buyer, payment_data}) => {
    const price = (await stripe.prices.retrieve(retrievePriceID(checkout_session_id as string)))

    // Add your tax logic
    const tax = getTax()
// confirms the SPT
    stripe.paymentIntents.create({
      amount: price.unit_amount + tax,
      currency:  price.currency,
      shared_payment_granted_token: payment_data.token,
      confirm: true,
    });

    return {
      content: [],
      structuredContent: {
        id: checkout_session_id,
        status: "completed",
        currency:  price.currency,
        buyer,
        line_items: [],
        order: {
          id: "{{ORDER_ID}}",
          checkout_session_id,
          permalink_url: "",
        },
      },
    };
  }
);

```

## En cours de test

Utilisez le mode de paiement de test de ChatGPT avec un environnement de test Stripe afin de tester votre application sans déplacer d’argent réel.

1. Saisissez un [environnement de test](https://docs.stripe.com/sandboxes.md) dans le Dashboard Stripe.
1. Créez un profil Stripe de test et connectez-le à ChatGPT dans l’environnement de test, puis copiez votre identifiant réseau de test.
1. Mettez à jour les paramètres de votre application ChatGPT afin d’utiliser le mode de paiement de test, de sorte qu’elle s’attende à des cartes bancaires de test et génère des SPT de test.
1. Lorsque vous demandez un paiement, fournissez votre ID de profil de test et définissez `payment_mode` sur `test` afin que ChatGPT s’attende à des cartes bancaires de test et génère des SPT de test.
   ```javascript
     window.openai.requestCheckout({
         id: priceID,payment_mode: "test",
         payment_provider: {
           provider: "stripe",merchant_id: "profile_test",
           supported_payment_methods: ["card"],
         },
   ```
1. Utilisez votre clé API Stripe de test dans l’implémentation de votre outil MCP pour traiter les SPT de test provenant de ChatGPT. Suivez les [bonnes pratiques](https://docs.stripe.com/keys-best-practices.md) pour utiliser cette clé en toute sécurité&nbsp;: ne l’intégrez pas directement dans votre code et utilisez un gestionnaire de secrets si votre plateforme en propose un.
1. Configurez des webhooks identiques dans vos environnements de production et de test, et assurez-vous que les gestionnaires de webhooks de test ne puissent pas affecter vos systèmes de production. Par exemple, si un webhook de production déclenche l’expédition, l’endpoint de test doit uniquement consigner qu’une expédition aurait eu lieu en mode production.

Une fois que vous avez effectué ces étapes, évaluez le tunnel de paiement dans votre application sans déplacer d’argent réel.

### Publiez votre application en mode production

Lorsque vous êtes prêt à promouvoir votre application en mode production&nbsp;:

1. Créez une [clé API limitée](https://docs.stripe.com/keys-best-practices.md#limit-access) en mode production (`rk_live_...`) avec les autorisations **Payment Intents: Write** (autorisation d’écriture pour les intentions de paiement). Une clé limitée permet d’accorder à votre outil MCP uniquement les autorisations nécessaires.
1. Mettez à jour votre outil MCP pour utiliser la clé API limitée en mode production.
1. Mettez à jour la requête de paiement de votre application avec l’ID de votre profil en mode production et supprimez l’option de test `payment_mode`.

Votre application est alors prête à traiter des paiements en production. Cette étape est nécessaire avant de soumettre votre application à la vérification des applications ChatGPT.

> Après avoir soumis votre application ChatGPT, évitez d’utiliser le mode de paiement de test, car il est accessible aux clients en production.

## See also

- [Modèle de protocole contextuel](https://modelcontextprotocol.io/)
- [ChatGPT Apps SDK](https://developers.openai.com/apps-sdk)