Intégrer le Commerce dans Mon Application

Démarre des paiements et restreins les fonctionnalités premium directement depuis le code de ton application.

Une fois Stripe connecté et un produit créé, ton application peut encaisser des paiements. Dans une application créée avec Proyecta, cela se passe depuis le navigateur via l’API commerce publique — tu n’as aucun backend à mettre en place, et aucune clé secrète n’est impliquée.

Les catalogues de boutique sont du contenu. Si tes produits constituent une collection vendable adossée à du contenu (voir Produits & Fonctionnalités), tu lis le catalogue et affiches les prix via l’API Contenu — les données produit y résident. Tu démarres tout de même le paiement de la même façon, en passant le variant_id du produit Commerce associé.

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

Démarrer un paiement

commerceCheckout crée une session de paiement hébergée par Stripe et retourne une URL vers laquelle envoyer l’acheteur. Tu n’as pas besoin de créer un client au préalable — la plateforme en enregistre un à partir du paiement lui-même :

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

window.location.href = url;

Plusieurs lignes d’articles sont prises en charge. Pour les abonnements, quantity représente le nombre de sièges. Si l’acheteur a saisi un code promo, transmets-le — le serveur le valide et calcule la remise à partir de tes données commerce, jamais à partir d’un montant fourni par le navigateur.

Restreindre une fonctionnalité premium

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

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

La clé correspond au slug de la fonctionnalité (par ex. pro_features), et non à l’id de l’objet fonctionnalité. La vérification est faite côté serveur et liée à la session connectée : elle ne peut donc pas être falsifiée depuis le navigateur. Consulte Produits & Fonctionnalités pour en savoir plus sur le modèle d’entitlements.

Laisser l’IA tout configurer

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