앱에 커머스 통합하기

앱 코드에서 바로 결제를 시작하고 프리미엄 기능 접근을 제한하세요.

Stripe를 연결하고 상품을 생성했다면, 앱에서 결제를 받을 수 있습니다. Proyecta로 만든 앱에서는 이 과정이 공개 커머스 API를 상대로 브라우저에서 실행됩니다 — 여러분이 따로 구축할 백엔드도, 사용할 시크릿 키도 없습니다.

스토어프론트 카탈로그는 콘텐츠입니다. 상품이 콘텐츠 기반의 판매 가능한 컬렉션인 경우(Products & Features 참고), 카탈로그를 읽고 가격을 렌더링할 때는 Content API를 사용합니다 — 상품 데이터는 해당 API에 있습니다. 결제 시작 방식은 동일하며, 연결된 Commerce 상품의 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;

여러 line item을 지원합니다. 구독의 경우 quantity는 시트 수를 나타냅니다. 구매자가 쿠폰 코드를 입력했다면 함께 전달하세요 — 서버가 코드를 검증하고 커머스 데이터를 기준으로 할인액을 계산하며, 브라우저가 보낸 금액은 절대 사용하지 않습니다.

프리미엄 기능 접근 제한

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

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

여기서 사용하는 키는 기능 객체의 id가 아니라 기능의 슬러그(예: pro_features)입니다. 확인은 서버에서, 로그인된 세션을 기준으로 이루어지므로 브라우저에서 위조할 수 없습니다. 자격(entitlement) 모델에 대한 자세한 내용은 Products & Features를 참고하세요.

AI로 자동으로 연결하기

• "내 상품을 보여주고 버튼 클릭 시 결제를 시작하는 /pricing 페이지를 만들어줘."
• "/pro 라우트를 보호해줘 — pro_features 접근 권한이 있는 고객만 볼 수 있도록."
• "쿠폰 코드 입력란과 Checkout 버튼이 있는 장바구니를 추가해줘."