Monetarisieren Sie Ihre ChatGPT-App

Nutzen Sie eine vorgefertigte Checkout-Seite, um Zahlungen außerhalb Ihrer ChatGPT-App zu erhalten.

Wenn Sie Ihre ChatGPT-App monetarisieren und Zahlungen außerhalb Ihrer App abwickeln möchten, können Sie eine vorgefertigte Checkout-Seite verwenden und sich an dem Beispiel in diesem Leitfaden orientieren. In den folgenden Schritten wird beschrieben, wie das funktioniert:

Definieren Sie MCP-Tools, um die Präsentation von Produkten und die Auswahl zum Kauf zu erleichtern
Erfassen Sie Zahlungsinformationen mit einer vorgefertigten, von Stripe gehostete Checkout-Seite
Überwachen Sie nach erfolgreicher Zahlung die Webhooks

MCP und das ChatGPT Apps SDK

Dieser Leitfaden zeigt, wie Sie Stripe Checkout in Ihre ChatGPT-App integrieren können. Die folgenden Aspekte werden hier nicht beleuchtet:

Model Context Protocol (MCP) – siehe MCP-Dokumentation.
Das ChatGPT Apps SDK. Informationen zum Bau einer ChatGPT-App erhalten Sie in der Dokumentation der ChatGPT App SDK.

Stripe einrichten

Fügen Sie Ihrem Backend zunächst die Stripe-API-Bibliothek hinzu:

Produkte und Preise erstellen

In diesem Beispiel zeigen wir, wie eine Gruppe von Produkten in der ChatGPT-App angezeigt werden kann. Erstellen Sie Produkte und Preise im Dashboard oder mit der Stripe-CLI.

Registrieren Sie ein Checkout MCP-Tool

Registrieren eines MCP-Tools, das eine Checkout-Session für eine bestimmte Menge von Prices erstellt. Sie rufen dieses Tool in einem späteren Schritt über die ChatGPT-App auf.

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

Registrieren Sie ein ChatGPT-UI-Tool und eine Ressource

Einrichten der Benutzeroberfläche für Ihre ChatGPT-App, indem Sie ein MCP-Tool und eine Ressource registrieren. Diese Benutzeroberfläche:

Eine Produktliste wird angezeigt
Der Nutzer/die Nutzerin kann selbst wählen, welche Produkte er/sie kaufen möchte
Weiterleitung an Stripe Checkout, um die Zahlung abzuschließen

Registrieren Sie MCP-Tool zum Auflisten von Produkten

Erstellen Sie ein MCP-Tool zum „Auflisten von Produkten“, dessen Callback die Preis-IDs der Produkte zurückgibt, die Sie in der Benutzeroberfläche anzeigen möchten.

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

Registrieren Sie eine UI-Ressource zum Auflisten von Produkten

Erstellen Sie eine MCP-Ressource für das „Widget Auflisten von Produkten“. Diese definiert den UI-Code, der für die Darstellung der Produkte zuständig ist.

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

Zur Veranschaulichung ist das UI-Markup hier einfach gehalten. In einer realen Anwendung könnten Sie UI-Frameworks wie React verwenden. Weitere Beispiele finden Sie in der Dokumentation des ChatGPT App SDK.

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>

Weiterleiten zu Checkout

Wenn der Nutzer/die Nutzerin in der ChatGPT-App auf den Button Kaufen tippt:

Aufrufen des Tools „Produkte kaufen“, um eine Checkout-Session-URL zu erstellen.
Öffnen Sie die URL der 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 });
};

Bearbeiten Sie erfolgreiche Aufträge

Erfahren Sie, wie Sie mit der Checkout Sessions API erhaltene Zahlungen abwickeln.