Taiwlin

Unlock subscriptions with the right payment path.

Taiwlin is a subscription access page for logged-in users where they must choose between Pay-as-you-go or Bayar di awal before activation. It helps businesses control subscription access based on payment status, with instant activation for prepay customers and automatic activation for usage-based customers with per-transaction fees.

Business Goals

  • Increase subscription checkout completion rate to 70 percent within 90 days by simplifying plan choice and activation.
  • Reduce manual activation support tickets by 50 percent within 60 days through automated payment-status based access control.
  • Improve paid subscription conversion from logged-in visit to active subscription to 35 percent within 120 days.
  • Reach 95 percent successful activation within 2 minutes of payment confirmation for Bayar di awal customers.
  • Achieve at least 25 percent of new subscriptions on Pay-as-you-go within 6 months to validate usage-based monetization.

User Goals

  • Let users access the subscriptions page only after login.
  • Help users clearly choose between Pay-as-you-go and Bayar di awal.
  • Activate Bayar di awal subscriptions immediately when payment status becomes active.
  • Activate Pay-as-you-go subscriptions immediately after selection while charging a fee per transaction.
  • Show clear payment and activation status so users know what happens next.

Non-Goals

  • Not a full billing ledger or accounting system.
  • Not a public marketing site; this page is only for authenticated users.
  • Not a multi-currency international payments launch in the first release.
  • Not a complex coupon, referral, or promotion engine.

Subscriber Dina, 29 - Dina is a returning user who logs in to manage access to a paid service. She wants the fastest way to get active without confusion about payment terms.

Subscriber Dina, 29

  • As a logged-in subscriber, I want to see only valid subscription options, so that I can choose quickly without browsing unrelated pages.
  • As a subscriber, I want Bayar di awal to activate after payment becomes active, so that I can start using the service right away.
  • As a subscriber, I want Pay-as-you-go to be active immediately with visible per-transaction fees, so that I understand the cost before I proceed.

Operations Admin Rafi, 38 - Rafi manages subscription access and payment exceptions. He needs a reliable system that reflects payment status and minimizes manual follow-up.

Operations Admin Rafi, 38

  • As an admin, I want subscription activation to follow payment status automatically, so that I do not manually approve every account.
  • As an admin, I want to see failed or pending payments clearly, so that I can resolve issues faster.
  • As an admin, I want audit logs for plan choice and activation, so that I can investigate disputes.

Finance Lead Sari, 41 - Sari cares about revenue recognition and transaction fees. She needs the plan logic to produce predictable billing behavior and clean reporting.

Finance Lead Sari, 41

  • As a finance lead, I want Pay-as-you-go transactions separated from upfront payments, so that I can reconcile revenue correctly.
  • As a finance lead, I want activation tied to confirmed payment status, so that unpaid accounts do not become active.
  • As a finance lead, I want fee and payment history exportable, so that I can review revenue and transaction costs.

Authentication and Access Control · High priority

  • The subscriptions page must only be accessible to authenticated users and should redirect unauthenticated visitors to login.
  • Check session or token before rendering the page.
  • Redirect unauthenticated users to the login screen with a return URL.
  • Prevent direct API access to subscription actions without valid auth.
  • Show a loading state while auth status is being resolved.
  • Expire access cleanly and preserve user state after re-login.

Subscription Plan Selection · High priority

  • Users must choose one of two plans: Pay-as-you-go or Bayar di awal, with clear differences in activation and fees.
  • Display two selectable cards with concise pricing and behavior descriptions.
  • Highlight Pay-as-you-go as active immediately with per-transaction fees.
  • Highlight Bayar di awal as requiring payment confirmation before activation.
  • Prevent proceeding without selecting exactly one plan.
  • Persist the selected plan if the user navigates away and returns during the same session.

Payment and Activation Logic · High priority

  • Activation state must depend on plan type and payment status.
  • For Bayar di awal, set status to pending until payment status becomes active.
  • For Pay-as-you-go, activate immediately after plan confirmation.
  • Listen for payment provider webhooks or polling to update status.
  • Block access to paid features if payment is pending, failed, or expired.
  • Display timestamps and human-readable status labels for transparency.

Fee Handling and Transaction Tracking · Medium priority

  • Pay-as-you-go must apply a fee per transaction and expose it to the user.
  • Show fee per transaction before confirmation.
  • Record each billable transaction with amount, fee, and reference ID.
  • Summarize estimated monthly fees on the page for clarity.
  • Handle zero-usage periods without creating subscription errors.
  • Support refunds or reversals as separate audit events.

Status Feedback and Error Handling · Medium priority

  • The UI must communicate state changes, failures, and next steps clearly.
  • Show success, pending, failed, and expired states with distinct visuals.
  • Provide retry actions for payment confirmation failures.
  • Display support contact or help text when payment processing stalls.
  • Prevent duplicate submissions during payment finalization.
  • Log client-side errors for debugging without exposing sensitive details.

Authenticated Subscription Access Entry

  • User signs in with email or SSO and lands on the subscriptions page.
  • System verifies session and redirects unauthenticated visitors to login.
  • The page loads plan cards for Pay-as-you-go and Bayar di awal in under 2 seconds.
  • User selects a plan and sees the relevant cost and activation rules immediately.
  • User confirms the selection and is taken to payment or activation status.
  • Target time to value: under 90 seconds from login to active access for eligible users.

1. Login Gate

  • Only authenticated users can reach the subscriptions page.
  • If no valid session exists, redirect to login with return path.
  • If session refresh is in progress, show a skeleton state instead of flashing content.
  • Handle expired tokens by forcing re-authentication and preserving selected plan state.

2. Choose Subscription Type

  • Present the two available subscription options with clear differences.
  • Show Pay-as-you-go and Bayar di awal as equal visual choices.
  • Include fee per transaction for Pay-as-you-go and activation rules for both plans.
  • Prevent selection ambiguity by using single-select behavior and confirm-state CTA.

3. Confirm Payment Path

  • Route the user based on the selected plan and payment outcome.
  • Bayar di awal proceeds to payment initiation and remains pending until payment status is active.
  • Pay-as-you-go confirms instantly and creates an active subscription state.
  • If payment is declined or pending too long, show a retry or update payment method action.

4. Activate Access

  • Grant access only when the plan rules are satisfied.
  • Set Bayar di awal to active only after verified payment success via webhook or polling.
  • Set Pay-as-you-go to active immediately after confirmation.
  • If activation fails, keep the user on the page with a visible error and next-step guidance.

5. Track and Manage

  • Let users review current status and transaction history.
  • Display current plan, activation state, and last payment time.
  • Show a transaction list for Pay-as-you-go usage and fees.
  • Provide a support link for billing questions or mismatched status.

Advanced Subscription Controls

  • Webhook-driven payment reconciliation for near real-time status updates.
  • Admin override to manually mark a payment as active after verification.
  • Usage and fee summary for Pay-as-you-go by day, week, and month.
  • Exportable CSV of activation events and transaction fees.
  • Grace-period handling for transient payment provider outages.

Visual and Interaction Principles

  • Use two large card buttons with different accent colors for the two plan types.
  • Show clear status chips for pending, active, failed, and expired states.
  • Keep the flow mobile-first with one primary action per screen.
  • Use accessible contrast ratios, keyboard navigation, and screen-reader labels.
  • Load quickly with skeleton states and minimize layout shift during status refresh.

Dina logs in expecting to unlock her subscription quickly, but she is met with a clear choice instead of a confusing pricing wall. She sees Bayar di awal for an upfront commitment and Pay-as-you-go for immediate access with a per-transaction fee, so she chooses the option that matches how often she plans to use the service.

She selects Bayar di awal, pays, and the page updates to Active as soon as payment status is confirmed. Because the system only activates authenticated users and uses payment-state rules automatically, Dina gets access in less than two minutes without waiting for manual approval.

For the business, that means fewer support requests, fewer unpaid activations, and cleaner billing records. The subscription page becomes both a conversion point and a reliable access control layer.

User-Centric Metrics

  • 90 percent of logged-in users understand the difference between the two plans within 10 seconds of landing on the page.
  • 95 percent of successful Bayar di awal activations complete within 2 minutes of payment confirmation.
  • Less than 3 percent of users abandon after viewing the plan cards.
  • User-reported confusion about activation status drops below 10 percent in post-launch surveys.
  • Pay-as-you-go users can see fee estimates with 100 percent availability on the page.

Business Metrics

  • Increase subscription conversion rate to 35 percent within 4 months.
  • Reduce manual billing and activation support tickets by 50 percent within 60 days.
  • Reach 25 percent adoption of Pay-as-you-go among new subscribers within 6 months.
  • Maintain month-over-month active subscription growth of at least 8 percent for the first 2 quarters.

Technical Metrics

  • 99.9 percent page availability monthly.
  • Subscription state updates visible within 5 seconds of payment provider confirmation.
  • P95 page interaction latency under 300 ms after initial load.
  • Zero unauthorized access to subscription content in routine security testing.

Tracking Plan

  • track_auth_success
  • track_subscription_page_view
  • track_plan_selected
  • track_checkout_started
  • track_payment_status_changed
  • track_subscription_activated
  • track_fee_viewed
  • track_support_clicked

Technical Needs

  • Frontend built in SvelteKit with server-side route protection.
  • State management for auth and subscription status using writable stores or server load functions.
  • Backend API for subscription creation, payment initiation, and activation updates.
  • Payment webhook handler to reconcile payment provider events.
  • PostgreSQL for subscriptions, users, payments, and transaction fee records.
  • Redis or similar cache for short-lived payment status polling and rate limiting.
  • Centralized logging and error monitoring with Sentry or equivalent.

Integration Points

  • Auth0 or Clerk for authentication and session management.
  • Midtrans or Xendit for payment processing in Indonesia.
  • PostgreSQL database via Prisma or Drizzle ORM.
  • Sentry for application error monitoring.
  • Postmark or SendGrid for payment and activation email notifications.

Data Storage & Privacy

  • Store only necessary personal data for billing and access control.
  • Encrypt payment-related identifiers and tokens at rest.
  • Do not store raw card data; rely on the payment provider’s PCI-compliant flow.
  • Provide data retention rules for payment logs and audit trails, aligned with GDPR and CCPA principles where applicable.
  • Log access and activation events with masked identifiers for support and compliance.

Scalability & Performance

  • Render the subscriptions page server-side to keep perceived latency low.
  • Use webhook-driven state updates to reduce polling load.
  • Cache plan metadata and fee configuration to avoid repeated database reads.
  • Support horizontal scaling for webhook workers during payment spikes.

Potential Challenges

  • Payment webhooks may arrive out of order; mitigate with idempotent event processing and event versioning.
  • Users may refresh during payment pending; mitigate with persisted state and clear resume behavior.
  • Fee calculations may be inconsistent across transactions; mitigate with a single pricing service and tested rounding rules.
  • Unauthorized access attempts may expose route gaps; mitigate with server-side guards and integration tests.
  • Provider downtime may delay activation; mitigate with retry queues, fallback polling, and status messaging.

Team & resourcing - Small team - 2 engineers, 1 designer, part-time PM, shared QA support

Phase 1: MVP Access Gate and Plan Selection · Weeks 1-2

  • Authenticated subscriptions route in SvelteKit
  • Two plan cards: Pay-as-you-go and Bayar di awal
  • Basic redirect for unauthenticated users
  • Static UI states for pending, active, and failed

Phase 2: Payment and Activation Flow · Weeks 3-4

  • Payment provider integration
  • Bayar di awal payment confirmation flow
  • Immediate activation for Pay-as-you-go
  • Webhook handler and status sync

Phase 3: Fee Tracking and Admin Visibility · Weeks 5-6

  • Per-transaction fee recording
  • Transaction history and status timeline
  • Admin audit log and manual override tools
  • Support and error handling improvements

Phase 4: Hardening and Launch · Weeks 7-8

  • Analytics events and dashboards
  • Performance tuning and load testing
  • Security review for auth and route protection
  • Production rollout with monitoring and rollback plan

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a SvelteKit subscription access page called Taiwlin.

Product summary:
Authenticated users can access a subscriptions page with exactly two plan options: Pay-as-you-go and Bayar di awal. The page must be protected so only logged-in users can view it. Bayar di awal becomes active only when payment status is confirmed active. Pay-as-you-go becomes active immediately after confirmation, but each transaction must include a visible fee per transaction.

Core screens and flows:
1. Login gate with redirect back to subscriptions after authentication
2. Subscriptions page showing two selectable plan cards
3. Checkout/payment status panel for Bayar di awal
4. Immediate activation confirmation for Pay-as-you-go
5. Subscription status and transaction history section
6. Error, pending, failed, expired, and retry states

Tech stack:
Use SvelteKit, TypeScript, Tailwind CSS, Prisma, PostgreSQL, and server-side auth protection. Use Auth0 or Clerk for authentication. Mock payment provider integration with a clean service layer that can later connect to Midtrans or Xendit. Add Sentry-compatible error handling hooks.

Data model:
User id, email, auth provider id
Subscription id, user id, plan type, status, activated at, expires at, created at
Payment id, subscription id, provider, provider reference, status, amount, fee, currency, created at, updated at
Transaction id, subscription id, amount, fee, description, created at
AuditEvent id, user id, event type, metadata json, created at

Behavior requirements:
Protect the route on the server, redirect unauthenticated users to login, and preserve return URL.
Render two plan cards with single-select behavior.
For Bayar di awal, create a pending subscription and update to active only after verified payment status becomes active via webhook or polling.
For Pay-as-you-go, activate immediately and record a fee per transaction.
Show clear status chips, loading skeletons, and accessible buttons.
Prevent duplicate submissions and handle payment failure, pending, and retry cases.
Log analytics events for page view, plan select, checkout started, payment status changed, subscription activated, and support clicked.

Implementation notes:
Use server load functions and actions for protection and mutations.
Use idempotent webhook processing.
Add reusable UI components for plan cards, status badges, and transaction rows.
Create seed data and simple test coverage for auth gate and activation rules.
Generate production-ready code with sensible folder structure, accessible markup, and mobile-first layout.

Business Idea

buatkan prd halaman svelte taiwlin subscriptions hanya bisa di akses ketika sudah login, muncul piliha " Pay-as-you-go" dan "Bayar di awal", jika bayar di awal itu bisa langsung aktif kalau payment status active dan pay as you go langsung active tapi ada fee pertransaksi

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company