@founderhq/journeys 0.3.66 → 0.4.0

package/README.md

@@ -22,12 +22,29 @@ pnpm add @founderhq/journeys
 import { Journey } from "@founderhq/journeys";
 import "@founderhq/journeys/styles.css";
 
-export function Example({ config }: { config: import("@founderhq/journeys").JourneyConfig }) {
-  return <Journey config={config} storageKey="example-journey" />;
+export function Example({
+  config,
+}: {
+  config: import("@founderhq/journeys").JourneyConfig;
+}) {
+  return (
+    <Journey
+      apiKey="fhq_pk_..."
+      journeyId="journey_123"
+      config={config}
+      storageKey="example-journey"
+    />
+  );
 }
 ```
 
-You can also fetch a journey remotely by passing `apiKey` and `journeyId` instead of an inline config.
+`apiKey` and `journeyId` are always required. Passing `config` only supplies local render data; the package still validates access with FounderHQ before rendering. Omit `config` to fetch the published config from FounderHQ:
+
+```tsx
+<Journey apiKey="fhq_pk_..." journeyId="journey_123" />
+```
+
+The browser package is public client code, so access enforcement happens on FounderHQ's server APIs: config fetch, validation, and capture all require a valid scoped publishable key.
 
 ## Injecting Runtime Data (`initialAnswers`)
 
@@ -35,14 +52,19 @@ Pass `initialAnswers` to seed the answer state at first render. Useful when jour
 
 ```tsx
 <Journey
-  apiKey="fos_..."
+  apiKey="fhq_pk_..."
   journeyId="abc-123"
   initialAnswers={{
     pricingPlans: [
       {
         id: "pro_monthly",
         name: "Pro",
-        price: { amount: 29, currency: "USD", period: "month", trial: { days: 7 } },
+        price: {
+          amount: 29,
+          currency: "USD",
+          period: "month",
+          trial: { days: 7 },
+        },
         metadata: { stripePriceId: "price_xxx" },
       },
     ],
@@ -69,7 +91,7 @@ Pass `initialOptions` to override option lists at render time without storing la
 
 ```tsx
 <Journey
-  apiKey="fos_..."
+  apiKey="fhq_pk_..."
   journeyId="abc-123"
   initialOptions={{
     country: countries.map((country) => ({
@@ -147,6 +169,8 @@ Pass `onDiscountCodeApply` to validate and reprice in the consumer app:
 
 ```tsx
 <Journey
+  apiKey="fhq_pk_..."
+  journeyId="abc-123"
   config={config}
   onDiscountCodeApply={async ({ code, plan }) => {
     const result = await validateCoupon(code, plan?.id);
@@ -170,6 +194,20 @@ Pass `onDiscountCodeApply` to validate and reprice in the consumer app:
 
 Set `pricing_plans.props.discountVariable` to let cards replace the visible non-strike price from `pricing.display`, `pricing.amount`, or `pricing.total`. Set `purchase.action.discountVariable` to include the full applied discount answer in `purchase_intent`. Journeys never calculates billing amounts or provider rules; those belong in the consumer callback and `metadata`.
 
+## Capture Options
+
+Capture is enabled by default after access validation succeeds. Pass `capture={false}` to opt out, or pass capture options to add custom context:
+
+```tsx
+<Journey
+  apiKey="fhq_pk_..."
+  journeyId="journey_123"
+  capture={{ context: { app: { name: "web" } } }}
+/>
+```
+
+`apiKey`, `journeyId`, and the FounderHQ API URL are inherited from the root props and are not repeated inside `capture`.
+
 ## Config Shape
 
 A journey config is centered around: