Інтегруйте комерцію у свій застосунок

Запускайте оформлення замовлень та обмежуйте доступ до преміум-функцій безпосередньо з коду вашого застосунку.

Після підключення Stripe та створення продукту ваш застосунок може приймати платежі. У застосунку, створеному в Proyecta, це відбувається з браузера через публічний commerce API — вам не потрібно піднімати бекенд і не задіяно жодного секретного ключа.

Каталоги магазину — це контент. Якщо ваші продукти є підкріпленою контентом колекцією для продажу (див. Продукти та функції), ви зчитуєте каталог і відображаєте ціни через API Контенту — дані продукту зберігаються там. Оформлення замовлення запускається тим самим способом із передачею variant_id пов’язаного Commerce-продукту.

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 означає кількість місць. Якщо покупець ввів промокод, передайте його разом із рештою — сервер перевірить код і обчислить знижку за вашими даними в Commerce, а не за сумою, яку надсилає браузер.

Обмеження доступу до преміум-функції

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

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

Ключ — це slug функції (наприклад, pro_features), а не id об’єкта функції. Перевірка виконується на сервері й прив’язана до сесії авторизованого користувача, тож підробити її з браузера неможливо. Дивіться Продукти та функції для ознайомлення з моделлю прав доступу.

Нехай ШІ все налаштує за вас

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