Commerce in meine App integrieren

Starte Checkouts und sichere Premium-Features direkt aus deinem App-Code ab.

Sobald du Stripe verbunden und ein Produkt erstellt hast, kann deine App Zahlungen entgegennehmen. In einer mit Proyecta erstellten App läuft das aus dem Browser heraus gegen die öffentliche Commerce-API – du musst kein Backend betreiben, und es ist kein geheimer Schlüssel im Spiel.

Storefront-Kataloge sind Inhalte. Wenn deine Produkte Teil einer inhaltsbasierten verkäuflichen Sammlung sind (siehe Produkte & Features), liest du den Katalog und renderst Preise über die Content-API – die Produktdaten leben dort. Den Checkout startest du weiterhin auf dieselbe Weise und übergibst die variant_id des verknüpften Commerce-Produkts.

import * as platform from '@/lib/platformClient.ts';
import { useEntitlement } from '@/hooks/useEntitlement.ts';

Einen Checkout starten

commerceCheckout erstellt eine von Stripe gehostete Checkout-Session und gibt eine URL zurück, zu der du den Käufer weiterleitest. Du legst vorher keinen Kunden an – die Plattform erfasst ihn aus dem Checkout selbst:

const { url } = await platform.commerceCheckout({
    lineItems: [{ variantId: 'var_pro_monthly', quantity: 1 }],
    successUrl: 'https://myapp.com/welcome',
    cancelUrl: 'https://myapp.com/pricing',
    customerEmail: shopperEmail, // optional — prefills Stripe checkout
});

window.location.href = url;

Mehrere Positionen werden unterstützt. Bei Abonnements steht quantity für die Anzahl der Plätze. Hat ein Käufer einen Coupon-Code eingegeben, gib ihn einfach mit – der Server prüft ihn und berechnet den Rabatt aus deinen Commerce-Daten, niemals aus einem Betrag, den der Browser liefert.

Ein Premium-Feature absichern

const { hasAccess, isLoading } = useEntitlement('pro_features');

if (isLoading) return <Spinner />;
if (!hasAccess) return <UpgradePrompt />;
return <ProOnlyThing />;

Der Schlüssel ist der Feature-Slug (z. B. pro_features), nicht die id des Feature-Objekts. Die Prüfung läuft serverseitig und ist an die angemeldete Session gebunden, lässt sich vom Browser aus also nicht fälschen. Zum Entitlement-Modell siehe Produkte & Features.

Die KI alles verdrahten lassen

• "Build a /pricing page that shows my products and starts a checkout when a button is clicked."
• "Gate the /pro route so only customers with pro_features access can see it."
• "Add a cart with a coupon code field and a Checkout button."