Integrare il Commerce nella Mia App

Avvia checkout e limita le funzionalità premium direttamente dal codice della tua app.

Una volta connesso Stripe e creato un prodotto, la tua app può accettare pagamenti. In un’app costruita con Proyecta questo avviene dal browser tramite l’API pubblica di commerce — non devi predisporre alcun backend e non è coinvolta nessuna chiave segreta.

I cataloghi dello storefront sono contenuto. Se i tuoi prodotti sono una collezione vendibile basata su contenuti (vedi Prodotti e Funzionalità), leggi il catalogo e mostri i prezzi tramite l’API Content — i dati del prodotto si trovano lì. Il checkout si avvia comunque nello stesso modo, passando il variant_id del prodotto Commerce integrato.

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

Avvia un checkout

commerceCheckout crea una sessione di checkout ospitata da Stripe e restituisce un URL verso cui indirizzare l’acquirente. Non devi creare prima un cliente — la piattaforma ne registra uno a partire dal checkout stesso:

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;

Sono supportate più righe d’ordine. Per gli abbonamenti, quantity rappresenta il numero di posti. Se l’acquirente ha digitato un codice coupon, passalo insieme al resto — il server lo convalida e calcola lo sconto a partire dai tuoi dati di commerce, mai da un importo fornito dal browser.

Limita una funzionalità premium

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

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

La chiave è lo slug della funzionalità (ad es. pro_features), non l’id dell’oggetto funzionalità. La verifica avviene lato server ed è legata alla sessione autenticata, quindi non può essere falsificata dal browser. Vedi Prodotti e Funzionalità per il modello dei diritti.

Lascia che l’AI faccia il lavoro

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