Integrar Comércio ao Meu App

Inicie checkouts e controle o acesso a funcionalidades premium diretamente no código do seu app.

Depois de conectar o Stripe e criar um produto, seu app já pode receber pagamentos. Em um app criado com a Proyecta, isso acontece a partir do navegador, contra a API pública de comércio — não há backend para você subir e nenhuma chave secreta envolvida.

Catálogos de vitrine são conteúdo. Se os seus produtos fazem parte de uma coleção vendável com suporte a conteúdo (veja Produtos e Funcionalidades), você lê o catálogo e renderiza os preços por meio da API de Conteúdo — os dados dos produtos ficam lá. O checkout ainda é iniciado da mesma forma, passando o variant_id do produto de Comércio vinculado.

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

Iniciar um checkout

commerceCheckout cria uma sessão de checkout hospedada pelo Stripe e retorna uma URL para onde você envia o comprador. Você não precisa criar um cliente antes — a plataforma registra um a partir do próprio 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;

Múltiplos itens de linha são suportados. Para assinaturas, quantity é a quantidade de assentos. Se o comprador digitou um código de cupom, repasse-o — o servidor o valida e calcula o desconto a partir dos seus dados de comércio, nunca a partir de um valor enviado pelo navegador.

Controlar o acesso a uma funcionalidade premium

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

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

A chave é o slug da funcionalidade (ex.: pro_features), não o id do objeto da funcionalidade. A verificação roda no servidor e está atrelada à sessão autenticada, então não pode ser falsificada pelo navegador. Veja Produtos e Funcionalidades para entender o modelo de direitos.

Deixe a IA configurar tudo

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