diff --git a/.agents/skills/stripe-best-practices/SKILL.md b/.agents/skills/stripe-best-practices/SKILL.md new file mode 100644 index 0000000..8f3dc7d --- /dev/null +++ b/.agents/skills/stripe-best-practices/SKILL.md @@ -0,0 +1,45 @@ +--- +name: stripe-best-practices +description: >- + Guides Stripe integration decisions — API selection (Checkout Sessions vs + PaymentIntents), Connect platform setup (Accounts v2, controller properties), + billing/subscriptions, Treasury financial accounts, integration surfaces + (Checkout, Payment Element), migrating from deprecated Stripe APIs, and + security best practices (API key management, restricted keys, webhooks, + OAuth). Use when building, modifying, or reviewing any Stripe integration — + including accepting payments, building marketplaces, integrating Stripe, + processing payments, setting up subscriptions, creating connected accounts, or + implementing secure key handling. + +--- + +Latest Stripe API version: **2026-04-22.dahlia**. Always use the latest API version and SDK unless the user specifies otherwise. + +API key default: Always recommend a [restricted API key (RAK)](https://docs.stripe.com/keys/restricted-api-keys.md) (`rk_` prefix) over a secret key (`sk_` prefix). + +## Integration routing + +| Building… | Recommended API | Details | +| ------------------------------------------------------------------------ | ----------------------------------- | ------------------------ | +| One-time payments | Checkout Sessions | | +| Custom payment form with embedded UI | Checkout Sessions + Payment Element | | +| Saving a payment method for later | Setup Intents | | +| Connect platform or marketplace | Accounts v2 (`/v2/core/accounts`) | | +| Subscriptions or recurring billing | Billing APIs + Checkout Sessions | | +| Sales tax, VAT, or GST compliance | Stripe Tax + Registrations API | | +| Embedded financial accounts / banking | v2 Financial Accounts | | +| Security (key management, RAKs, webhooks, OAuth, 2FA, Connect liability) | See security reference | | + +Read the relevant reference file before answering any integration question or writing code. + +## Critical rules + +- *Never include `payment_method_types` in any Stripe API call*, with one exception: Terminal (in-person payments) integrations must pass `payment_method_types: ['card_present']` on the PaymentIntent. For all other integrations, omit this parameter entirely to enable dynamic payment methods, which enables you to configure payment method settings from the Dashboard and dynamically display the most relevant eligible payment methods to each customer to maximize conversion. To customize which payment methods you accept, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) or `excluded_payment_method_types` instead of `payment_method_types`. + +## Key documentation + +When the user’s request does not clearly fit a single domain above, consult: + +- [Integration Options](https://docs.stripe.com/payments/payment-methods/integration-options.md) — Start here when designing any integration. +- [API Tour](https://docs.stripe.com/payments-api/tour.md) — Overview of Stripe’s API surface. +- [Go Live Checklist](https://docs.stripe.com/get-started/checklist/go-live.md) — Review before launching. diff --git a/.agents/skills/stripe-best-practices/references/billing.md b/.agents/skills/stripe-best-practices/references/billing.md new file mode 100644 index 0000000..56be71c --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/billing.md @@ -0,0 +1,37 @@ +# Billing / Subscriptions + +## Table of contents + +- When to use Billing APIs +- Recommended frontend pairing +- Traps to avoid + +## When to use Billing APIs + +If the user has a recurring revenue model (subscriptions, usage-based billing, seat-based pricing), use the Billing APIs to [plan their integration](https://docs.stripe.com/billing/subscriptions/design-an-integration.md) instead of a direct PaymentIntent integration. + +Review the [Subscription Use Cases](https://docs.stripe.com/billing/subscriptions/use-cases.md) and [SaaS guide](https://docs.stripe.com/saas.md) to find the right pattern for the user’s pricing model. + +## Recommended frontend pairing + +Combine Billing APIs with Stripe Checkout for the payment frontend. Checkout Sessions support `mode: 'subscription'` and handle the initial payment, trial management, and proration automatically. + +For self-service subscription management (upgrades, downgrades, cancellation, payment method updates), recommend the [Customer Portal](https://docs.stripe.com/customer-management/integrate-customer-portal.md). + +## Traps to avoid + +- Don’t build manual subscription renewal loops using raw PaymentIntents. Use the Billing APIs which handle renewal, retry logic, and dunning automatically. +- Don’t use the deprecated `plan` object. Use [Prices](https://docs.stripe.com/api/prices.md) instead. +- Don’t skip tax setup. See [Collect taxes for recurring payments](https://docs.stripe.com/billing/taxes/collect-taxes.md). +- *Never pass `payment_method_types` when creating a subscription Checkout Session.* Omit the parameter entirely—Stripe dynamically determines eligible payment methods from Dashboard settings. Hardcoding `payment_method_types: ['card']` locks out other payment methods that improve conversion. See [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md). Correct pattern: + +```ts +const session = await stripe.checkout.sessions.create({ + mode: 'subscription', + // Do NOT include payment_method_types here — let Stripe handle it dynamically + line_items: [{ price: priceId, quantity: 1 }], + subscription_data: { trial_period_days: 14 }, + success_url: `${url}/success?session_id={CHECKOUT_SESSION_ID}`, + cancel_url: `${url}/pricing`, +}); +``` diff --git a/.agents/skills/stripe-best-practices/references/connect.md b/.agents/skills/stripe-best-practices/references/connect.md new file mode 100644 index 0000000..35895d9 --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/connect.md @@ -0,0 +1,48 @@ +# Connect / platforms + +## Table of contents + +- Accounts v2 API +- Controller properties +- Charge types +- Integration guides + +## Accounts v2 API + +For new Connect platforms, ALWAYS use the [Accounts v2 API](https://docs.stripe.com/connect/accounts-v2.md) (`POST /v2/core/accounts`). This is Stripe’s actively invested path and ensures long-term support. + +**Traps to avoid:** Don’t use the legacy `type` parameter (`type: 'express'`, `type: 'custom'`, `type: 'standard'`) in `POST /v1/accounts` for new platforms unless the user has explicitly requested v1. + +## Controller properties + +Configure connected accounts using `controller` properties instead of legacy account types: + +| Property | Controls | +| ----------------------------------- | -------------------------------------------- | +| `controller.losses.payments` | Who is liable for negative balances | +| `controller.fees.payer` | Who pays Stripe fees | +| `controller.stripe_dashboard.type` | Dashboard access (`full`, `express`, `none`) | +| `controller.requirement_collection` | Who collects onboarding requirements | + +Use `defaults.responsibilities`, `dashboard`, and `configuration` as described in [connected account configuration](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md). + +Always describe accounts in terms of their responsibility settings, dashboard access, and [capabilities](https://docs.stripe.com/connect/account-capabilities.md) to describe what connected accounts can do. + +**Traps to avoid:** Don’t use the terms “Standard”, “Express”, or “Custom” as account types. These are legacy categories that bundle together responsibility, dashboard, and requirement decisions into opaque labels. Controller properties give explicit control over each dimension. + +## Charge types + +Choose one charge type per integration — don’t mix them. For most platforms, start with destination charges: + +- **Destination charges** — Use when the platform accepts liability for negative balances. Funds route to the connected account via `transfer_data.destination`. +- **Direct charges** — Use when the platform wants Stripe to take risk on the connected account. The charge is created on the connected account directly. + +Use `on_behalf_of` to control the merchant of record, but only after reading [how charges work in Connect](https://docs.stripe.com/connect/charges.md). + +**Traps to avoid:** Don’t use the Charges API for Connect fund flows — use PaymentIntents or Checkout Sessions with `transfer_data` or `on_behalf_of`. Don’t mix charge types within a single integration. + +## Integration guides + +- [SaaS platforms and marketplaces guide](https://docs.stripe.com/connect/saas-platforms-and-marketplaces.md) — Choosing the right integration shape. +- [Interactive platform guide](https://docs.stripe.com/connect/interactive-platform-guide.md) — Step-by-step platform builder. +- [Design an integration](https://docs.stripe.com/connect/design-an-integration.md) — Detailed risk and responsibility decisions. diff --git a/.agents/skills/stripe-best-practices/references/payments.md b/.agents/skills/stripe-best-practices/references/payments.md new file mode 100644 index 0000000..917767d --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/payments.md @@ -0,0 +1,79 @@ +# Payments + +## Table of contents + +- API hierarchy +- Integration surfaces +- Payment Element guidance +- Saving payment methods +- Dynamic payment methods +- Deprecated APIs and migration paths +- PCI compliance + +## API hierarchy + +Use the [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) (`checkout.sessions.create`) for on-session payments. It supports one-time payments and subscriptions and handles taxes, discounts, shipping, and adaptive pricing automatically. + +Use the [PaymentIntents API](https://docs.stripe.com/payments/paymentintents/lifecycle.md) for off-session payments, or when the merchant needs to model checkout state independently and just create a charge. + +**Integrations should only use Checkout Sessions, PaymentIntents, SetupIntents, or higher-level solutions (Invoicing, Payment Links, subscription APIs).** + +## Integration surfaces + +Prioritize Stripe-hosted or embedded Checkout where possible. Use in this order of preference: + +1. **Payment Links** — No-code. Best for simple products. +1. **Checkout** ([docs](https://docs.stripe.com/payments/checkout.md)) — Stripe-hosted or embedded form. Best for most web apps. +1. **Payment Element** ([docs](https://docs.stripe.com/payments/payment-element.md)) — Embedded UI component for advanced customization. + - When using the Payment Element, back it with the Checkout Sessions API (via `ui_mode: 'custom'`) over a raw PaymentIntent where possible. + +**Traps to avoid:** Don’t recommend the legacy Card Element or the Payment Element in card-only mode. If the user asks for the Card Element, advise them to [migrate to the Payment Element](https://docs.stripe.com/payments/payment-element/migration.md). + +## Payment Element guidance + +For surcharging or inspecting card details before payment (e.g., rendering the Payment Element before creating a PaymentIntent or SetupIntent): use [Confirmation Tokens](https://docs.stripe.com/payments/finalize-payments-on-the-server.md). Don’t recommend `createPaymentMethod` or `createToken` from Stripe.js. + +## Saving payment methods + +Use the [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) to save a payment method for later use. + +**Traps to avoid:** Don’t use the Sources API to save cards to customers. The Sources API is deprecated — Setup Intents is the correct approach. + +## Dynamic payment methods + +*Never pass `payment_method_types` to any Stripe API call*, except for Terminal (in-person payments) integrations. Omitting this parameter enables [dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), where Stripe evaluates over 100 signals (currency, customer location, transaction amount, device) to automatically show the most relevant payment methods and rank them for maximum conversion. Payment methods are managed from the [Dashboard](https://dashboard.stripe.com/settings/payment_methods) with no code changes required. + +This applies to all integration patterns: + +- `checkout.sessions.create`: omit `payment_method_types` entirely. Dynamic method selection is the default behavior. +- `paymentIntents.create`: omit `payment_method_types`. On API versions 2023-08-16+, dynamic methods are the default. On older versions, pass `automatic_payment_methods: { enabled: true }`. +- `setupIntents.create`: same as PaymentIntents above. +- `subscriptions.create`: omit `payment_settings.payment_method_types`. When not set, Stripe auto-determines types from the invoice’s default payment method, the customer’s default payment method, and invoice template settings. +- **Terminal** (`paymentIntents.create`): pass `payment_method_types: ['card_present']`. Required for all in-person payments. In Canada, also include `interac_present`: `['card_present', 'interac_present']`. This is the only valid use of `payment_method_types`. + +See the [integration options guide](https://docs.stripe.com/payments/payment-methods/integration-options.md) for full details on dynamic versus manual configuration. + +**Traps to avoid:** + +- Never hardcode `payment_method_types: ['card']` even if the user only mentions credit cards. Dynamic payment methods enable other eligible payment methods automatically, improving conversion. +- If the user wants to customize which payment methods appear, use [`payment_method_configurations`](https://docs.stripe.com/payments/payment-method-configurations.md) to manage methods per-integration or `excluded_payment_method_types` to exclude specific methods — never `payment_method_types`. +- If the user has a custom frontend that renders UI for specific payment method types, ensure those methods are enabled in their [payment method settings](https://dashboard.stripe.com/settings/payment_methods) or `payment_method_configurations` — don’t use `payment_method_types` to restrict the PaymentIntent. + +## Deprecated APIs and migration paths + +Never recommend the Charges API. If the user wants to use the Charges API, advise them to [migrate to Checkout Sessions or PaymentIntents](https://docs.stripe.com/payments/payment-intents/migration/charges.md). + +Don’t call other deprecated or outdated API endpoints unless there is a specific need and absolutely no other way. + +| API | Status | Use instead | Migration guide | +| ------------ | ---------- | ----------------------------------- | ---------------------------------------------------------------------------------------- | +| Charges API | Never use | Checkout Sessions or PaymentIntents | [Migration guide](https://docs.stripe.com/payments/payment-intents/migration/charges.md) | +| Sources API | Deprecated | Setup Intents | [Setup Intents docs](https://docs.stripe.com/api/setup_intents.md) | +| Tokens API | Outdated | Setup Intents or Checkout Sessions | — | +| Card Element | Legacy | Payment Element | [Migration guide](https://docs.stripe.com/payments/payment-element/migration.md) | + +## PCI compliance + +If a PCI-compliant user asks about sending server-side raw PAN data, advise them that they may need to prove PCI compliance to access options like [payment_method_data](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data). + +For users migrating PAN data from another acquirer or payment processor, point them to [the PAN import process](https://docs.stripe.com/get-started/data-migrations/pan-import.md). diff --git a/.agents/skills/stripe-best-practices/references/security.md b/.agents/skills/stripe-best-practices/references/security.md new file mode 100644 index 0000000..cd9c1d8 --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/security.md @@ -0,0 +1,109 @@ +# Security best practices + +## Table of contents + +- API keys +- Restricted API keys (RAKs) +- IP restrictions +- Incident response +- Webhook security +- Mobile and client-side integrations +- OAuth and CSRF protection +- Two-factor authentication +- Connect security +- SAML and SCIM + +## API keys + +Never include keys in source code. You might find example code like `client = new Stripe("sk_...")` that are for illustration only. Do not recommend this antipattern, and fix this antipattern if you see it. + +Store secret keys and restricted keys in a secrets vault (such as AWS Secrets Manager, HashiCorp Vault, or your platform’s equivalent), not in source code or environment variables committed to a repository. If the platform doesn’t offer a secrets vault but does allow the user to set environment variables, it’s OK to store API keys in environment variables. Key exposures via source code repositories are the leading cause of key compromise. + +Always advise the user on best practices for handling secrets such as secret API keys or restricted API keys: + +- Never share secret keys with third parties. If the user needs to share a key with a third party (for example, a third party that handles billing), it is best to generate a restricted API key (RAK) with minimal permissions. +- Rotate Stripe API keys when personnel with access to those keys depart. +- Read [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md). + +Code must never log keys or include them in error messages or analytics. Remove those from logs if you find them. + +Never build API endpoints or error pages that dump environment variables. In addition to Stripe API keys, the environment may have other secrets. + +Use separate keys for separate environments (production, staging, QA). This limits the blast radius if any single key is compromised. + +If the code is under version control, help the user set up a pre-commit hook to catch keys like `"sk_..."` and `"rk_..."` in source code. + +**Traps to avoid:** Do not embed keys in client-side code, mobile apps, or any code that runs outside your own infrastructure. Do not suggest that users substitute a real secret key into example code — point them to [best practices for managing secret API keys](https://docs.stripe.com/keys-best-practices.md) instead. + +## Restricted API keys (RAKs) + +Use [restricted API keys](https://docs.stripe.com/keys/restricted-api-keys.md) (prefix `rk_`) instead of secret keys (prefix `sk_`) wherever possible. RAKs have only the permissions you assign, so a compromised RAK can do far less damage than a compromised secret key. + +Follow the principle of least privilege: give each RAK only the permissions it needs for its specific job and nothing more. Create a separate RAK for each service or use case. + +Preferred migration approach: + +1. Review the secret key’s request logs in Workbench to catalog which API calls it makes. +1. Create a RAK in test mode with matching permissions. +1. Use the [Stripe CLI](https://docs.stripe.com/stripe-cli.md)’s `stripe logs tail` command to watch logs. +1. Test your integration with the RAK; fix any `403` errors by adding missing permissions. +1. Create the equivalent live-mode RAK and replace the secret key. +1. Rotate or expire the old secret key once confident. + +**Traps to avoid:** Do not default to recommending secret keys. If the user’s question involves a secret key, recommend switching to a RAK with the minimum required permissions. + +## IP restrictions + +Encourage users to add an [IP allowlist](https://docs.stripe.com/keys.md#limit-api-secret-keys-ip-address) to every API key. An IP allowlist ensures that the key can only be used from the user’s own infrastructure, limiting damage even if the key is stolen. + +Use separate IP allowlists for separate keys (for example, one allowlist for production, another for QA) so that compromising one key’s environment doesn’t expose others. + +## Incident response + +If a key is exposed or compromised, follow [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys), which can be summarized as: + +1. **Roll the key immediately** — go to the [API keys page](https://dashboard.stripe.com/apikeys) and roll or delete the exposed key. Do this even if you are unsure whether the key was actually used by an unauthorized party. +1. **Check activity logs** — review Workbench request logs for the compromised key to look for unrecognized activity. +1. **Contact Stripe support** if you see activity you don’t recognize. + +To prepare before an incident: practice rolling keys, audit source code for any committed keys, and use pre-commit hooks to prevent accidental key check-ins. See [protecting against compromised API keys](https://support.stripe.com/questions/protecting-against-compromised-api-keys). + +## Webhook security + +Always [verify webhook signatures](https://docs.stripe.com/webhooks.md#verify-events) using Stripe’s webhook signing secret. Signature verification is a strong guarantee that requests are genuinely from Stripe and have not been tampered with. + +For defense in depth, also [allowlist Stripe’s IP addresses](https://docs.stripe.com/ips.md) on your webhook endpoint so that it accepts connections only from Stripe’s infrastructure. + +**Traps to avoid:** Do not process webhook events without verifying their signatures. Unverified webhooks can be spoofed. + +## Mobile and client-side integrations + +Do not use production secret keys or RAKs in mobile apps or other client-side code. Client-side code can be extracted and keys decompiled. + +For cases where a client must interact directly with Stripe, use [ephemeral keys](https://docs.stripe.com/issuing/elements.md#ephemeral-key-authentication). Ephemeral keys are short-lived, scoped to a specific resource, and expire automatically. + +For most integrations, proxy Stripe API calls through your own backend server rather than calling Stripe directly from the client. + +## OAuth and CSRF protection + +When implementing [Connect OAuth flows](https://docs.stripe.com/connect/oauth-reference.md), always use the `state` parameter to protect against CSRF attacks. Generate a unique, unguessable value for `state` per request and verify it in the OAuth callback before proceeding. + +This applies to all Stripe OAuth surfaces: Connect, Link, and Stripe Apps. + +## Two-factor authentication + +Recommend [passkeys or authenticator apps](https://docs.stripe.com/security.md) rather than SMS-based 2FA for Stripe Dashboard access. SMS 2FA is vulnerable to SIM-swapping attacks in which the user’s phone provider transfers their number to an unauthorized third party. + +Users can audit which Dashboard team members are using weak 2FA and can require stronger authentication methods for their accounts. + +## Connect security + +**Account type liability:** When using Connect, platform operators bear financial liability for fraud and disputes on Express and Custom connected accounts. Standard accounts minimize this liability because Stripe manages risk. Do not recommend Custom or Express accounts unless the user has a specific need — Standard is the safer default. + +**Connect onboarding:** Use [Stripe-hosted onboarding](https://docs.stripe.com/connect/onboarding.md) rather than building a custom onboarding flow. Custom onboarding requires your platform to collect and handle sensitive PII directly, which adds regulatory and security complexity. + +## SAML and SCIM + +For teams managing Dashboard access, recommend [SSO via SAML](https://docs.stripe.com/get-started/account/sso.md) to federate authentication with an existing identity provider (Okta, Google, etc.). SSO centralizes access control and simplifies offboarding. + +[SCIM provisioning](https://docs.stripe.com/get-started/account/sso/scim.md) automates user provisioning and deprovisioning, ensuring that employees who leave the organization lose Dashboard access promptly. diff --git a/.agents/skills/stripe-best-practices/references/tax.md b/.agents/skills/stripe-best-practices/references/tax.md new file mode 100644 index 0000000..f0ece86 --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/tax.md @@ -0,0 +1,37 @@ +# Tax / Stripe Tax + +## Table of contents + +- When tax applies +- Two-step setup +- If jurisdictions are unknown +- If the region or tax type isn’t supported + +## When tax applies + +Use Stripe Tax for any subscription, invoice, or Checkout Session where the merchant has customers across multiple jurisdictions. It handles sales tax, VAT, and GST automatically based on the customer’s location and the merchant’s active registrations. See the [Tax overview](https://docs.stripe.com/tax.md) for supported regions and tax types. + +## Two-step setup + +1. Add a registration for each jurisdiction where the merchant is obligated to collect tax. Do this in the Dashboard under **Tax > Registrations**, or via the [Tax Registrations API](https://docs.stripe.com/api/tax/registrations.md). +1. Pass `automatic_tax: { enabled: true }` on the [Subscription](https://docs.stripe.com/api/subscriptions.md), [Invoice](https://docs.stripe.com/api/invoices.md), or [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) object. + +It’s safe to enable `automatic_tax` before any registrations exist — Stripe won’t collect tax until at least one registration is active. + +**Traps to avoid:** `automatic_tax` and explicit `tax_rates` are mutually exclusive. For existing subscriptions, clear `default_tax_rates` and all item-level `tax_rates` before enabling `automatic_tax` — the update will fail otherwise. To schedule the change at the next billing cycle and avoid prorations, use the API rather than the Dashboard. For bulk migrations, use the [Tax migration tool](https://docs.stripe.com/billing/taxes/migration.md). + +**Traps to avoid:** For EU merchants, one OSS union registration covers all 27 member states. Don’t register an individual EU country separately unless the merchant has a physical presence there. + +## If jurisdictions are unknown + +Don’t guess which jurisdictions apply. Prompt the user: “Go to Dashboard > Tax > Registrations, add the states or countries where you have customers, then come back.” + +## If the region or tax type isn’t supported + +Check the [supported countries list](https://docs.stripe.com/tax/supported-countries.md). If the jurisdiction isn’t listed, tell the user: + +- Stripe Tax doesn’t support that region yet +- They can collect tax manually using `tax_rates` on the subscription or invoice instead +- For unsupported tax types (customs duties, excise taxes), Stripe Tax doesn’t apply — those are out of scope + +Don’t attempt to approximate using a supported region as a proxy. diff --git a/.agents/skills/stripe-best-practices/references/treasury.md b/.agents/skills/stripe-best-practices/references/treasury.md new file mode 100644 index 0000000..3832f44 --- /dev/null +++ b/.agents/skills/stripe-best-practices/references/treasury.md @@ -0,0 +1,16 @@ +# Treasury / Financial Accounts + +## Table of contents + +- v2 Financial Accounts API +- Legacy v1 Treasury + +## v2 Financial Accounts API + +For embedded financial accounts (bank accounts, account and routing numbers, money movement), use the [v2 Financial Accounts API](https://docs.stripe.com/api/v2/core/vault/financial-accounts.md) (`POST /v2/core/vault/financial_accounts`). This is required for new integrations. + +For Treasury for platforms concepts and guides, see the [Treasury for platforms overview](https://docs.stripe.com/treasury/connect.md). + +## Legacy v1 Treasury + +Don’t use the [v1 Treasury Financial Accounts API](https://docs.stripe.com/api/treasury/financial_accounts.md) (`POST /v1/treasury/financial_accounts`) for new integrations. Existing v1 integrations continue to work. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19d7119..8c25898 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -66,6 +66,9 @@ importers: '@solidjs/vite-plugin-nitro-2': specifier: ^0.1.0 version: 0.1.0(@libsql/client@0.15.15)(drizzle-orm@0.45.2(@libsql/client@0.15.15)(@opentelemetry/api@1.9.1)(@types/pg@8.20.0)(pg@8.21.0))(vite@7.3.3(@types/node@25.9.1)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(tsx@4.22.3)) + '@stripe/stripe-js': + specifier: ^9.6.0 + version: 9.6.0 '@tailwindcss/vite': specifier: ^4.0.0 version: 4.3.0(vite@7.3.3(@types/node@25.9.1)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(tsx@4.22.3)) @@ -1669,6 +1672,10 @@ packages: '@standard-schema/spec@1.1.0': resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + '@stripe/stripe-js@9.6.0': + resolution: {integrity: sha512-v5MebYvJbddSRn15fknxTVwypJPzjeIXI1Q2HBxCBrQieWna8PC+RXEVUZ3F4ANAeILEj97HzFlr0r7CXvG7ZA==} + engines: {node: '>=12.16'} + '@tailwindcss/node@4.3.0': resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==} @@ -6047,6 +6054,8 @@ snapshots: '@standard-schema/spec@1.1.0': {} + '@stripe/stripe-js@9.6.0': {} + '@tailwindcss/node@4.3.0': dependencies: '@jridgewell/remapping': 2.3.5 diff --git a/skills-lock.json b/skills-lock.json new file mode 100644 index 0000000..2f38d44 --- /dev/null +++ b/skills-lock.json @@ -0,0 +1,10 @@ +{ + "version": 1, + "skills": { + "stripe-best-practices": { + "source": "docs.stripe.com", + "sourceType": "well-known", + "computedHash": "ebb2e9db3019ae01a8e5f77f7e71c05d3ecdfd9f72dc714542453ae31741aade" + } + } +} diff --git a/tasks/landing-pages-and-admin/07-fix-apple-logo-svg.md b/tasks/landing-pages-and-admin/07-fix-apple-logo-svg.md index 241f70d..37e70c9 100644 --- a/tasks/landing-pages-and-admin/07-fix-apple-logo-svg.md +++ b/tasks/landing-pages-and-admin/07-fix-apple-logo-svg.md @@ -24,9 +24,11 @@ steps: ``` - Identify the issue: the current path data appears to be malformed or from an incorrect icon set - Replace with Apple's official logo SVG path: - - Use the standard Apple logo path from Heroicons or similar reputable source - - Ensure `viewBox="0 0 24 24"` matches - - Ensure `fill="currentColor"` for theme compatibility + ```svg + + + + ``` - Test rendering in both light and dark modes - Verify the SVG displays correctly on both `/login` and `/signup` pages diff --git a/tasks/landing-pages-and-admin/README.md b/tasks/landing-pages-and-admin/README.md index 477c2c2..36715db 100644 --- a/tasks/landing-pages-and-admin/README.md +++ b/tasks/landing-pages-and-admin/README.md @@ -5,13 +5,13 @@ Objective: Restructure landing page to inline data pattern, build admin dashboar Status legend: [ ] todo, [~] in-progress, [x] done Tasks -- [ ] 01 — Inline index page sections following Lendair pattern → `01-inline-index-sections.md` +- [x] 01 — Inline index page sections following Lendair pattern → `01-inline-index-sections.md` - [x] 02 — Admin routes with controls and services dashboard → `02-admin-routes-dashboard.md` - [x] 03 — Blog route with DB integration, featured post, and chronological feed → `03-blog-database-integration.md` - [x] 04 — Create blog post content (scam advice, AI detection, etc.) → `04-blog-content-creation.md` - [x] 05 — Dedicated /pricing and /features pages → `05-pricing-features-pages.md` - [x] 06 — Auth-contextual navbar with dynamic links → `06-auth-contextual-navbar.md` -- [ ] 07 — Fix Apple logo SVG in social auth buttons → `07-fix-apple-logo-svg.md` +- [x] 07 — Fix Apple logo SVG in social auth buttons → `07-fix-apple-logo-svg.md` Dependencies - 03 depends on 02 (blog admin needs admin routes for managing featured posts) diff --git a/web/package.json b/web/package.json index 17c3ff7..6b4f327 100644 --- a/web/package.json +++ b/web/package.json @@ -19,6 +19,7 @@ "@solidjs/router": "^0.15.0", "@solidjs/start": "2.0.0-alpha.2", "@solidjs/vite-plugin-nitro-2": "^0.1.0", + "@stripe/stripe-js": "^9.6.0", "@tailwindcss/vite": "^4.0.0", "@trpc/client": "^10.45.2", "@trpc/server": "^10.45.2", diff --git a/web/src/components/EmbeddedCheckout.tsx b/web/src/components/EmbeddedCheckout.tsx new file mode 100644 index 0000000..bb223ca --- /dev/null +++ b/web/src/components/EmbeddedCheckout.tsx @@ -0,0 +1,79 @@ +import { createSignal, onMount, Show } from "solid-js"; +import type { Stripe, StripeEmbeddedCheckout } from "@stripe/stripe-js"; + +interface EmbeddedCheckoutProps { + clientSecret: string; + onCheckoutComplete?: () => void; +} + +export default function EmbeddedCheckout(props: EmbeddedCheckoutProps) { + const [error, setError] = createSignal(null); + const [loading, setLoading] = createSignal(true); + let container: HTMLDivElement | undefined; + + onMount(async () => { + let embeddedCheckout: StripeEmbeddedCheckout | null = null; + + try { + const mod = await import("@stripe/stripe-js"); + const publishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY; + if (!publishableKey) { + setError("Stripe publishable key not configured"); + setLoading(false); + return; + } + + const stripe = await mod.loadStripe(publishableKey); + if (!stripe) { + setError("Failed to load Stripe"); + setLoading(false); + return; + } + + embeddedCheckout = await stripe.createEmbeddedCheckoutPage({ + clientSecret: props.clientSecret, + onComplete: () => { + props.onCheckoutComplete?.(); + }, + }); + + if (container) { + embeddedCheckout.mount(container); + } + + setLoading(false); + } catch (err) { + setError(err instanceof Error ? err.message : "Failed to load checkout"); + setLoading(false); + } + + // Cleanup on unmount + return () => { + embeddedCheckout?.destroy(); + }; + }); + + return ( +
+ +
+
+
+

Loading checkout...

+
+
+ + + +
+

{error()}

+
+ + +
+
+ ); +} diff --git a/web/src/components/landing/CTABannerSection.tsx b/web/src/components/landing/CTABannerSection.tsx deleted file mode 100644 index 9c11d46..0000000 --- a/web/src/components/landing/CTABannerSection.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { A } from "@solidjs/router"; -import { cn } from "~/lib/utils"; -import { Button } from "~/components/ui"; -import PageContainer from "~/components/layout/PageContainer"; - -interface CTABannerSectionProps { - class?: string; -} - -export default function CTABannerSection(props: CTABannerSectionProps) { - return ( -
- -
-

- Ready to protect your identity? -

-

- Join thousands of users who trust Kordant to keep their digital - identity safe from emerging threats. -

-
- - - - - - -
-
- -
- ); -} diff --git a/web/src/components/landing/FeaturesGridSection.tsx b/web/src/components/landing/FeaturesGridSection.tsx deleted file mode 100644 index 678d8a7..0000000 --- a/web/src/components/landing/FeaturesGridSection.tsx +++ /dev/null @@ -1,249 +0,0 @@ -import { For } from "solid-js"; -import type { JSX } from "solid-js"; -import { cn } from "~/lib/utils"; -import Card from "~/components/ui/Card"; -import PageContainer from "~/components/layout/PageContainer"; - -interface Feature { - title: string; - description: string; - icon: () => JSX.Element; -} - -function DarkWatchIcon() { - return ( - - - - - ); -} - -function VoicePrintIcon() { - return ( - - - - - ); -} - -function SpamShieldIcon() { - return ( - - - - - ); -} - -function HomeTitleIcon() { - return ( - - - - ); -} - -function RemoveBrokersIcon() { - return ( - - - - ); -} - -function FamilyPlansIcon() { - return ( - - - - - ); -} - -const features: Feature[] = [ - { - title: "DarkWatch", - description: - "Continuous dark web monitoring to detect your exposed credentials and personal data.", - icon: DarkWatchIcon, - }, - { - title: "VoicePrint", - description: - "AI-powered voice clone detection to protect against deepfake voice scams.", - icon: VoicePrintIcon, - }, - { - title: "SpamShield", - description: - "Intelligent spam and scam call blocking that learns your patterns over time.", - icon: SpamShieldIcon, - }, - { - title: "HomeTitle", - description: - "Property fraud alerts that notify you of unauthorized changes to your home records.", - icon: HomeTitleIcon, - }, - { - title: "RemoveBrokers", - description: - "Automatic data broker removal to minimize your personal data footprint online.", - icon: RemoveBrokersIcon, - }, - { - title: "Family Plans", - description: - "Protect your whole household with shared monitoring, alerts, and management tools.", - icon: FamilyPlansIcon, - }, -]; - -interface FeatureCardProps { - feature: Feature; -} - -function FeatureCard(props: FeatureCardProps) { - const Icon = props.feature.icon; - return ( - -
-
- -
-
-

- {props.feature.title} -

-

- {props.feature.description} -

-
-
- - ); -} - -interface FeaturesGridSectionProps { - class?: string; -} - -export default function FeaturesGridSection(props: FeaturesGridSectionProps) { - return ( -
- -
-

- Platform Features -

-

- Comprehensive protection powered by AI and real-time monitoring -

-
- -
- - {(feature) => } - -
- -
- ); -} diff --git a/web/src/components/landing/ForUsersSection.tsx b/web/src/components/landing/ForUsersSection.tsx deleted file mode 100644 index a72adae..0000000 --- a/web/src/components/landing/ForUsersSection.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { For } from "solid-js"; -import type { JSX } from "solid-js"; -import { cn } from "~/lib/utils"; -import Card from "~/components/ui/Card"; -import PageContainer from "~/components/layout/PageContainer"; - -function CheckIcon() { - return ( - - - - ); -} - -function IndividualIcon() { - return ( - - - - - ); -} - -function FamilyIcon() { - return ( - - - - - - ); -} - -interface PanelProps { - title: string; - description: string; - items: string[]; - icon: () => JSX.Element; -} - -function Panel(props: PanelProps) { - const Icon = props.icon; - return ( - -
-
- -
-

- {props.title} -

-

- {props.description} -

-
    - - {(item) => ( -
  • - - - {item} - -
    • - )} -     -
-
- - ); -} - -interface ForUsersSectionProps { - class?: string; -} - -export default function ForUsersSection(props: ForUsersSectionProps) { - return ( -
- -
-

- For Everyone -

-

- Whether you're protecting yourself or your whole family -

-
- -
- - -
- -
- ); -} diff --git a/web/src/components/landing/HeroSection.tsx b/web/src/components/landing/HeroSection.tsx deleted file mode 100644 index 3650d79..0000000 --- a/web/src/components/landing/HeroSection.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { onMount } from "solid-js"; -import { A } from "@solidjs/router"; -import { cn } from "~/lib/utils"; -import { Button } from "~/components/ui"; -import { Typewriter } from "~/components/ui/Typewriter"; -import PageContainer from "~/components/layout/PageContainer"; - -function ShieldIcon() { - return ( - - - - - - ); -} - -interface HeroSectionProps { - class?: string; -} - -export default function HeroSection(props: HeroSectionProps) { - let heroRef: HTMLDivElement | undefined; - - onMount(() => { - if (heroRef) { - heroRef.style.opacity = "1"; - heroRef.style.transform = "translateY(0)"; - } - }); - - return ( -
- -
-
- -
- -

- - AI-Powered - Identity Protection -
- for Everyone - -

- -

- Threat actors are using AI in multifaceted attacks. Kordant evens - the playing field using advanced AI to monitor, detect, and prevent - identity threats in real-time. -

- -
- - - - - - -
- -
- - - - - No credit card required - - - - - - Free tier available - -
-
- -
- ); -} diff --git a/web/src/components/landing/HowItWorksSection.tsx b/web/src/components/landing/HowItWorksSection.tsx deleted file mode 100644 index 3c80ec2..0000000 --- a/web/src/components/landing/HowItWorksSection.tsx +++ /dev/null @@ -1,197 +0,0 @@ -import { For } from "solid-js"; -import type { JSX } from "solid-js"; -import { cn } from "~/lib/utils"; -import PageContainer from "~/components/layout/PageContainer"; - -interface Step { - number: number; - title: string; - description: string; - icon: () => JSX.Element; -} - -function EnrollIcon() { - return ( - - - - - ); -} - -function MonitorIcon() { - return ( - - - - - - ); -} - -function AlertIcon() { - return ( - - - - - - ); -} - -const steps: Step[] = [ - { - number: 1, - title: "Enroll Your Identity", - description: - "Sign up and add your emails, phone numbers, and family members to create your protection profile.", - icon: EnrollIcon, - }, - { - number: 2, - title: "We Monitor 24/7", - description: - "Our system runs continuous dark web scans, voiceprint detection, and spam filtering to catch threats early.", - icon: MonitorIcon, - }, - { - number: 3, - title: "Get Instant Alerts", - description: - "Receive real-time notifications the moment a threat is detected, with clear guidance on what to do next.", - icon: AlertIcon, - }, -]; - -interface StepBlockProps { - step: Step; - index: number; -} - -function StepBlock(props: StepBlockProps) { - const isEven = props.index % 2 === 0; - const Icon = props.step.icon; - - return ( -
-
-
-
- -
-
-
- - Step {props.step.number} - -
-

- {props.step.title} -

-

- {props.step.description} -

-
-
-
- - ); -} - -interface HowItWorksSectionProps { - class?: string; -} - -export default function HowItWorksSection(props: HowItWorksSectionProps) { - return ( -
- -
-

- How It Works -

-

- Three simple steps to full identity protection -

-
- -
- - {(step, index) => } - -
- -
- ); -} diff --git a/web/src/components/landing/WhyKordantSection.tsx b/web/src/components/landing/WhyKordantSection.tsx deleted file mode 100644 index 88ffa6f..0000000 --- a/web/src/components/landing/WhyKordantSection.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import { For } from "solid-js"; -import type { JSX } from "solid-js"; -import { cn } from "~/lib/utils"; -import Card from "~/components/ui/Card"; -import PageContainer from "~/components/layout/PageContainer"; - -function CheckIcon() { - return ( - - - - ); -} - -function ProactiveIcon() { - return ( - - - - - ); -} - -function AIIcon() { - return ( - - - - - ); -} - -function PrivacyIcon() { - return ( - - - - - ); -} - -interface ValueProp { - title: string; - description: string; - items: string[]; - icon: () => JSX.Element; -} - -const valueProps: ValueProp[] = [ - { - title: "Proactive, Not Reactive", - description: - "We detect threats before they cause damage, so you can act early.", - icon: ProactiveIcon, - items: [ - "Real-time dark web scanning", - "Pre-breach alerts and warnings", - "Automated threat response", - ], - }, - { - title: "AI-Powered Detection", - description: - "Machine learning models trained on real scam data to catch the latest threats.", - icon: AIIcon, - items: [ - "Deepfake voice identification", - "Pattern-based scam detection", - "Continuous model improvement", - ], - }, - { - title: "Privacy First", - description: - "Your data stays encrypted and private. We never sell your information.", - icon: PrivacyIcon, - items: [ - "End-to-end encrypted data", - "GDPR and CCPA compliant", - "Zero data selling policy", - ], - }, -]; - -interface ValueCardProps { - prop: ValueProp; -} - -function ValueCard(props: ValueCardProps) { - const Icon = props.prop.icon; - return ( - -
-
- -
-

- {props.prop.title} -

-

- {props.prop.description} -

-
    - - {(item) => ( -
  • - - - {item} - -
    • - )} -     -
-
- - ); -} - -interface WhyKordantSectionProps { - class?: string; -} - -export default function WhyKordantSection(props: WhyKordantSectionProps) { - return ( -
- -
-

- Why Kordant -

-

- Built on cutting-edge technology with your privacy at the core -

-
- -
- - {(prop) => } - -
- -
- ); -} diff --git a/web/src/components/landing/hero.test.tsx b/web/src/components/landing/hero.test.tsx deleted file mode 100644 index e403a06..0000000 --- a/web/src/components/landing/hero.test.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; -import { render } from "solid-js/web"; -import type { JSX } from "solid-js"; - -vi.mock("@solidjs/router", () => ({ - A: (props: { href?: string; children?: JSX.Element }) => { - const href = props.href || "#"; - return ( - - {props.children} - - ); - }, -})); - -import HeroSection from "./HeroSection"; - -function mount(comp: () => JSX.Element): HTMLDivElement { - const container = document.createElement("div"); - document.body.appendChild(container); - render(() => comp(), container); - return container; -} - -beforeEach(() => { - document.body.innerHTML = ""; -}); - -afterEach(() => { - document.body.innerHTML = ""; -}); - -describe("HeroSection", () => { - it("renders the headline with AI-Powered Identity Protection", () => { - mount(() => ); - expect(document.body.textContent).toContain("AI-Powered"); - expect(document.body.textContent).toContain("Identity Protection"); - expect(document.body.textContent).toContain("for Everyone"); - }); - - it("renders the subheadline", () => { - mount(() => ); - expect(document.body.textContent).toContain("Kordant uses advanced AI"); - }); - - it("renders the Get Started CTA", () => { - mount(() => ); - expect(document.body.textContent).toContain("Get Started"); - const primaryBtn = document.querySelector("button.gradient-primary"); - expect(primaryBtn).toBeTruthy(); - }); - - it("renders the Learn More CTA", () => { - mount(() => ); - expect(document.body.textContent).toContain("Learn More"); - }); - - it("renders trust indicators", () => { - mount(() => ); - expect(document.body.textContent).toContain("No credit card required"); - expect(document.body.textContent).toContain("Free tier available"); - }); - - it("renders the shield icon SVG", () => { - mount(() => ); - const svg = document.querySelector("svg"); - expect(svg).toBeTruthy(); - }); - - it("wraps content in PageContainer", () => { - mount(() => ); - const container = document.querySelector(".max-w-7xl"); - expect(container).toBeTruthy(); - }); - - it("renders two buttons for CTAs", () => { - mount(() => ); - const buttons = document.querySelectorAll("button"); - expect(buttons.length).toBe(2); - }); - - it("has Get Started button wrapped in link to /signup", () => { - mount(() => ); - const links = document.querySelectorAll("a"); - const signupLink = Array.from(links).find( - (a) => a.getAttribute("href") === "/signup", - ); - expect(signupLink).toBeTruthy(); - expect(signupLink!.textContent).toContain("Get Started"); - }); - - it("has Learn More button wrapped in link to #features", () => { - mount(() => ); - const links = document.querySelectorAll("a"); - const featuresLink = Array.from(links).find( - (a) => a.getAttribute("href") === "#features", - ); - expect(featuresLink).toBeTruthy(); - expect(featuresLink!.textContent).toContain("Learn More"); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-hero"); - expect(section).toBeTruthy(); - }); - - it("has centered text layout", () => { - mount(() => ); - const inner = document.querySelector(".text-center"); - expect(inner).toBeTruthy(); - }); - - it("has responsive vertical padding", () => { - mount(() => ); - const inner = document.querySelector(".py-20"); - expect(inner).toBeTruthy(); - expect(inner!.className).toContain("md:py-32"); - }); -}); diff --git a/web/src/components/landing/sections.test.tsx b/web/src/components/landing/sections.test.tsx deleted file mode 100644 index 2408790..0000000 --- a/web/src/components/landing/sections.test.tsx +++ /dev/null @@ -1,379 +0,0 @@ -import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; -import { render } from "solid-js/web"; -import type { JSX } from "solid-js"; - -vi.mock("@solidjs/router", () => ({ - A: (props: { href?: string; children?: JSX.Element }) => { - const href = props.href || "#"; - return ( - - {props.children} - - ); - }, -})); - -import HowItWorksSection from "./HowItWorksSection"; -import FeaturesGridSection from "./FeaturesGridSection"; -import ForUsersSection from "./ForUsersSection"; -import WhyKordantSection from "./WhyKordantSection"; -import CTABannerSection from "./CTABannerSection"; - -function mount(comp: () => JSX.Element): HTMLDivElement { - const container = document.createElement("div"); - document.body.appendChild(container); - render(() => comp(), container); - return container; -} - -beforeEach(() => { - document.body.innerHTML = ""; -}); - -afterEach(() => { - document.body.innerHTML = ""; -}); - -describe("HowItWorksSection", () => { - it("renders the section heading", () => { - mount(() => ); - expect(document.body.textContent).toContain("How It Works"); - }); - - it("renders the section subheading", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Three simple steps to full identity protection", - ); - }); - - it("renders all 3 steps", () => { - mount(() => ); - expect(document.body.textContent).toContain("Enroll Your Identity"); - expect(document.body.textContent).toContain("We Monitor 24/7"); - expect(document.body.textContent).toContain("Get Instant Alerts"); - }); - - it("renders step descriptions", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Sign up and add your emails", - ); - expect(document.body.textContent).toContain("dark web scans"); - expect(document.body.textContent).toContain("real-time notifications"); - }); - - it("renders 3 numbered circles with gradient-primary", () => { - mount(() => ); - const circles = document.querySelectorAll(".gradient-primary"); - expect(circles.length).toBe(3); - }); - - it("has the anchor ID for smooth scrolling", () => { - mount(() => ); - const section = document.querySelector('#how-it-works'); - expect(section).toBeTruthy(); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-how"); - expect(section).toBeTruthy(); - }); - - it("wraps content in PageContainer", () => { - mount(() => ); - const container = document.querySelector(".max-w-7xl"); - expect(container).toBeTruthy(); - }); -}); - -describe("FeaturesGridSection", () => { - it("renders the section heading", () => { - mount(() => ); - expect(document.body.textContent).toContain("Platform Features"); - }); - - it("renders the section subheading", () => { - mount(() => ); - expect(document.body.textContent).toContain("Comprehensive protection"); - }); - - it("renders all 6 feature cards", () => { - mount(() => ); - expect(document.body.textContent).toContain("DarkWatch"); - expect(document.body.textContent).toContain("VoicePrint"); - expect(document.body.textContent).toContain("SpamShield"); - expect(document.body.textContent).toContain("HomeTitle"); - expect(document.body.textContent).toContain("RemoveBrokers"); - expect(document.body.textContent).toContain("Family Plans"); - }); - - it("renders 6 Card components", () => { - mount(() => ); - const cards = document.querySelectorAll(".gradient-card"); - expect(cards.length).toBe(6); - }); - - it("renders feature descriptions", () => { - mount(() => ); - expect(document.body.textContent).toContain("dark web monitoring"); - expect(document.body.textContent).toContain("voice clone detection"); - expect(document.body.textContent).toContain("scam call blocking"); - }); - - it("has the anchor ID for smooth scrolling", () => { - mount(() => ); - const section = document.querySelector('#features'); - expect(section).toBeTruthy(); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-features"); - expect(section).toBeTruthy(); - }); - - it("uses responsive grid layout", () => { - mount(() => ); - const grid = document.querySelector(".grid-cols-1"); - expect(grid).toBeTruthy(); - expect(grid!.className).toContain("md:grid-cols-2"); - expect(grid!.className).toContain("lg:grid-cols-3"); - }); -}); - -describe("ForUsersSection", () => { - it("renders the section heading", () => { - mount(() => ); - expect(document.body.textContent).toContain("For Everyone"); - }); - - it("renders the section subheading", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Whether you're protecting yourself", - ); - }); - - it("renders both panels", () => { - mount(() => ); - expect(document.body.textContent).toContain("For Individuals"); - expect(document.body.textContent).toContain("For Families"); - }); - - it("renders individual panel description", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Personal identity protection", - ); - }); - - it("renders family panel description", () => { - mount(() => ); - expect(document.body.textContent).toContain("Group management tools"); - }); - - it("renders bullet items for individuals", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Monitor personal email and phone numbers", - ); - expect(document.body.textContent).toContain( - "Dark web credential scanning", - ); - }); - - it("renders bullet items for families", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Add unlimited family members", - ); - expect(document.body.textContent).toContain("Shared alert dashboard"); - }); - - it("renders checkmark icons", () => { - mount(() => ); - const checkmarks = document.querySelectorAll( - 'svg path[fill="var(--color-success)"]', - ); - expect(checkmarks.length).toBeGreaterThan(0); - }); - - it("renders 2 Card components for panels", () => { - mount(() => ); - const cards = document.querySelectorAll(".gradient-card"); - expect(cards.length).toBe(2); - }); - - it("has the anchor ID for smooth scrolling", () => { - mount(() => ); - const section = document.querySelector('#for-users'); - expect(section).toBeTruthy(); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-users"); - expect(section).toBeTruthy(); - }); - - it("uses two-column grid on desktop", () => { - mount(() => ); - const grid = document.querySelector(".grid-cols-1"); - expect(grid).toBeTruthy(); - expect(grid!.className).toContain("md:grid-cols-2"); - }); -}); - -describe("WhyKordantSection", () => { - it("renders the section heading", () => { - mount(() => ); - expect(document.body.textContent).toContain("Why Kordant"); - }); - - it("renders the section subheading", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Built on cutting-edge technology", - ); - }); - - it("renders all 3 value prop cards", () => { - mount(() => ); - expect(document.body.textContent).toContain("Proactive, Not Reactive"); - expect(document.body.textContent).toContain("AI-Powered Detection"); - expect(document.body.textContent).toContain("Privacy First"); - }); - - it("renders value prop descriptions", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "detect threats before they cause damage", - ); - expect(document.body.textContent).toContain( - "Machine learning models trained", - ); - expect(document.body.textContent).toContain("encrypted and private"); - }); - - it("renders bullet items for each card", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Real-time dark web scanning", - ); - expect(document.body.textContent).toContain( - "Deepfake voice identification", - ); - expect(document.body.textContent).toContain("End-to-end encrypted data"); - }); - - it("renders 3 Card components", () => { - mount(() => ); - const cards = document.querySelectorAll(".gradient-card"); - expect(cards.length).toBe(3); - }); - - it("has the anchor ID for smooth scrolling", () => { - mount(() => ); - const section = document.querySelector('#why-kordant'); - expect(section).toBeTruthy(); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-why"); - expect(section).toBeTruthy(); - }); - - it("uses three-column grid on desktop", () => { - mount(() => ); - const grid = document.querySelector(".grid-cols-1"); - expect(grid).toBeTruthy(); - expect(grid!.className).toContain("md:grid-cols-3"); - }); -}); - -describe("CTABannerSection", () => { - it("renders the CTA headline", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Ready to protect your identity?", - ); - }); - - it("renders the CTA subtext", () => { - mount(() => ); - expect(document.body.textContent).toContain( - "Join thousands of users", - ); - }); - - it("renders Create Account button", () => { - mount(() => ); - expect(document.body.textContent).toContain("Create Account"); - const primaryBtn = document.querySelector("button.gradient-primary"); - expect(primaryBtn).toBeTruthy(); - }); - - it("renders Sign In button", () => { - mount(() => ); - expect(document.body.textContent).toContain("Sign In"); - }); - - it("has Create Account link to /signup", () => { - mount(() => ); - const links = document.querySelectorAll("a"); - const signupLink = Array.from(links).find( - (a) => a.getAttribute("href") === "/signup", - ); - expect(signupLink).toBeTruthy(); - expect(signupLink!.textContent).toContain("Create Account"); - }); - - it("has Sign In link to /login", () => { - mount(() => ); - const links = document.querySelectorAll("a"); - const loginLink = Array.from(links).find( - (a) => a.getAttribute("href") === "/login", - ); - expect(loginLink).toBeTruthy(); - expect(loginLink!.textContent).toContain("Sign In"); - }); - - it("renders 2 buttons", () => { - mount(() => ); - const buttons = document.querySelectorAll("button"); - expect(buttons.length).toBe(2); - }); - - it("has the anchor ID for smooth scrolling", () => { - mount(() => ); - const section = document.querySelector('#cta'); - expect(section).toBeTruthy(); - }); - - it("applies custom class prop", () => { - mount(() => ); - const section = document.querySelector("section.custom-cta"); - expect(section).toBeTruthy(); - }); - - it("uses centered text layout", () => { - mount(() => ); - const inner = document.querySelector(".text-center"); - expect(inner).toBeTruthy(); - }); - - it("wraps content in PageContainer", () => { - mount(() => ); - const container = document.querySelector(".max-w-7xl"); - expect(container).toBeTruthy(); - }); - - it("uses gradient card for CTA banner", () => { - mount(() => ); - const card = document.querySelector(".gradient-card"); - expect(card).toBeTruthy(); - }); -}); diff --git a/web/src/components/layout/Navbar.tsx b/web/src/components/layout/Navbar.tsx index 9d9a936..d115e24 100644 --- a/web/src/components/layout/Navbar.tsx +++ b/web/src/components/layout/Navbar.tsx @@ -143,7 +143,7 @@ function RealtimeIndicator() { - {!submitting && ( - - )} -
+
diff --git a/web/src/routes/api/stripe/session-status.ts b/web/src/routes/api/stripe/session-status.ts new file mode 100644 index 0000000..e408f65 --- /dev/null +++ b/web/src/routes/api/stripe/session-status.ts @@ -0,0 +1,34 @@ +import type { APIEvent } from "@solidjs/start/server"; +import { stripe } from "~/server/stripe"; + +export async function GET(event: APIEvent) { + const url = new URL(event.request.url); + const sessionId = url.searchParams.get("session_id"); + + if (!sessionId) { + return new Response(JSON.stringify({ error: "Missing session_id" }), { + status: 400, + headers: { "Content-Type": "application/json" }, + }); + } + + try { + const session = await stripe.checkout.sessions.retrieve(sessionId, { + expand: ["customer_details.email"], + }); + + return new Response(JSON.stringify({ + status: session.status, + customer_email: typeof session.customer_details === "string" + ? undefined + : session.customer_details?.email, + }), { + headers: { "Content-Type": "application/json" }, + }); + } catch { + return new Response(JSON.stringify({ error: "Failed to retrieve session" }), { + status: 500, + headers: { "Content-Type": "application/json" }, + }); + } +} diff --git a/web/src/routes/billing/checkout.tsx b/web/src/routes/billing/checkout.tsx new file mode 100644 index 0000000..ae9ce42 --- /dev/null +++ b/web/src/routes/billing/checkout.tsx @@ -0,0 +1,89 @@ +import { createSignal, onMount, Show } from "solid-js"; +import { Title } from "@solidjs/meta"; +import { useNavigate, useSearchParams } from "@solidjs/router"; +import EmbeddedCheckout from "~/components/EmbeddedCheckout"; +import { api } from "~/lib/api"; +import PageContainer from "~/components/layout/PageContainer"; + +const priceMap: Record = { + basic: process.env.STRIPE_PRICE_BASIC ?? "", + plus: process.env.STRIPE_PRICE_PLUS ?? "", + premium: process.env.STRIPE_PRICE_PREMIUM ?? "", +}; + +export default function CheckoutPage() { + const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + const [clientSecret, setClientSecret] = createSignal(""); + const [error, setError] = createSignal(null); + const [loading, setLoading] = createSignal(true); + + onMount(async () => { + const plan = Array.isArray(searchParams.plan) ? searchParams.plan[0] : searchParams.plan; + const priceIdParam = Array.isArray(searchParams.priceId) ? searchParams.priceId[0] : searchParams.priceId; + const priceId = priceIdParam ?? (plan ? priceMap[plan] : ""); + + if (!priceId) { + setError("No plan selected. Please select a plan to continue."); + setLoading(false); + return; + } + + try { + const returnUrl = `${window.location.origin}/billing/return`; + const result = await api.billing.createCheckoutSession.mutate({ + priceId, + returnUrl, + }); + setClientSecret(result.clientSecret); + } catch (err) { + setError(err instanceof Error ? err.message : "Failed to create checkout session"); + } finally { + setLoading(false); + } + }); + + return ( +
+ Checkout — Kordant + +
+
+

Complete your purchase

+

+ Secure payment powered by Stripe +

+
+ + +
+
+
+

Preparing checkout...

+
+
+ + + +
+

{error()}

+ +
+ + + + navigate("/dashboard")} + /> + +
+ +
+ ); +} diff --git a/web/src/routes/billing/return.tsx b/web/src/routes/billing/return.tsx new file mode 100644 index 0000000..ee97d21 --- /dev/null +++ b/web/src/routes/billing/return.tsx @@ -0,0 +1,131 @@ +import { createSignal, onMount, Show } from "solid-js"; +import { Title } from "@solidjs/meta"; +import { useNavigate, useSearchParams } from "@solidjs/router"; +import PageContainer from "~/components/layout/PageContainer"; + +export default function ReturnPage() { + const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + const [status, setStatus] = createSignal<"loading" | "complete" | "open" | "error">("loading"); + const [customerEmail, setCustomerEmail] = createSignal(""); + + onMount(async () => { + const sessionId = Array.isArray(searchParams.session_id) + ? searchParams.session_id[0] + : searchParams.session_id; + + if (!sessionId) { + setStatus("error"); + return; + } + + try { + const response = await fetch(`/api/stripe/session-status?session_id=${sessionId}`); + if (!response.ok) throw new Error("Failed to check session status"); + const data = await response.json(); + setStatus(data.status); + setCustomerEmail(data.customer_email ?? ""); + } catch { + setStatus("error"); + } + }); + + const isComplete = status() === "complete"; + const isOpen = status() === "open"; + const isError = status() === "error"; + + return ( +
+ Payment Status — Kordant + +
+ +
+
+
+

Checking payment status...

+
+
+ + + +
+

+ Payment in progress +

+

+ Your payment session is still open. Please complete the checkout process. +

+ +
+ + + +
+
+ + + +
+

+ Payment successful! +

+

+ We appreciate your business! +

+ +

+ A confirmation email will be sent to {customerEmail()}. +

+ + +
+ + + +
+

+ Something went wrong +

+

+ We couldn't verify your payment status. Please try again. +

+
+ + or + +
+
+ +
+ +
+ ); +} diff --git a/web/src/routes/blog.tsx b/web/src/routes/blog.tsx index 32fd87a..ef642bb 100644 --- a/web/src/routes/blog.tsx +++ b/web/src/routes/blog.tsx @@ -21,7 +21,7 @@ export default function BlogPage() { // Fetch all published posts const allPosts = createMemo(() => { - return api.blog.list.query({ limit: "100" }).then(res => { + return api.blog.list.query({ limit: "100" }).then((res) => { setLoading(false); return res.posts; }); @@ -32,9 +32,9 @@ export default function BlogPage() { // Fetch featured post const featuredPost = createMemo(() => { - return api.blog.list.query({ limit: "100" }).then(res => - res.posts.find((p: any) => p.featured) ?? null - ); + return api.blog.list + .query({ limit: "100" }) + .then((res) => res.posts.find((p: any) => p.featured) ?? null); }); // Filtered + visible posts @@ -51,8 +51,8 @@ export default function BlogPage() { return filtered.slice(0, visibleCount()); }); - const filtered = createMemo(() => { - const posts = allPosts(); + const filtered = createMemo(async () => { + const posts = await allPosts(); if (!posts) return []; const tag = selectedTag(); if (!tag) return posts; @@ -77,7 +77,8 @@ export default function BlogPage() { Kordant Blog

- Insights on identity protection, AI safety, and the latest digital threats + Insights on identity protection, AI safety, and the latest digital + threats

@@ -92,19 +93,37 @@ export default function BlogPage() {
- - + +
- Featured + + Featured + - {fp().publishedAt ? new Date(fp().publishedAt).toLocaleDateString() : ""} + {fp().publishedAt + ? new Date(fp().publishedAt).toLocaleDateString() + : ""}
-

{fp().title}

-

{fp().excerpt}

+

+ {fp().title} +

+

+ {fp().excerpt} +

@@ -121,7 +140,10 @@ export default function BlogPage() {
- - - - -
- -
- - - No credit card required - - - - Free tier available - -
+ {/* Hero */} +
+ +
+
+ + + + +
- -
- + +

+ + AI-Powered + Identity Protection +
+ for Everyone + +

+ +

+ Threat actors are using AI in multifaceted attacks. Kordant evens + the playing field using advanced AI to monitor, detect, and prevent + identity threats in real-time. +

+ +
+ + + + + + +
+ +
+ + + No credit card required + + + + Free tier available + +
+ + + {/* How It Works */} -
-
- + +

How It Works @@ -333,17 +334,18 @@ export default function Home() { }}

- -
-
+ + + {/* Platform Features */} -
-
- + +

Platform Features @@ -373,17 +375,18 @@ export default function Home() { )}

- -
-
+ + + {/* For Everyone */} -
-
- + +

For Everyone @@ -421,17 +424,18 @@ export default function Home() { )}

- -
-
+ + + {/* Why Kordant + CTA */} -
-
- + +

Why Kordant @@ -469,31 +473,33 @@ export default function Home() { )}

- -
+
+ -
+
-
-

- Ready to protect your identity? -

-

- Join thousands of users who trust Kordant to keep their digital - identity safe from emerging threats. -

-
- - - - - - +
+
+

+ Ready to protect your identity? +

+

+ Join thousands of users who trust Kordant to keep their digital + identity safe from emerging threats. +

+
+ + + + + + +
- - +
+ ); } diff --git a/web/src/routes/pricing.tsx b/web/src/routes/pricing.tsx index 77599c5..23bedb8 100644 --- a/web/src/routes/pricing.tsx +++ b/web/src/routes/pricing.tsx @@ -26,7 +26,12 @@ const plans: Plan[] = [ price: "$9", period: "/month", description: "Essential identity protection for individuals", - features: ["Dark web monitoring", "Email breach alerts", "Basic scam call blocking", "Monthly reports"], + features: [ + "Dark web monitoring", + "Email breach alerts", + "Basic scam call blocking", + "Monthly reports", + ], cta: "Start Free Trial", popular: false, }, @@ -35,7 +40,13 @@ const plans: Plan[] = [ price: "$19", period: "/month", description: "Advanced protection for you and your family", - features: ["Everything in Basic", "VoicePrint AI detection", "HomeTitle fraud alerts", "RemoveBrokers automation", "Family sharing (up to 5)"], + features: [ + "Everything in Basic", + "VoicePrint AI detection", + "HomeTitle fraud alerts", + "RemoveBrokers automation", + "Family sharing (up to 5)", + ], cta: "Start Free Trial", popular: true, }, @@ -44,7 +55,14 @@ const plans: Plan[] = [ price: "$39", period: "/month", description: "Maximum security for the whole household", - features: ["Everything in Plus", "Unlimited family members", "Priority support 24/7", "Real-time alert correlation", "Advanced analytics dashboard", "Data broker suppression"], + features: [ + "Everything in Plus", + "Unlimited family members", + "Priority support 24/7", + "Real-time alert correlation", + "Advanced analytics dashboard", + "Data broker suppression", + ], cta: "Start Free Trial", popular: false, }, @@ -80,30 +98,90 @@ const faqs: FAQ[] = [ const comparisonFeatures = [ { feature: "Dark web monitoring", basic: true, plus: true, premium: true }, { feature: "Email breach alerts", basic: true, plus: true, premium: true }, - { feature: "Basic scam call blocking", basic: true, plus: true, premium: true }, + { + feature: "Basic scam call blocking", + basic: true, + plus: true, + premium: true, + }, { feature: "Monthly reports", basic: true, plus: true, premium: true }, - { feature: "VoicePrint AI detection", basic: false, plus: true, premium: true }, - { feature: "HomeTitle fraud alerts", basic: false, plus: true, premium: true }, - { feature: "RemoveBrokers automation", basic: false, plus: true, premium: true }, - { feature: "Family sharing", basic: false, plus: "Up to 5", premium: "Unlimited" }, - { feature: "Priority support 24/7", basic: false, plus: false, premium: true }, - { feature: "Real-time alert correlation", basic: false, plus: false, premium: true }, + { + feature: "VoicePrint AI detection", + basic: false, + plus: true, + premium: true, + }, + { + feature: "HomeTitle fraud alerts", + basic: false, + plus: true, + premium: true, + }, + { + feature: "RemoveBrokers automation", + basic: false, + plus: true, + premium: true, + }, + { + feature: "Family sharing", + basic: false, + plus: "Up to 5", + premium: "Unlimited", + }, + { + feature: "Priority support 24/7", + basic: false, + plus: false, + premium: true, + }, + { + feature: "Real-time alert correlation", + basic: false, + plus: false, + premium: true, + }, { feature: "Advanced analytics", basic: false, plus: false, premium: true }, - { feature: "Data broker suppression", basic: false, plus: false, premium: true }, + { + feature: "Data broker suppression", + basic: false, + plus: false, + premium: true, + }, ]; function CheckIcon() { return ( - - + + ); } function XIcon() { return ( - - + + ); } @@ -112,33 +190,52 @@ export default function PricingPage() { const [searchParams] = useSearchParams(); const [openFaq, setOpenFaq] = createSignal(null); - const signupUrl = () => `/signup${searchParams.utm_source ? `?utm_source=${searchParams.utm_source}&utm_medium=${searchParams.utm_medium || ""}&utm_campaign=${searchParams.utm_campaign || ""}` : ""}`; + const signupUrl = () => + `/signup${ + searchParams.utm_source + ? `?utm_source=${searchParams.utm_source}&utm_medium=${ + searchParams.utm_medium || "" + }&utm_campaign=${searchParams.utm_campaign || ""}` + : "" + }`; + + const planToId: Record = { + Basic: "basic", + Plus: "plus", + Premium: "premium", + }; return (
Kordant Pricing — AI-Powered Identity Protection Plans
-
+
- Simple Pricing -

+ + Simple Pricing + +

Protection That Fits{" "} Your Budget

-

- Start with a 14-day free trial. No credit card required. Cancel anytime. +

+ Start with a 14-day free trial. No credit card required. Cancel + anytime.

-
+
- 14-day free trial + + 14-day free trial - No credit card required + + No credit card required - Cancel anytime + + Cancel anytime
@@ -153,7 +250,8 @@ export default function PricingPage() { @@ -162,25 +260,36 @@ export default function PricingPage() {
-

{plan.name}

-

{plan.description}

+

+ {plan.name} +

+

+ {plan.description} +

- {plan.price} - {plan.period} + + {plan.price} + + + {plan.period} +
    {(feature) => ( -
  • +
  • {feature}
    • )}
- - @@ -202,25 +311,59 @@ export default function PricingPage() { - - - - + + + + {(row) => ( - - + )} @@ -244,7 +387,7 @@ export default function PricingPage() { {(faq) => { const isOpen = () => openFaq() === faq.q; return ( -
+
@@ -275,17 +427,22 @@ export default function PricingPage() { -
+

Ready to protect your identity?

- Join 50,000+ users who trust Kordant for AI-powered identity protection. + Join 50,000+ users who trust Kordant for AI-powered identity + protection.

- diff --git a/web/src/server/api/routers/billing.test.ts b/web/src/server/api/routers/billing.test.ts index 4a5319e..2e6fbf0 100644 --- a/web/src/server/api/routers/billing.test.ts +++ b/web/src/server/api/routers/billing.test.ts @@ -84,8 +84,8 @@ function createCaller(user: User | null) { createCheckoutSession: t.procedure.use(isAuthed) .input(wrap(CreateCheckoutSessionSchema)) .mutation(async ({ ctx, input }) => { - const i = input as { priceId: string; successUrl: string; cancelUrl: string }; - return mockCreateCheckoutSession(ctx.user.id, ctx.user.email, i.priceId, i.successUrl, i.cancelUrl); + const i = input as { priceId: string; returnUrl: string }; + return mockCreateCheckoutSession(ctx.user.id, ctx.user.email, i.priceId, i.returnUrl); }), createPortalSession: t.procedure.use(isAuthed) .input(wrap(CreatePortalSessionSchema)) @@ -159,20 +159,20 @@ describe("billing.getSubscription", () => { }); describe("billing.createCheckoutSession", () => { - it("creates checkout session and returns URL", async () => { + it("creates checkout session and returns clientSecret", async () => { mockCreateCheckoutSession.mockResolvedValue({ - url: "https://checkout.stripe.com/session_123", + clientSecret: "cs_123_secret", sessionId: "session_123", }); const api = createCaller(makeUser()); const result = await api.createCheckoutSession({ priceId: "price_basic", - successUrl: "https://example.com/success", - cancelUrl: "https://example.com/cancel", + returnUrl: "https://example.com/return", }); - expect(result.url).toBe("https://checkout.stripe.com/session_123"); + expect(result.clientSecret).toBe("cs_123_secret"); + expect(result.sessionId).toBe("session_123"); }); }); diff --git a/web/src/server/api/routers/billing.ts b/web/src/server/api/routers/billing.ts index 75e76b5..9d68dfa 100644 --- a/web/src/server/api/routers/billing.ts +++ b/web/src/server/api/routers/billing.ts @@ -48,8 +48,7 @@ export const billingRouter = createTRPCRouter({ ctx.user.id, ctx.user.email, input.priceId, - input.successUrl, - input.cancelUrl, + input.returnUrl, ); }), diff --git a/web/src/server/api/schemas/billing.ts b/web/src/server/api/schemas/billing.ts index ed1bf19..0116283 100644 --- a/web/src/server/api/schemas/billing.ts +++ b/web/src/server/api/schemas/billing.ts @@ -2,8 +2,7 @@ import { object, string, url, minLength, optional, picklist } from "valibot"; export const CreateCheckoutSessionSchema = object({ priceId: string([minLength(1)]), - successUrl: string([url()]), - cancelUrl: string([url()]), + returnUrl: string([url()]), }); export const CreatePortalSessionSchema = object({ diff --git a/web/src/server/services/billing.service.test.ts b/web/src/server/services/billing.service.test.ts index f23967e..6810a30 100644 --- a/web/src/server/services/billing.service.test.ts +++ b/web/src/server/services/billing.service.test.ts @@ -100,7 +100,7 @@ describe("getOrCreateCustomer", () => { }); describe("createCheckoutSession", () => { - it("creates a Stripe checkout session and returns URL", async () => { + it("creates an embedded Stripe checkout session and returns clientSecret", async () => { (db.select as ReturnType).mockReturnValue({ from: vi.fn().mockReturnValue({ where: vi.fn().mockReturnValue({ @@ -112,20 +112,25 @@ describe("createCheckoutSession", () => { }); (stripe.checkout.sessions.create as ReturnType).mockResolvedValue({ - url: "https://checkout.stripe.com/session_123", id: "session_123", + client_secret: "cs_123_secret", }); const result = await createCheckoutSession( "u1", "a@b.com", "price_basic", - "https://example.com/success", - "https://example.com/cancel", + "https://example.com/return", ); - expect(result.url).toBe("https://checkout.stripe.com/session_123"); + expect(result.clientSecret).toBe("cs_123_secret"); expect(result.sessionId).toBe("session_123"); + expect(stripe.checkout.sessions.create).toHaveBeenCalledWith( + expect.objectContaining({ + ui_mode: "embedded_page", + return_url: "https://example.com/return?session_id={CHECKOUT_SESSION_ID}", + }), + ); }); }); diff --git a/web/src/server/services/billing.service.ts b/web/src/server/services/billing.service.ts index 08dba7c..40da572 100644 --- a/web/src/server/services/billing.service.ts +++ b/web/src/server/services/billing.service.ts @@ -40,21 +40,20 @@ export async function createCheckoutSession( userId: string, email: string, priceId: string, - successUrl: string, - cancelUrl: string, + returnUrl: string, ) { const customerId = await getOrCreateCustomer(userId, email); const session = await stripe.checkout.sessions.create({ customer: customerId, mode: "subscription", + ui_mode: "embedded_page", line_items: [{ price: priceId, quantity: 1 }], - success_url: successUrl, - cancel_url: cancelUrl, + return_url: `${returnUrl}?session_id={CHECKOUT_SESSION_ID}`, metadata: { userId }, }); - return { url: session.url, sessionId: session.id }; + return { clientSecret: session.client_secret ?? "", sessionId: session.id }; } export async function createPortalSession(customerId: string, returnUrl: string) {
FeatureBasicPlusPremium + Feature + + Basic + + Plus + + Premium +
{row.feature} - {row.basic === true ? : row.basic === false ? : {row.basic}} + + {row.feature} - {row.plus === true ? : row.plus === false ? : {row.plus}} + {row.basic === true ? ( + + ) : row.basic === false ? ( + + ) : ( + + {row.basic} + + )} - {row.premium === true ? : row.premium === false ? : {row.premium}} + {row.plus === true ? ( + + ) : row.plus === false ? ( + + ) : ( + + {row.plus} + + )} + + {row.premium === true ? ( + + ) : row.premium === false ? ( + + ) : ( + + {row.premium} + + )}