Commerce Integreren in Mijn App

Start checkouts en scherm premium functies rechtstreeks af vanuit je app-code.

Zodra je Stripe hebt gekoppeld en een product hebt aangemaakt, kan je app betalingen aannemen. In een app die met Proyecta is gebouwd, gebeurt dit vanuit de browser tegen de publieke commerce-API — je hoeft geen backend op te zetten en er komt geen geheime sleutel aan te pas.

Winkelcatalogi zijn content. Als je producten een content-gedreven verkoopbare collectie zijn (zie Producten & Functies), lees je de catalogus en toon je prijzen via de Content API — de productdata staat daar. Je start de checkout op dezelfde manier, door de variant_id van het gekoppelde Commerce-product mee te geven.

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

Een checkout starten

commerceCheckout maakt een door Stripe gehoste checkout-sessie aan en geeft een URL terug om de koper naartoe te sturen. Je maakt niet eerst een klant aan — het platform legt er zelf een vast op basis van de 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;

Meerdere regelitems worden ondersteund. Voor abonnementen staat quantity voor het aantal seats. Heeft een koper een couponcode ingetypt, geef die dan mee — de server valideert hem en berekent de korting op basis van je commerce-gegevens, nooit op basis van een bedrag dat de browser aanlevert.

Een premium functie afschermen

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

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

De sleutel is de slug van de functie (bijv. pro_features), niet het id van het functie-object. De controle gebeurt server-side en is gekoppeld aan de ingelogde sessie, dus hij kan niet vanuit de browser worden vervalst. Zie Producten & Functies voor het rechtenmodel.

Laat de AI het koppelen

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