Payments

Payments are an end-to-end billing flow you can build on. A provider factory registers each provider only when its env vars are present. Creem and Stripe are the env-selectable providers; ZPay is a China-oriented (Alipay) demo provider with its own webhook. Checkout, the orders and billing pages, subscription state, and the Creem/Stripe webhooks (including the subscription lifecycle and refunds) all run against real data.

Pick a provider

The provider factory

server/payment/index.ts exposes getPaymentProviderFactory() (a singleton). The factory registers a provider only when its env vars are present:

• ZPay when NUXT_ZPAY_URL, NUXT_ZPAY_MERCH_ID, and NUXT_ZPAY_MERCH_KEY are all set.
• Creem when NUXT_CREEM_API_KEY is set.
• Stripe when NUXT_STRIPE_API_KEY is set.

The default provider used by the checkout flow comes from getPaymentProvider() — creem unless NUXT_PUBLIC_PAYMENT_PROVIDER=stripe. (ZPay is reachable by its own webhook but is not selectable through NUXT_PUBLIC_PAYMENT_PROVIDER.)

Each provider implements the interface in server/payment/types.ts:

interface PaymentProvider {
  createPayment(request: CreatePaymentRequest): Promise<CreatePaymentResponse>;
  handleCallback(callbackParams: unknown): Promise<CallbackVerificationResult>;
}

Providers live in server/payment/providers/{creem,stripe,zpay}-provider.ts.

Config sources

Checkout flow

Webhook paths

Creem and Stripe handle the full subscription lifecycle and refunds (see their pages). ZPay, as a demo, only handles its success/failure callback.

What's wired up

• The orders page (account/order.vue) lists the user's real payment history via GET /api/payment/orders.
• The subscription page (account/subscription.vue) shows live plan, status, period, and cancel state.
• The billing page (setting/billing.vue) renders the plan summary and billing history from GET /api/user/billing, and links Stripe customers to the Billing Portal.
• The order-status query (query.get.ts) is authenticated and scoped to the signed-in user.

Related pages