שילוב מסחר באפליקציה שלי

התחל תהליכי תשלום והגבל גישה לתכונות פרימיום ישירות מקוד האפליקציה שלך.

לאחר שחיברת את Stripe ויצרת מוצר, האפליקציה שלך יכולה לקבל תשלומים. באפליקציה שנבנתה ב-Proyecta זה רץ מהדפדפן מול ה-API הציבורי של המסחר — אין backend שאתה צריך להקים, ואין מפתח סודי מעורב.

קטלוגי חנות הם תוכן. אם המוצרים שלך הם אוסף הניתן למכירה המבוסס על תוכן (ראה מוצרים ותכונות), אתה קורא את הקטלוג ומציג מחירים דרך ה-API של תוכן — נתוני המוצר נמצאים שם. אתה עדיין מתחיל תהליך תשלום באותה הדרך, תוך העברת variant_id של מוצר ה-Commerce המשולב.

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

התחלת תהליך תשלום

commerceCheckout יוצר session לתהליך תשלום המתארח ב-Stripe ומחזיר כתובת URL שאליה תשלח את הקונה. אינך יוצר לקוח מראש — הפלטפורמה רושמת אותו מתוך ה-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 items. עבור מנויים, quantity הוא מספר המושבים. אם הקונה הקליד קוד קופון, העבר אותו הלאה — השרת מאמת אותו ומחשב את ההנחה מנתוני ה-commerce שלך, לעולם לא מסכום שהדפדפן מספק.

הגבלת תכונה פרימיום

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

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

המפתח הוא ה-slug של התכונה (למשל pro_features), ולא ה-id של אובייקט התכונה. הבדיקה מתבצעת בצד השרת וקשורה ל-session המחובר, כך שאי אפשר לזייף אותה מהדפדפן. ראה מוצרים ותכונות למודל ההרשאות.

תן ל-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."