add embedded checkout

2026-08-20 07:35:31 +01:00
parent c6e987a852
commit 397543c880
45 changed files with 5731 additions and 334 deletions
@@ -0,0 +1,67 @@
+# Onboarding UX — first-run user experience
+
+## Onboarding UX
+
+**Plain-language:** “When someone installs your app for the first time, the first thing they see is your app’s welcome or setup screen. This is called onboarding.”
+
+Design this experience carefully — it determines whether merchants understand how to use your app or give up immediately.
+
+**Canonical page:** https://docs.stripe.com/stripe-apps/patterns/onboarding-experience
+
+Read this page using WebFetch for the correct component props and patterns.
+
+## Options from simplest to most complex
+
+### Option 1 — Zero-touch onboarding (easiest)
+
+If your app only uses Stripe data and doesn’t need its own login, there’s nothing to set up. The app works immediately after install.
+
+Use `fetchStripeSignature` to identify the user without a login screen — the user’s Stripe identity proves who they are.
+
+**When to use:** When your app doesn’t need third-party credentials or a separate user account.
+
+### Option 2 — OnboardingView component
+
+Show a setup screen the first time the user opens the app. Use the `onboarding` viewport to show a dedicated onboarding page.
+
+In `stripe-app.yaml`, add the `onboarding` viewport:
+
+```yaml
+ui_extension:
+  views:
+    - viewport: onboarding
+      component: OnboardingView
+    - viewport: stripe.dashboard.customer.detail
+      component: App
+```
+
+For the correct `OnboardingView` component props and structure, read the canonical onboarding page. Key requirements:
+
+- Use the `OnboardingView` component (not `ContextView`) for the onboarding viewport
+- Include required props like `completed`, `tasks`, and `title`
+
+### Option 3 — SignInView component (third-party login)
+
+If users need to log in to a third-party service (connecting their Google account, Mailchimp, etc.), use `SignInView` to guide them.
+
+For the correct `SignInView` props and usage, read: https://docs.stripe.com/stripe-apps/patterns/onboarding-experience
+
+Use the Secret Store API to save the resulting OAuth token. See `backend.md`.
+
+## Critical rule: always check onboarding status in every view
+
+Don’t assume the user went through the onboarding flow in order. They might open a payment page before completing setup.
+
+Check at the start of every page-specific view whether onboarding is complete. If not, show a prompt directing them to complete setup.
+
+## Storing onboarding state
+
+Use the Secret Store API to remember whether a user has completed onboarding.
+
+For the correct Secret Store API patterns, read: https://docs.stripe.com/stripe-apps/store-secrets
+
+Key facts:
+
+- Use `user` scope for per-user onboarding state
+- Use `account` scope for account-wide configuration
+- Maximum 10 secrets per scope