Integrasikan Commerce ke Aplikasi Saya

Mulai checkout dan batasi akses fitur premium langsung dari kode aplikasi Anda.

Setelah menghubungkan Stripe dan membuat produk, aplikasi Anda sudah bisa menerima pembayaran. Pada aplikasi yang dibuat dengan Proyecta, semua ini berjalan dari browser terhadap API commerce publik — tidak ada backend yang perlu Anda siapkan, dan tidak ada secret key yang terlibat.

Katalog storefront adalah konten. Jika produk Anda merupakan sellable collection berbasis konten (lihat Products & Features), Anda membaca katalog dan merender harga melalui API Content — data produk tersimpan di sana. Anda tetap memulai checkout dengan cara yang sama, dengan meneruskan variant_id dari produk Commerce yang terhubung.

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

Memulai checkout

commerceCheckout membuat sesi checkout yang di-host oleh Stripe dan mengembalikan URL untuk mengarahkan pembeli ke sana. Anda tidak perlu membuat customer terlebih dahulu — platform mencatatnya dari checkout itu sendiri:

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;

Beberapa line item didukung. Untuk langganan, quantity adalah jumlah kursi (seat count). Jika pembeli mengetikkan kode kupon, teruskan kode tersebut — server memvalidasinya dan menghitung diskon dari data commerce Anda, tidak pernah dari jumlah yang dikirim browser.

Membatasi akses fitur premium

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

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

Key-nya adalah slug fitur (misalnya pro_features), bukan id dari objek fitur. Pemeriksaan dilakukan di sisi server dan terikat pada sesi yang sedang masuk, sehingga tidak dapat dipalsukan dari browser. Lihat Products & Features untuk model entitlement.

Biarkan AI mengaturnya

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