Integrate Gr4vy Embed

// src/server/services/purchases.ts
import { readFileSync } from "fs";
import { Gr4vy, getEmbedToken, withToken, verifyWebhook } from "@gr4vy/sdk";

interface CheckoutItem {
  name: string;
  quantity: number;
  unitAmount: number; // in cents
}

function getPrivateKey(): string {
  const privateKeyPath = process.env.GR4VY_PRIVATE_KEY_PATH;
  if (!privateKeyPath) {
    throw new Error("Set GR4VY_PRIVATE_KEY_PATH environment variable.");
  }
  return readFileSync(privateKeyPath, "utf8");
}

function getGr4vyClient(): Gr4vy {
  const gr4vyId = process.env.GR4VY_ID;
  if (!gr4vyId) {
    throw new Error("Set GR4VY_ID environment variable.");
  }

  return new Gr4vy({
    server: (process.env.GR4VY_ENVIRONMENT || "sandbox") as "sandbox" | "production",
    id: gr4vyId,
    merchantAccountId: process.env.GR4VY_MERCHANT_ACCOUNT_ID,
    bearerAuth: withToken({ privateKey: getPrivateKey() }),
  });
}

export async function generateEmbedToken(
  amount: number,
  currency: string = "USD",
  cartItems: CheckoutItem[] = []
): Promise<string> {
  const gr4vy = getGr4vyClient();
  const privateKey = getPrivateKey();

  // 1. Create a checkout session on the Gr4vy backend
  const checkoutSession = await gr4vy.checkoutSessions.create({
    amount,
    currency,
    cartItems: cartItems.map((item) => ({
      name: item.name,
      quantity: item.quantity,
      unitAmount: item.unitAmount,
    })),
    metadata: {
      source: "plantly-chatgpt-app",
    },
  });

  // 2. Generate a signed JWT embed token
  return getEmbedToken({
    privateKey,
    checkoutSessionId: checkoutSession.id,
    embedParams: {
      amount,
      currency,
      merchantAccountId: process.env.GR4VY_MERCHANT_ACCOUNT_ID,
      cartItems: cartItems.map((item) => ({
        name: item.name,
        quantity: item.quantity,
        unitAmount: item.unitAmount,
      })),
    },
  });
}

# purchases.py
import os
from gr4vy import auth

def generate_embed_token(buyer_id: str, amount: int, currency: str = "USD") -> str:
    """Generate a Gr4vy Embed token for client-side checkout.

    Args:
        buyer_id: The Gr4vy buyer ID.
        amount: Transaction amount in smallest currency unit (cents).
        currency: ISO 4217 currency code.

    Returns:
        A signed JWT token for Gr4vy Embed.
    """
    private_key = os.environ.get("GR4VY_PRIVATE_KEY")
    if not private_key:
        raise ValueError("Set GR4VY_PRIVATE_KEY environment variable.")

    return auth.get_embed_token(
        private_key,
        embed_params={
            "amount": amount,
            "currency": currency,
            "buyer_id": buyer_id,
        },
    )

// src/widgets/checkout/App.tsx
const [embedConfig, setEmbedConfig] = useState<EmbedConfig | null>(null);
const [embedError, setEmbedError] = useState<string | null>(null);
const embedLoaded = useRef(false);

useEffect(() => {
  waitForToolOutput<CheckoutData>().then((data) => {
    if (data.embed) setEmbedConfig(data.embed);
    if (data.embed_error) setEmbedError(data.embed_error);
  });

  const unsub = onToolResult<CheckoutData>((data) => {
    if (data?.embed) setEmbedConfig(data.embed);
  });
  return unsub;
}, []);

// assets/checkout.html (inline <script>)
var items = [];
var embedConfig = null;
var embedLoaded = false;

function onToolResult(data) {
  if (!data) return;
  if (data.items) items = data.items;
  if (data.embed) embedConfig = data.embed;
  render();
}

// MCP Apps bridge — listen for tool result updates
window.addEventListener("message", function(ev) {
  if (ev.source !== window.parent) return;
  var msg = ev.data;
  if (!msg || msg.jsonrpc !== "2.0") return;
  if (msg.method === "ui/notifications/tool-result") {
    onToolResult(msg.params && msg.params.structuredContent);
  }
});

// Poll for initial tool output
function checkOpenAI() {
  if (window.openai && window.openai.toolOutput) {
    onToolResult(window.openai.toolOutput);
  } else {
    setTimeout(checkOpenAI, 100);
  }
}
checkOpenAI();

// src/widgets/checkout/App.tsx (continued)
useEffect(() => {
  if (!embedConfig || embedLoaded.current || !embedConfig.gr4vy_id) return;

  const cdnUrl = `https://cdn.${embedConfig.gr4vy_id}.gr4vy.app/embed.latest.js`;
  const script = document.createElement("script");
  script.src = cdnUrl;
  script.onload = () => {
    embedLoaded.current = true;
    initEmbed();
  };
  script.onerror = () => {
    setEmbedError("Payment form could not be loaded.");
  };
  document.head.appendChild(script);
}, [embedConfig]);

// assets/checkout.html (inline <script>, continued)
function loadEmbed() {
  if (!embedConfig || !embedConfig.gr4vy_id) return;

  var cdnUrl = "https://cdn." + embedConfig.gr4vy_id + ".gr4vy.app/embed.latest.js";
  var script = document.createElement("script");
  script.src = cdnUrl;
  script.onload = function() {
    embedLoaded = true;
    initEmbed();
  };
  script.onerror = function() {
    var el = document.getElementById("embed-container");
    if (el) {
      el.innerHTML = '<div style="text-align:center;padding:20px;color:#dc2626;">' +
        'Failed to load payment form. Please try again.</div>';
    }
  };
  document.head.appendChild(script);
}

// src/widgets/checkout/App.tsx (continued)
function initEmbed() {
  if (!embedConfig || typeof gr4vy === "undefined") return;

  gr4vy.setup({
    gr4vyId: embedConfig.gr4vy_id,
    token: embedConfig.token,              // Signed JWT from your server
    element: "#embed-container",           // DOM element for the payment form
    form: "#payment-form",                 // Wrapping <form> element
    amount: embedConfig.amount,            // Total in cents — must match the token
    currency: embedConfig.currency,
    country: embedConfig.country,
    environment: embedConfig.environment,  // "sandbox" or "production"
    intent: "capture",                     // "capture" or "authorize"
    merchantAccountId: embedConfig.merchant_account_id,

    onComplete: (transaction) => {
      // Fires when the payment succeeds.
      // transaction.id — the Gr4vy transaction ID
      // transaction.status — e.g., "capture_succeeded"
      // transaction.paymentMethod — card scheme, last 4 digits, etc.
      // Display your application-specific success screen here.
    },

    onEvent: (name, data) => {
      // Fires on errors and other lifecycle events.
      // "transactionFailed" — the payment was declined or errored
      // "argumentError"    — a configuration mismatch (e.g., amount vs token)
      // "apiError"         — a Gr4vy API error
      if (name === "transactionFailed") {
        // Display your application-specific error screen here.
      }
    },
  });
}

// assets/checkout.html (inline <script>, continued)
function initEmbed() {
  if (!embedConfig || typeof gr4vy === "undefined") return;

  var totalCents = embedConfig.amount || Math.round(getTotal() * 100);

  var options = {
    gr4vyId: embedConfig.gr4vy_id,
    token: embedConfig.token,              // Signed JWT from your server
    element: "#embed-container",           // DOM element for the payment form
    form: "#payment-form",                 // Wrapping <form> element
    amount: totalCents,                    // Total in cents — must match the token
    currency: embedConfig.currency || "USD",
    country: embedConfig.country || "US",
    environment: embedConfig.environment || "sandbox",
    intent: "capture",                     // "capture" or "authorize"
    onComplete: function(transaction) {
      // Fires when the payment succeeds.
      // transaction.id — the Gr4vy transaction ID
      // transaction.status — e.g., "capture_succeeded"
      // Display your application-specific success screen here.
      showResult(transaction);
    },
    onEvent: function(name, data) {
      // Fires on errors and other lifecycle events.
      // "transactionFailed" — the payment was declined or errored
      // "argumentError"    — a configuration mismatch (e.g., amount vs token)
      if (name === "transactionCreated" || name === "transactionFailed") {
        showResult(data);
      }
    }
  };

  if (embedConfig.buyer_id) options.buyerId = embedConfig.buyer_id;
  if (embedConfig.merchant_account_id) {
    options.merchantAccountId = embedConfig.merchant_account_id;
  }

  gr4vy.setup(options);
}

// src/widgets/checkout/App.tsx (JSX)
<form id="payment-form">
  <div id="embed-container" style={{ minHeight: 300 }} />
  <button type="submit">Pay Now</button>
</form>

<!-- assets/checkout.html (rendered by the render() function) -->
<form id="payment-form">
  <div id="embed-container"></div>
  <button type="submit" class="pay-btn">Pay $19.99</button>
</form>

// src/server/services/purchases.ts (continued)
export function handleWebhook(
  payload: string,
  signatureHeader: string | null | undefined,
  timestampHeader: string | null | undefined
): Record<string, unknown> {
  const secret = process.env.GR4VY_WEBHOOK_SECRET;
  if (!secret) throw new Error("GR4VY_WEBHOOK_SECRET not configured.");

  // Verify HMAC signature (throws if invalid)
  verifyWebhook(payload, secret, signatureHeader, timestampHeader, 300);

  const event = JSON.parse(payload);
  // Store or process the transaction result
  return event;
}

# purchases.py (continued)
import json
import hmac
import hashlib

def handle_webhook(
    payload: str,
    signature: str | None,
    timestamp: str | None,
) -> dict:
    """Verify and process a Gr4vy webhook."""
    secret = os.environ.get("GR4VY_WEBHOOK_SECRET")
    if not secret:
        raise ValueError("GR4VY_WEBHOOK_SECRET not configured.")

    if not signature or not timestamp:
        raise ValueError("Missing signature or timestamp header.")

    # Verify HMAC signature
    message = f"{timestamp}.{payload}"
    expected = hmac.new(
        secret.encode(), message.encode(), hashlib.sha256
    ).hexdigest()
    if not hmac.compare_digest(expected, signature):
        raise ValueError("Invalid webhook signature.")

    event = json.loads(payload)
    # Store or process the transaction result
    return event