Zahlung akzeptieren
Zahlungen sicher akzeptieren mit Ihrer MCP-App.
Private Vorschau
- Das Akzeptieren von Zahlungen in ChatGPT-Apps ist für von OpenAI zugelassene Unternehmen in den USA verfügbar.
- Zahlungsmethoden, die in ChatGPT Instant Checkout unterstützt werden, sind Karten, Apple Pay, Google Pay und Link.
In diesem Leitfaden wird gezeigt, wie Sie mit Instant Checkout und Stripe eine Zahlung in Ihrer ChatGPT-App akzeptieren. Weitere Informationen zu diesem Framework finden Sie in der Dokumentation zu ChatGPT Instant Checkout.
Transaktionsdiagramm
Stripe-Profil erstellen und ChatGPT-App verbinden
Erstellen Sie ein Stripe-Profil und autorisieren Sie OpenAI, sich mit Ihrem Stripe-Konto zu verbinden. So kann ChatGPT auf sichere Weise ein Shared Payment Token (SPT) bereitstellen, das die Zahlungsdaten der Kundin/des Kunden darstellt.
- Erstellen Sie Ihr Stripe-Profil im Stripe-Dashboard.
- Akzeptieren Sie die allgemeinen Konditionen für Verkäufer/innen von Stripe und klicken Sie auf Autorisieren, um OpenAI zu aktivieren, um sich mit Ihrem Profil zu verbinden.
- Kopieren Sie Ihre Netzwerk-ID. Diese benötigen Sie, wenn Sie Checkout-Anfragen in Ihrer ChatGPT-App erstellen.
Stripe einrichten
Fügen Sie Ihrem Backend zunächst die Stripe-API-Bibliothek hinzu:
Kauf-Widget mit Stripe erstellen
Richten Sie die Nutzeroberfläche für Ihre ChatGPT-App ein, indem Sie ein MCP-Tool und eine Nutzeroberfläche für Kaufprodukte erstellen. Dieser Ablauf:
- Entnimmt ein Produkt aus dem Chat-Kontext.
- Zeigt Produktinformationen an und erfasst die Versandadresse von der Kundin/dem Kunden.
- Ruft
window.auf, wenn die Kundin/der Kunde bereit ist, fortzufahren.openai. requestCheckout
Produkte und Preise erstellen
In diesem Beispiel können Sie einen Bezahlvorgang für ein Produkt in der ChatGPT-App anzeigen. Erfahren Sie, wie man Produkte und Preise im Dashboard oder mit der Stripe-CLI erstellt.
Hinweis
Wenn Sie Ihre eigene maßgeschneiderte Produktlogik haben, müssen Sie keine Stripe-Produkte erstellen. Ersetzen Sie stattdessen die Stripe Produkt-API-Aufrufe in den folgenden Abschnitten durch Ihre eigene Produktlogik.
Registrieren einer Produktressource und eines Produkttools in Ihrem MCP Server
Konfigurieren Sie ChatGPT so, dass Ihr Checkout-Widget gerendert wird, wenn Kundinnen und Kunden den Chat auffordern, ein bestimmtes Produkt zu kaufen.
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"
Nutzeroberfläche des Kaufprodukts mit dem Apps SDK erstellen
Diese Nutzeroberfläche wird angezeigt, wenn das Tool aus dem vorherigen Schritt ausgeführt wird. Im folgenden Beispiel wird eine minimale Transaktionsgebühr verwendet. In einer Produktions-App können Sie ein Framework wie React verwenden. Weitere Beispiele finden Sie in der ChatGPT Apps SDK-Dokumentation.
<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>
Versandadresse und Steuer mit Stripe einziehen
Sie können die Stripe Tax-API verwenden, um die im nächsten Schritt verwendeten Steuern zu berechnen. Weitere Informationen finden Sie unter Steuern einziehen.
ChatGPT Instant Checkout-Modal öffnen
Dadurch werden Kundinnen und Kunden aufgefordert, eine Zahlungsmethode auszuwählen. Fügen Sie Logik hinzu, um eine Checkout-Sitzung zu erstellen, der der Preis-ID aus dem vorherigen Schritt zugeordnet wird. Der folgende Codeausschnitt fügt der Preis-ID eine UUID hinzu, um eine Checkout-Sitzung-ID zu erstellen.
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", }, ], }); }
MCP-Tool registrieren, um Bezahlvorgang abzuschließen
Wenn die Kundin/der Kunde auf der ChatGPT-Nutzeroberfläche für Zahlungen eine Zahlungsmethode auswählt und Bezahlen auswählt, ruft ChatGPT Ihr complete_-Tool auf und gibt den SPT zurück, den Sie zum Erstellen eines PaymentIntent verwenden.
Registrieren Sie ein complete_-MCP-Tool, das ein gewährtes gemeinsames Zahlungstoken als Eingabe nimmt und zur Verarbeitung an die Payment Intents API übergibt.
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: "", }, }, }; } );
Testen
Verwenden Sie den Test-Modus für Zahlungen von ChatGPT mit einer Stripe-Testumgebung, um Ihre App zu testen, ohne echtes Geld zu bewegen.
- Geben Sie im Stripe-Dashboard eine Sandbox oder einen Test-Modus ein.
- Erstellen Sie ein Stripe-Testprofil, verbinden Sie sich mit ChatGPT in der Testumgebung und kopieren Sie Ihre Test-Netzwerk-ID.
- Aktualisieren Sie Ihre ChatGPT-App-Einstellungen, um des Test-Modus für Zahlungen zu verwenden, sodass Testkarten erwartet und Test-SPTs generiert werden.
- Wenn Sie einen Bezahlvorgang anfordern, geben Sie Ihre Testprofil-ID an und legen Sie
payment_aufmode testfest, damit ChatGPT Testkarten erwartet und Test-SPTs generiert.server.jswindow.openai.requestCheckout({ id: priceID, payment_mode: "test", payment_provider: { provider: "stripe", merchant_id: "profile_test", supported_payment_methods: ["card"], }, - Verwenden Sie Ihren Stripe API-Testschlüssel in Ihrer MCP-Tool-Implementierung, um Test-SPTs aus ChatGPT zu verarbeiten.
- Richten Sie in Ihrer Live- und Testumgebung identische Webhook-Konfigurationen ein und stellen Sie sicher, dass sich Test-Webhook-Handler nicht auf Ihre Produktionssysteme auswirken können. Wenn beispielsweise Ihr Live-Webhook den Versand auslöst, sollte der Test-Endpoint nur protokollieren, dass er im Live-Modus versendet worden wäre.
Nachdem Sie diese Schritte ausgeführt haben, bewerten Sie den Zahlungsablauf in Ihrer App, ohne echtes Geld zu bewegen.
App im Live-Modus veröffentlichen
Wenn Sie bereit sind, Ihre App in den Live-Modus zu versetzen:
- Aktualisieren Sie Ihr MCP-Tool, um Ihren Stripe Live-Geheimschlüssel (
sk_) zu verwenden.live_ . . . - Aktualisieren Sie die Checkout-Anfrage Ihrer App mit Ihrer Live-Profil-ID und entfernen Sie die Testoption
payment_.mode
Ihre App ist dann bereit, Live-Zahlungen abzuwickeln. Dies ist erforderlich, bevor Sie zur Überprüfung an die ChatGPT-App übermitteln.
Vorsicht
Nachdem Sie Ihre ChatGPT-App eingereicht haben, dürfen Sie den Zahlungsmodus nicht mehr verwenden, da er für Live-Kundinnen und -Kunden sichtbar ist.