Monétiser votre application ChatGPT

Utiliser une page de paiement préconfigurée pour collecter un paiement en dehors de votre application ChatGPT.

Si vous devez monétiser votre application ChatGPT et encaisser un paiement en dehors de l’application, vous pouvez utiliser une page de paiement préconfigurée et vous appuyer sur l’exemple fourni dans ce guide. Les étapes ci-dessous expliquent comment procéder :

Définir des outils MCP pour faciliter l’affichage des produits et leur sélection pour l’achat
Collecter les informations de paiement avec une page Stripe Checkout préconfigurée et hébergée par Stripe
Surveiller les webhooks après un paiement réussi

MCP et le SDK ChatGPT Apps

Ce guide explique comment intégrer Stripe Checkout à votre application ChatGPT. Il ne couvre pas :

Model Context Protocol (MCP). Voir la documentation MCP.
Le SDK ChatGPT Apps. Pour apprendre à créer une application ChatGPT, consultez la documentation du SDK ChatGPT App.

Configurer Stripe

Commencer par ajouter la bibliothèque Stripe API à votre back-end :

Créer des produits et tarifs

Dans cet exemple, nous montrons comment afficher un ensemble de produits dans l’application ChatGPT. Créez les produits et leurs prix dans le Dashboard ou avec Stripe CLI.

Enregistrer un outil MCP dédié à Checkout

Enregistrer un outil MCP qui crée une Checkout Session pour un ensemble donné de prix. Vous appellerez cet outil depuis l’application ChatGPT à l’étape suivante.

server.js
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { readFileSync } from "node:fs";
import Stripe from "stripe";
import { z } from "zod";

const stripe = new Stripe("sk_test_BQokikJOvBiI2HlWgH4olfQ2"
)
const server = new McpServer({ name: "my-mcp-server", version: "1.0.0" });

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

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

Enregistrer un outil et une ressource d’interface utilisateur pour ChatGPT

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

Afficher la liste des produits
Permettre à l’utilisateur de choisir les produits qu’il souhaite acheter
Rediriger vers la page Stripe Checkout pour finaliser le paiement

Enregistrer un outil MCP « Lister les produits »

Créez un outil MCP « Lister les produits » dont le rappel renvoie les ID de prix des produits que vous souhaitez afficher dans l’interface utilisateur.

server.js
const listProductsUri = "ui://list-products-v1.html";

server.registerTool(
  "list-products",
  {
    title: "List products",
    description: "List the products available for purchase",
    _meta: { "openai/outputTemplate": listProductsUri },
  },
  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: [],
    };
  }
);

Enregistrer une ressource d’interface utilisateur « Lister les produits »

Créer une ressource MCP « Lister les produits widget », qui définit le code de l’interface utilisateur chargé d’afficher les produits.

server.js
const listProductsHTML = readFileSync("ui/list-products.html", "utf8");

server.registerResource(
  "list-products-widget",
  listProductsUri,
  {},
  async (uri) => ({
    contents: [
      {
        uri: uri.href,
        mimeType: "text/html+skybridge",
        text: listProductsHTML,
        _meta: {
          "openai/widgetCSP": {
            connect_domains: ["https://checkout.stripe.com"],
            resource_domains: ["https://checkout.stripe.com"],
          },
        },
      },
    ],
  })
);

Pour l’exemple, le balisage de l’interface utilisateur reste simple. Dans une application réelle, vous pouvez utiliser un framework d’interface utilisateur comme React. Consultez la documentation du SDK ChatGPT App pour d’autres exemples.

ui/list-products.html
<div id="root"></div>

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

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

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

  /**
   * Render the list of products from the tool's structuredContent
   */
  const handleSetGlobal = (event) => {
    const { products } = event.detail.globals["toolOutput"] ?? [];
    renderApp(products);
  };

  window.addEventListener("openai:set_globals", handleSetGlobal, {
    passive: true,
  });
</script>

Rediriger vers Checkout

Quand l’utilisateur appuie sur le bouton Acheter dans l’application ChatGPT :

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

ui/list-products.html
const handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  const priceIds = Array.from(formData.values());

  const { structuredContent } = await window.openai.callTool("buy-products", {
    priceIds,
  });

  window.openai.openExternal({ href: structuredContent.checkoutSessionUrl });
};

Gérer les commandes finalisées avec succès

Découvrez comment traiter les paiements reçus avec l’API Checkout Sessions.