アプリにコマース機能を統合する

アプリのコードから直接チェックアウトを開始し、プレミアム機能へのアクセスを制御します。

Stripe を接続してプロダクトを作成すれば、アプリで決済を受け付けられます。Proyecta で作成したアプリでは、これはブラウザーから公開コマース API に対して実行されます。自分でバックエンドを用意する必要はなく、シークレットキーも一切関与しません。

ストアフロントカタログはコンテンツです。 プロダクトがコンテンツをベースにした sellable collection（Products & Features を参照）である場合、カタログの読み取りと価格のレンダリングは Content API を通じて行います。プロダクトデータはそちらに保存されています。チェックアウトの開始方法は同じで、コマースプロダクトの variant_id を渡すだけです。

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

チェックアウトを開始する

commerceCheckout は Stripe がホストするチェックアウトセッションを作成し、購入者を送り出すための URL を返します。事前にカスタマーを作成する必要はありません。プラットフォームがチェックアウト自体からカスタマーを記録します。

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;

複数のラインアイテムを指定できます。サブスクリプションの場合、quantity はシート数です。購入者がクーポンコードを入力した場合は、それも一緒に渡してください。サーバーがコードを検証し、（ブラウザーから送られた金額ではなく）あなたのコマースデータから割引額を算出します。

プレミアム機能をゲートする

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

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

指定するのは機能のスラッグ（例: pro_features）であり、機能オブジェクトの id ではありません。チェックはサーバー側で行われ、サインイン中のセッションに紐付いているため、ブラウザーから偽装することはできません。エンタイトルメントのモデルについては Products & Features を参照してください。

AI に組み込んでもらう

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