AI Fluent · Chapter 12

Web & Payments

Your website sells. Your app delivers. These are two different jobs on two different platforms with different rules.

7 min read + 12 min appendix

Your website sells. Your app delivers. Understanding the limits of each platform saves you from mistakes that cost weeks.

Two Jobs, Two Platforms

Your website sells. Your app delivers. These are two different jobs on two different platforms with different rules, different payment systems, and different constraints.

RESTAURANT: Your website is the storefront window and the hostess stand. It shows people what you offer, convinces them to come in, and takes their reservation. Your app is the dining room — where the actual experience happens. You don't serve food through the window, and you don't take reservations in the kitchen.

What the Website Handles

Marketing, SEO, pricing pages, character profiles, landing pages, legal pages, and — critically — web-exclusive checkout flows. Purchases made on your website go through Stripe directly. No Apple cut. No Google cut. This is not a loophole — it's explicitly allowed under Apple's guidelines for link-out purchases in the US storefront.

DEF: IAP (In-App Purchase) — Apple and Google's payment systems for buying digital content within an app. Apple takes 15-30% of every transaction. You're required to use IAP for purchases made inside the app, but purchases made on external websites can use any payment processor.

Apple's Payment Rules

The rules have been actively evolving since the Epic v. Apple case. As of early 2026 for the US App Store: you can link out to external payment options alongside IAP, but you must still offer IAP as an option within the app. Other storefronts (non-US) are IAP-only.

Apple's Small Business Program reduces their commission from 30% to 15% for developers earning under $1M per year. Apply for this on day one — it's automatic for qualifying developers.

NOTE: Payment rules change. What's accurate today might not be accurate in six months. Check Apple's current developer guidelines before implementing any payment flow. Build your payment architecture to be flexible enough to adapt when rules change.

The Stripe Integration

Stripe handles all web purchases. The flow is: user clicks "Subscribe" on your pricing page → your backend creates a Stripe Checkout Session with the right product and price → Stripe handles the payment UI → Stripe sends a webhook to your backend on success → your backend activates the subscription.

This means your website checkout never touches your app. The webhook handler (Chapter 8) receives the event and updates the user's subscription status in your database. The app reads the database and unlocks features accordingly.

Webflow as Your CMS

Webflow gives you a no-code website builder with CMS collections for dynamic content. Character profiles, chapter pages, pricing — all managed through the Webflow CMS editor. Custom JavaScript lives in embed blocks. CSS lives in page head custom code.

The key limitation: Webflow's embed blocks have a 50,000-character limit. For anything larger, you'll need to split into multiple embeds or serve the content from an external source.

Chapter Appendix
Webflow + Supabase auth integration · Stripe product setup · Webhook handler architecture · Checkout session flow · Apple IAP vs Stripe matrix