รวมระบบ Commerce เข้ากับแอปของฉัน

เริ่ม checkout และกำหนดสิทธิ์การใช้ฟีเจอร์ premium ได้โดยตรงจากโค้ดแอปของคุณ

เมื่อเชื่อมต่อ Stripe และสร้างสินค้าเรียบร้อยแล้ว แอปของคุณก็รับชำระเงินได้ทันที ในแอปที่สร้างด้วย Proyecta ขั้นตอนนี้ทำงาน จากเบราว์เซอร์ โดยเรียก public commerce API — คุณไม่ต้องตั้ง backend ขึ้นมาเอง และไม่มี secret key เข้ามาเกี่ยวข้อง

แคตตาล็อก Storefront คือ content หากสินค้าของคุณเป็น sellable collection ที่อิงกับ content (ดู Products & Features) คุณจะอ่านแคตตาล็อกและแสดงราคาผ่าน Content API เนื่องจากข้อมูลสินค้าอยู่ที่นั่น แต่การเริ่ม checkout ยังคงทำแบบเดิม โดยส่ง variant_id ของ Commerce product ที่ผูกไว้

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

เริ่ม checkout

commerceCheckout สร้าง checkout session ที่โฮสต์โดย Stripe และคืน URL สำหรับพาผู้ซื้อไปยังหน้าชำระเงิน คุณไม่ต้องสร้าง customer ก่อน — แพลตฟอร์มจะบันทึก customer จากตัว 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;

รองรับ line item หลายรายการ สำหรับ subscription quantity หมายถึงจำนวน seat หากผู้ซื้อกรอกโค้ดคูปองมา ก็ส่งต่อไปได้เลย — เซิร์ฟเวอร์จะตรวจสอบและคำนวณส่วนลดจากข้อมูล commerce ของคุณ ไม่ใช่จากจำนวนเงินที่เบราว์เซอร์ส่งมา

กำหนดสิทธิ์การใช้ฟีเจอร์ premium

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

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

key คือ slug ของฟีเจอร์ (เช่น pro_features) ไม่ใช่ id ของ object ฟีเจอร์ การตรวจสอบเกิดขึ้นฝั่งเซิร์ฟเวอร์และผูกกับ session ที่ล็อกอินอยู่ จึงปลอมแปลงจากเบราว์เซอร์ไม่ได้ ดู Products & Features สำหรับรายละเอียดโมเดล entitlement

ให้ 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."