Accepter un paiement
Acceptez des paiements en toute sécurité avec votre application MCP.
Version bêta privée
- 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.
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.
Diagramme de transaction
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) représentant les informations de paiement du client.
- Créez votre profil Stripe dans le Dashboard Stripe
- Acceptez les conditions du vendeur agentique de Stripe, puis cliquez sur Autoriser pour permettre à OpenAI de se connecter à votre profil.
- Copiez votre ID de réseau. Vous en aurez besoin lors de la création de vos requêtes de paiement dans votre application ChatGPT.
Configurer Stripe
Commencez par ajouter la bibliothèque de l’API Stripe à votre back-end :
Créez un widget d'achat avec Stripe
Configurez l’interface utilisateur de votre application ChatGPT en créant un outil MCP d’achat de produit et une ressource d’interface utilisateur. Ce flux :
- 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.lorsque le client est prêt à poursuivre.openai. requestCheckout
Créer des produits et tarifs
Dans cet exemple, vous pouvez afficher un tunnel de paiement pour un produit dans l’application ChatGPT. Découvrez comment créer des produits et des prix dans le Dashboard ou à l’aide de l’interface en ligne de commande Stripe.
Remarque
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 d’achat de produit dans votre serveur MCP
Configurez ChatGPT pour afficher votre widget de paiement lorsque les clients demandent, dans la conversation, à acheter un produit spécifique.
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"; const stripe = new Stripe() 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: "Kickstart 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('prod_123456'); 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, }, }; } );"sk_test_BQokikJOvBiI2HlWgH4olfQ2"
Créez l’interface utilisateur d’achat de produit 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, vous pouvez utiliser un framework tel que React. Consultez la documentation du SDK des applications ChatGPT pour découvrir d’autres exemples.
<div id="root"></div> <script type="module" src="/ui/mcp-app.js"></script>
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 Collecter les taxes.
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.
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_ et renvoie le SPT que vous utilisez pour créer un PaymentIntent
Enregistrez un outil MCP complete_ qui prend en entrée un token d’autorisation de paiement partagé et le transmet à l’API Payment Intents pour traitement.
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: "123", 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.
- Saisissez un environnement de test ou un mode test dans le Dashboard Stripe.
- Créez un profil Stripe de test et connectez-le à ChatGPT dans l’environnement de test, puis copiez votre identifiant réseau de test.
- 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.
- Lorsque vous demandez un paiement, fournissez votre ID de profil de test et définissez
payment_surmode testafin que ChatGPT s’attende à des cartes bancaires de test et génère des SPT de test.server.jswindow.openai.requestCheckout({ id: priceID, payment_mode: "test", payment_provider: { provider: "stripe", merchant_id: "profile_test", supported_payment_methods: ["card"], }, - Utilisez votre clé API Stripe test dans l’implémentation de votre outil MCP pour gérer les SPT de test de ChatGPT.
- 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 :
- Mettez à jour votre outil MCP afin d’utiliser votre clé secrète Stripe en mode production (
sk_).mode production_ . . . - 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, étape nécessaire avant de soumettre votre application à la vérification des applications ChatGPT.
Mise en garde
Après avoir soumis votre application ChatGPT, évitez d’utiliser le mode de paiement de test, car il est accessible aux clients en production.