Integrar Comercio en Mi App

Inicia checkouts y restringe funciones premium directamente desde el código de tu app.

Una vez que hayas conectado Stripe y creado un producto, tu app puede recibir pagos. En una app construida con Proyecta esto corre desde el navegador contra la API pública de comercio — no hay backend que tengas que levantar, ni llave secreta involucrada.

Los catálogos de tienda son contenido. Si tus productos son una colección vendible respaldada por contenido (consulta Products & Features), lees el catálogo y renderizas los precios a través de la API de Content — los datos del producto viven ahí. Igual inicias el checkout de la misma manera, pasando el variant_id del producto de Commerce integrado.

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

Iniciar un checkout

commerceCheckout crea una sesión de checkout alojada en Stripe y devuelve una URL a la que enviar al comprador. No creas un cliente primero — la plataforma registra uno a partir del propio checkout:

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;

Se admiten múltiples líneas de compra. Para suscripciones, quantity es la cantidad de asientos. Si el comprador escribió un código de cupón, pásalo también — el servidor lo valida y calcula el descuento a partir de tus datos de commerce, nunca a partir de un monto que envíe el navegador.

Restringir una función premium

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

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

La clave es el slug de la función (p. ej. pro_features), no el id del objeto de función. La verificación ocurre del lado del servidor y está ligada a la sesión iniciada, así que no se puede falsificar desde el navegador. Consulta Products & Features para conocer el modelo de derechos de acceso.

Deja que la IA lo conecte

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