Building Marketplace Apps

npm install @stellartools/app-embed-bridge

import { useEffect, useState } from "react";

import { stellar } from "@stellartools/app-embed-bridge";

export default function App() {
  const [ctx, setCtx] = useState(null);

  useEffect(() => {
    const context = stellar.init((update) => {
      // called whenever the host broadcasts a context change
      setCtx((prev) => ({ ...prev, ...update }));
    });
    setCtx(context);
  }, []);

  if (!ctx) return null;

  return (
    <div>
      Org: {ctx.organizationId} · Env: {ctx.environment}
    </div>
  );
}

stellar.navigate("/payments"); // push the user to a dashboard route
stellar.reload(); // tell the host to refetch its data

{
  "name": "My App",
  "description": "A short description shown in the marketplace (max 200 chars).",
  "homepageUrl": "https://myapp.com",
  "baseUrl": "https://myapp.com/stellartools",
  "webhookUrl": "https://myapp.com/webhooks/stellar",
  "scopes": ["read:customers", "read:payments"],
  "version": "1.0.0"
}

import type { WebhookEvent } from "@stellartools/core";

app.post("/webhooks/stellar", (req, res) => {
  const event = req.body as WebhookEvent;

  switch (event.type) {
    case "payment.confirmed":
      await syncPayment(event.data.object);
      break;
    case "subscription.canceled":
      await handleChurn(event.data.object);
      break;
  }

  res.status(200).send("ok");
});