Integracja Commerce z Moją Aplikacją

Uruchamiaj checkouty i blokuj płatne funkcje bezpośrednio z poziomu kodu aplikacji.

Po połączeniu Stripe i utworzeniu produktu Twoja aplikacja może przyjmować płatności. W aplikacji zbudowanej w Proyekcie odbywa się to z poziomu przeglądarki, przez publiczne API commerce — nie musisz stawiać żadnego backendu i nie ma tu żadnego tajnego klucza.

Katalogi sklepu to treść. Jeśli Twoje produkty stanowią opartą na treści kolekcję sprzedażową (zobacz Products & Features), katalog i ceny odczytujesz przez API Content — dane produktów są przechowywane właśnie tam. Checkout uruchamiasz w ten sam sposób, przekazując variant_id powiązanego produktu Commerce.

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

Uruchom checkout

commerceCheckout tworzy sesję checkout hostowaną przez Stripe i zwraca URL, pod który kierujesz kupującego. Nie musisz najpierw tworzyć klienta — platforma zapisuje go na podstawie samego checkoutu:

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;

Obsługiwanych jest wiele pozycji. W przypadku subskrypcji quantity oznacza liczbę miejsc. Jeśli kupujący wpisał kod kuponu, przekaż go dalej — serwer zweryfikuje kod i wyliczy rabat na podstawie Twoich danych commerce, nigdy na podstawie kwoty przesłanej przez przeglądarkę.

Zablokuj płatną funkcję

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

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

Kluczem jest slug funkcji (np. pro_features), a nie id obiektu funkcji. Sprawdzenie odbywa się po stronie serwera i jest powiązane z zalogowaną sesją, więc nie da się go sfałszować z przeglądarki. Zobacz Products & Features, aby poznać model uprawnień.

Pozwól AI wszystko połączyć

• "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."