diff --git a/backend/src/routes/reviewflow-public.js b/backend/src/routes/reviewflow-public.js
index baf6b1d..5dcc16f 100644
--- a/backend/src/routes/reviewflow-public.js
+++ b/backend/src/routes/reviewflow-public.js
@@ -1,5 +1,6 @@
 const express = require('express');
 const ReviewFlowService = require('../services/reviewflow');
+const ReviewFlowOAuthService = require('../services/reviewflow-oauth');
 const wrapAsync = require('../helpers').wrapAsync;
 
 const router = express.Router();
@@ -20,6 +21,28 @@ router.post('/reviews/:trackingToken', wrapAsync(async (req, res) => {
 }));
 
 
+
+router.use('/oauth/:provider/callback', express.urlencoded({ extended: false }));
+
+function sendOAuthCallback(req, res) {
+  const result = ReviewFlowOAuthService.handleOAuthCallback(
+    req.params.provider,
+    ReviewFlowOAuthService.getCallbackInput(req),
+  );
+
+  res.status(result.status === 'error' ? 400 : 200)
+    .type('html')
+    .send(ReviewFlowOAuthService.renderCallbackHtml(result));
+}
+
+router.get('/oauth/:provider/callback', wrapAsync(async (req, res) => {
+  sendOAuthCallback(req, res);
+}));
+
+router.post('/oauth/:provider/callback', wrapAsync(async (req, res) => {
+  sendOAuthCallback(req, res);
+}));
+
 function escapeHtml(value) {
   return String(value || '')
     .replace(/&/g, '&')
diff --git a/backend/src/routes/reviewflow.js b/backend/src/routes/reviewflow.js
index 363526f..a076e3b 100644
--- a/backend/src/routes/reviewflow.js
+++ b/backend/src/routes/reviewflow.js
@@ -2,6 +2,7 @@ const express = require('express');
 const crypto = require('crypto');
 const db = require('../db/models');
 const ReviewFlowService = require('../services/reviewflow');
+const ReviewFlowOAuthService = require('../services/reviewflow-oauth');
 const SubscriptionService = require('../services/subscription');
 const wrapAsync = require('../helpers').wrapAsync;
 
@@ -44,6 +45,8 @@ const REVIEW_LINK_FIELDS = {
   custom: 'custom_review_link',
 };
 
+const DEFAULT_REVIEW_PLATFORMS = new Set(['google', 'yelp', 'facebook', 'custom']);
+
 function normalizeReviewDestination(value) {
   const destination = normalizeString(value).toLowerCase();
 
@@ -105,6 +108,34 @@ function normalizeOptionalUrl(value, message) {
   return normalized;
 }
 
+function normalizeOptionalDate(value, message) {
+  const normalized = normalizeString(value);
+
+  if (!normalized) {
+    return null;
+  }
+
+  const date = new Date(normalized);
+
+  if (Number.isNaN(date.getTime())) {
+    const error = new Error(message);
+    error.code = 400;
+    throw error;
+  }
+
+  return date;
+}
+
+function normalizeDefaultReviewPlatform(value, fallback = 'google') {
+  const platform = normalizeString(value || fallback).toLowerCase();
+
+  if (DEFAULT_REVIEW_PLATFORMS.has(platform)) {
+    return platform;
+  }
+
+  return DEFAULT_REVIEW_PLATFORMS.has(fallback) ? fallback : 'google';
+}
+
 function normalizeOptionalEmail(value) {
   const normalized = normalizeString(value).toLowerCase();
 
@@ -460,6 +491,7 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
   const body = req.body || {};
   const businessId = normalizeString(body.businessId || body.id);
   const businessName = normalizeString(body.businessName || body.name || 'Review Flow Business');
+  const ownerId = normalizeString(body.ownerId || body.owner || currentUser.id) || currentUser.id;
   let business = businessId
     ? await db.businesses.findOne({ where: { id: businessId, createdById: currentUser.id } })
     : await db.businesses.findOne({ where: { name: businessName, createdById: currentUser.id } });
@@ -476,10 +508,10 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
       name: businessName,
       business_type: normalizeBusinessType(body.businessType || body.business_type, 'hybrid'),
       automation_mode: 'set_and_forget',
-      is_active: true,
+      is_active: parseBoolean(body.isActive ?? body.is_active, true),
       createdById: currentUser.id,
       updatedById: currentUser.id,
-      ownerId: currentUser.id,
+      ownerId,
     });
   }
 
@@ -493,6 +525,7 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
   }
 
   const aiReplyEnabled = parseBoolean(body.aiReplyEnabled ?? body.ai_reply_enabled, business.ai_reply_enabled);
+  const stripeConnectedAtInput = body.stripeConnectedAt ?? body.stripe_connected_at;
   const referralEnabled = parseBoolean(body.referralEnabled ?? body.referral_enabled, business.referral_enabled);
   const npsEnabled = parseBoolean(body.npsEnabled ?? body.nps_enabled, business.nps_enabled);
   const broadcastEnabled = parseBoolean(body.broadcastEnabled ?? body.broadcast_enabled, business.broadcast_enabled);
@@ -525,6 +558,7 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
     name: businessName || business.name,
     business_type: businessType,
     automation_mode: normalizeString(body.automationMode || body.automation_mode) || 'set_and_forget',
+    ownerId,
     review_destination: reviewDestination,
     google_review_link: normalizeOptionalUrl(body.googleReviewLink ?? body.google_review_link ?? business.google_review_link, 'Google review link must be a valid URL.'),
     yelp_review_link: normalizeOptionalUrl(body.yelpReviewLink ?? body.yelp_review_link ?? business.yelp_review_link, 'Yelp review link must be a valid URL.'),
@@ -549,7 +583,13 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
     competitor_urls: normalizeString(body.competitorUrls ?? body.competitor_urls) || business.competitor_urls || '',
     review_widget_theme: normalizeString(body.reviewWidgetTheme ?? body.review_widget_theme) || business.review_widget_theme || 'light',
     ...brandedMessagingPayload,
-    is_active: true,
+    is_active: parseBoolean(body.isActive ?? body.is_active, business.is_active !== false),
+    stripe_account_reference: normalizeString(body.stripeAccountReference ?? body.stripe_account_reference ?? business.stripe_account_reference),
+    stripe_connected: parseBoolean(body.stripeConnected ?? body.stripe_connected, business.stripe_connected),
+    stripe_connected_at: stripeConnectedAtInput === undefined
+      ? business.stripe_connected_at
+      : normalizeOptionalDate(stripeConnectedAtInput, 'Stripe connected at must be a valid date and time.'),
+    default_review_platform: normalizeDefaultReviewPlatform(body.defaultReviewPlatform ?? body.default_review_platform ?? business.default_review_platform, business.default_review_platform || 'google'),
     updatedById: currentUser.id,
   };
 
@@ -559,6 +599,24 @@ router.put('/growth-tools/business', wrapAsync(async (req, res) => {
   res.status(200).send({ business: ReviewFlowService.serializeBusiness(req, refreshedBusiness) });
 }));
 
+
+router.get('/oauth/:provider/status', wrapAsync(async (req, res) => {
+  const status = ReviewFlowOAuthService.getOAuthStatus(req.params.provider, req);
+
+  res.status(200).send(status);
+}));
+
+router.post('/oauth/:provider/start', wrapAsync(async (req, res) => {
+  const start = ReviewFlowOAuthService.createAuthorizationStart(
+    req.params.provider,
+    req.currentUser,
+    req.body || {},
+    req,
+  );
+
+  res.status(200).send(start);
+}));
+
 router.post('/growth-tools/broadcast', wrapAsync(async (req, res) => {
   const campaignType = normalizeString(req.body?.campaignType || 'broadcast');
   const featureByCampaign = {
diff --git a/backend/src/services/reviewflow-oauth.js b/backend/src/services/reviewflow-oauth.js
new file mode 100644
index 0000000..f3b808a
--- /dev/null
+++ b/backend/src/services/reviewflow-oauth.js
@@ -0,0 +1,448 @@
+const crypto = require('crypto');
+const config = require('../config');
+const ReviewFlowService = require('./reviewflow');
+
+const STATE_TTL_MS = 30 * 60 * 1000;
+
+const OAUTH_PROVIDER_DEFINITIONS = {
+  stripe: {
+    requiredEnvGroups: [
+      { key: 'clientId', names: ['STRIPE_CONNECT_CLIENT_ID', 'STRIPE_CLIENT_ID'] },
+      { key: 'clientSecret', names: ['STRIPE_CONNECT_CLIENT_SECRET', 'STRIPE_SECRET_KEY'] },
+    ],
+    getAuthorizeBaseUrl: () => process.env.STRIPE_CONNECT_AUTHORIZE_URL || 'https://connect.stripe.com/oauth/authorize',
+    getScopes: () => process.env.STRIPE_CONNECT_SCOPE || 'read_write',
+    buildAuthorizationUrl({ credentials, callbackUrl, state }) {
+      return appendQuery(this.getAuthorizeBaseUrl(), {
+        response_type: 'code',
+        client_id: credentials.clientId,
+        scope: this.getScopes(),
+        redirect_uri: callbackUrl,
+        state,
+      });
+    },
+  },
+  square: {
+    requiredEnvGroups: [
+      { key: 'clientId', names: ['SQUARE_APP_ID', 'SQUARE_CLIENT_ID'] },
+      { key: 'clientSecret', names: ['SQUARE_APP_SECRET', 'SQUARE_CLIENT_SECRET'] },
+    ],
+    getAuthorizeBaseUrl: () => {
+      if (process.env.SQUARE_AUTHORIZE_URL) return process.env.SQUARE_AUTHORIZE_URL;
+      return process.env.SQUARE_ENVIRONMENT === 'sandbox'
+        ? 'https://connect.squareupsandbox.com/oauth2/authorize'
+        : 'https://connect.squareup.com/oauth2/authorize';
+    },
+    getScopes: () => process.env.SQUARE_OAUTH_SCOPES || 'CUSTOMERS_READ ORDERS_READ PAYMENTS_READ MERCHANT_PROFILE_READ',
+    buildAuthorizationUrl({ credentials, callbackUrl, state }) {
+      return appendQuery(this.getAuthorizeBaseUrl(), {
+        client_id: credentials.clientId,
+        response_type: 'code',
+        scope: this.getScopes(),
+        redirect_uri: callbackUrl,
+        state,
+      });
+    },
+  },
+  paypal: {
+    requiredEnvGroups: [
+      { key: 'clientId', names: ['PAYPAL_CLIENT_ID'] },
+      { key: 'clientSecret', names: ['PAYPAL_CLIENT_SECRET'] },
+    ],
+    getAuthorizeBaseUrl: () => {
+      if (process.env.PAYPAL_AUTHORIZE_URL) return process.env.PAYPAL_AUTHORIZE_URL;
+      return process.env.PAYPAL_ENVIRONMENT === 'sandbox'
+        ? 'https://www.sandbox.paypal.com/connect'
+        : 'https://www.paypal.com/connect';
+    },
+    getScopes: () => process.env.PAYPAL_OAUTH_SCOPES || 'openid profile email',
+    buildAuthorizationUrl({ credentials, callbackUrl, state }) {
+      return appendQuery(this.getAuthorizeBaseUrl(), {
+        flowEntry: 'static',
+        client_id: credentials.clientId,
+        response_type: 'code',
+        scope: this.getScopes(),
+        redirect_uri: callbackUrl,
+        state,
+      });
+    },
+  },
+  shopify: {
+    requiredEnvGroups: [
+      { key: 'clientId', names: ['SHOPIFY_CLIENT_ID'] },
+      { key: 'clientSecret', names: ['SHOPIFY_CLIENT_SECRET'] },
+    ],
+    getScopes: () => process.env.SHOPIFY_OAUTH_SCOPES || 'read_orders,read_customers',
+    buildAuthorizationUrl({ credentials, callbackUrl, state, body }) {
+      const shop = normalizeShopifyShop(body.shop || body.shopDomain || body.storeDomain || body.accountReference);
+
+      return appendQuery(`https://${shop}/admin/oauth/authorize`, {
+        client_id: credentials.clientId,
+        scope: this.getScopes(),
+        redirect_uri: callbackUrl,
+        state,
+      });
+    },
+  },
+  woocommerce: {
+    requiredEnvGroups: [],
+    buildAuthorizationUrl({ callbackUrl, state, body, req }) {
+      const storeOrigin = normalizeStoreOrigin(
+        body.storeUrl || body.shop || body.shopDomain || body.storeDomain || body.accountReference,
+        'Enter your WooCommerce store URL in the account/store label field before starting OAuth backup.',
+      );
+
+      return appendQuery(`${storeOrigin}/wc-auth/v1/authorize`, {
+        app_name: process.env.WOOCOMMERCE_APP_NAME || 'ReviewFlow',
+        scope: process.env.WOOCOMMERCE_OAUTH_SCOPE || 'read_write',
+        user_id: state,
+        return_url: getAppReturnUrl(req, 'woocommerce'),
+        callback_url: callbackUrl,
+      });
+    },
+  },
+};
+
+function normalizeString(value) {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+function httpError(message, code = 400) {
+  const error = new Error(message);
+  error.code = code;
+  return error;
+}
+
+function appendQuery(baseUrl, params) {
+  const url = new URL(baseUrl);
+
+  Object.entries(params).forEach(([key, value]) => {
+    const normalized = normalizeString(value);
+
+    if (normalized) {
+      url.searchParams.set(key, normalized);
+    }
+  });
+
+  return url.toString();
+}
+
+function getEnvValue(names) {
+  const foundName = names.find((name) => normalizeString(process.env[name]));
+  return foundName ? normalizeString(process.env[foundName]) : '';
+}
+
+function resolveCredentials(definition) {
+  const credentials = {};
+  const missing = [];
+
+  definition.requiredEnvGroups.forEach((group) => {
+    const value = getEnvValue(group.names);
+
+    if (value) {
+      credentials[group.key] = value;
+      return;
+    }
+
+    missing.push(group.names.join(' or '));
+  });
+
+  return { credentials, missing };
+}
+
+function getRequestOrigin(req) {
+  const forwardedProto = normalizeString(req.headers['x-forwarded-proto']).split(',')[0];
+  const proto = forwardedProto || req.protocol || 'https';
+  const forwardedHost = normalizeString(req.headers['x-forwarded-host']).split(',')[0];
+  const host = forwardedHost || req.get('host');
+
+  return `${proto}://${host}`;
+}
+
+function getCallbackUrl(req, provider) {
+  return `${getRequestOrigin(req)}/api/reviewflow-public/oauth/${provider}/callback`;
+}
+
+function getAppReturnUrl(req, provider) {
+  return `${getRequestOrigin(req)}/connect?payment_oauth=${provider}`;
+}
+
+function base64UrlEncode(value) {
+  return Buffer.from(value)
+    .toString('base64')
+    .replace(/=/g, '')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_');
+}
+
+function base64UrlDecode(value) {
+  const normalized = value.replace(/-/g, '+').replace(/_/g, '/');
+  const padding = normalized.length % 4 ? '='.repeat(4 - (normalized.length % 4)) : '';
+
+  return Buffer.from(`${normalized}${padding}`, 'base64').toString('utf8');
+}
+
+function signStatePayload(encodedPayload) {
+  return crypto
+    .createHmac('sha256', config.secret_key)
+    .update(encodedPayload)
+    .digest('base64')
+    .replace(/=/g, '')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_');
+}
+
+function safeEqual(left, right) {
+  const leftBuffer = Buffer.from(left);
+  const rightBuffer = Buffer.from(right);
+
+  return leftBuffer.length === rightBuffer.length && crypto.timingSafeEqual(leftBuffer, rightBuffer);
+}
+
+function createStateToken(payload) {
+  const encodedPayload = base64UrlEncode(JSON.stringify({
+    ...payload,
+    issuedAt: Date.now(),
+    nonce: crypto.randomBytes(12).toString('hex'),
+  }));
+  const signature = signStatePayload(encodedPayload);
+
+  return `${encodedPayload}.${signature}`;
+}
+
+function verifyStateToken(state) {
+  const normalizedState = normalizeString(state);
+  const [encodedPayload, signature] = normalizedState.split('.');
+
+  if (!encodedPayload || !signature || !safeEqual(signature, signStatePayload(encodedPayload))) {
+    throw httpError('OAuth state is invalid. Please restart the payment provider connection from ReviewFlow.', 400);
+  }
+
+  let payload;
+
+  try {
+    payload = JSON.parse(base64UrlDecode(encodedPayload));
+  } catch (parseError) {
+    console.error('Failed to parse ReviewFlow OAuth state:', parseError);
+    throw httpError('OAuth state could not be read. Please restart the payment provider connection from ReviewFlow.', 400);
+  }
+
+  if (!payload.issuedAt || Date.now() - payload.issuedAt > STATE_TTL_MS) {
+    throw httpError('OAuth state expired. Please restart the payment provider connection from ReviewFlow.', 400);
+  }
+
+  return payload;
+}
+
+function normalizeShopifyShop(value) {
+  const rawValue = normalizeString(value)
+    .toLowerCase()
+    .replace(/^https?:\/\//, '')
+    .split('/')[0];
+
+  if (!rawValue) {
+    throw httpError('Enter your Shopify myshopify.com store domain in the account/store label field before starting OAuth backup.', 400);
+  }
+
+  const shop = rawValue.includes('.') ? rawValue : `${rawValue}.myshopify.com`;
+
+  if (!/^[a-z0-9][a-z0-9.-]*\.myshopify\.com$/.test(shop)) {
+    throw httpError('Shopify OAuth needs your myshopify.com store domain, such as your-store.myshopify.com.', 400);
+  }
+
+  return shop;
+}
+
+function normalizeStoreOrigin(value, message) {
+  const rawValue = normalizeString(value);
+
+  if (!rawValue) {
+    throw httpError(message, 400);
+  }
+
+  const valueWithProtocol = /^https?:\/\//i.test(rawValue) ? rawValue : `https://${rawValue}`;
+
+  try {
+    const parsed = new URL(valueWithProtocol);
+    return parsed.origin;
+  } catch {
+    throw httpError('Enter a valid WooCommerce store URL, such as https://store.example.com.', 400);
+  }
+}
+
+function getProviderOAuthDefinition(providerName) {
+  const providerConfig = ReviewFlowService.getProviderConfig(providerName);
+  const definition = OAUTH_PROVIDER_DEFINITIONS[providerConfig.provider];
+
+  if (!definition) {
+    throw httpError('OAuth backup is not available for this payment provider yet.', 400);
+  }
+
+  return { providerConfig, definition };
+}
+
+function getOAuthStatus(providerName, req) {
+  const { providerConfig, definition } = getProviderOAuthDefinition(providerName);
+  const { missing } = resolveCredentials(definition);
+
+  return {
+    provider: providerConfig.provider,
+    label: providerConfig.label,
+    mode: 'backup',
+    primaryConnection: 'webhook',
+    configured: missing.length === 0,
+    missingConfiguration: missing,
+    callbackUrl: getCallbackUrl(req, providerConfig.provider),
+    message: missing.length === 0
+      ? `${providerConfig.label} OAuth backup can be started. Webhook remains the primary connection.`
+      : `OAuth backup for ${providerConfig.label} is ready, but provider credentials are not configured yet. Add ${missing.join(', ')} to the backend environment first.`,
+  };
+}
+
+function createAuthorizationStart(providerName, currentUser, body, req) {
+  const { providerConfig, definition } = getProviderOAuthDefinition(providerName);
+  const { credentials, missing } = resolveCredentials(definition);
+  const callbackUrl = getCallbackUrl(req, providerConfig.provider);
+
+  if (missing.length > 0) {
+    throw httpError(
+      `OAuth backup for ${providerConfig.label} is ready, but provider credentials are not configured yet. Add ${missing.join(', ')} to the backend environment, then try again. Webhooks remain the primary payment trigger. Callback URL: ${callbackUrl}`,
+      400,
+    );
+  }
+
+  const state = createStateToken({
+    provider: providerConfig.provider,
+    userId: currentUser.id,
+    businessId: normalizeString(body.businessId),
+    reason: normalizeString(body.reason) || 'webhook_backup',
+    accountReference: normalizeString(body.accountReference),
+  });
+  const authorizationUrl = definition.buildAuthorizationUrl({
+    credentials,
+    callbackUrl,
+    state,
+    body: body || {},
+    req,
+  });
+
+  return {
+    provider: providerConfig.provider,
+    label: providerConfig.label,
+    mode: 'backup',
+    primaryConnection: 'webhook',
+    authorizationUrl,
+    callbackUrl,
+    message: `Opening ${providerConfig.label} OAuth as a backup. Webhooks remain the primary payment trigger.`,
+  };
+}
+
+function getCallbackInput(req) {
+  return {
+    ...(req.query || {}),
+    ...(req.body || {}),
+  };
+}
+
+function readProviderError(input) {
+  const error = normalizeString(input.error || input.error_description);
+
+  if (!error) return '';
+
+  return error;
+}
+
+function handleOAuthCallback(providerName, input) {
+  const providerConfig = ReviewFlowService.getProviderConfig(providerName);
+  const providerError = readProviderError(input);
+  const stateToken = normalizeString(input.state || input.user_id);
+
+  if (!stateToken) {
+    throw httpError('OAuth callback is missing state. Please restart the payment provider connection from ReviewFlow.', 400);
+  }
+
+  const state = verifyStateToken(stateToken);
+
+  if (state.provider !== providerConfig.provider) {
+    throw httpError('OAuth callback provider does not match the original ReviewFlow connection request.', 400);
+  }
+
+  if (providerError) {
+    return {
+      provider: providerConfig.provider,
+      label: providerConfig.label,
+      status: 'error',
+      message: `${providerConfig.label} did not complete OAuth authorization: ${providerError}`,
+      primaryConnection: 'webhook',
+      backupConnection: 'oauth',
+    };
+  }
+
+  const codeReceived = Boolean(normalizeString(input.code));
+  const wooCommerceCredentialsReceived = providerConfig.provider === 'woocommerce'
+    && Boolean(normalizeString(input.consumer_key) && normalizeString(input.consumer_secret));
+
+  return {
+    provider: providerConfig.provider,
+    label: providerConfig.label,
+    status: codeReceived || wooCommerceCredentialsReceived ? 'received' : 'pending',
+    codeReceived,
+    credentialsReceived: wooCommerceCredentialsReceived,
+    primaryConnection: 'webhook',
+    backupConnection: 'oauth',
+    message: codeReceived || wooCommerceCredentialsReceived
+      ? `${providerConfig.label} returned OAuth authorization successfully. Webhook remains primary; this backup callback is ready for token exchange/storage when provider secrets and credential storage are finalized.`
+      : `${providerConfig.label} callback was received, but no authorization code was included. Please restart the OAuth backup connection from ReviewFlow.`,
+  };
+}
+
+function renderCallbackHtml(result) {
+  const isSuccess = result.status === 'received';
+  const title = isSuccess ? 'OAuth backup received' : 'OAuth backup needs attention';
+  const accent = isSuccess ? '#059669' : '#dc2626';
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${escapeHtml(title)}</title>
+  <style>
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f8fafc; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+    main { width: min(680px, calc(100% - 32px)); border: 1px solid #e2e8f0; border-radius: 28px; background: #fff; padding: 32px; box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12); }
+    .eyebrow { color: ${accent}; font-size: 12px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
+    h1 { margin: 10px 0 12px; font-size: clamp(28px, 5vw, 42px); line-height: 1; }
+    p { color: #475569; line-height: 1.7; }
+    .badge { display: inline-flex; margin-top: 12px; border-radius: 999px; background: #ecfdf5; color: #047857; padding: 8px 12px; font-weight: 900; font-size: 13px; }
+    a { display: inline-flex; margin-top: 20px; border-radius: 999px; background: #4f46e5; color: white; padding: 12px 18px; text-decoration: none; font-weight: 900; }
+  </style>
+</head>
+<body>
+  <main>
+    <div class="eyebrow">ReviewFlow payment backup</div>
+    <h1>${escapeHtml(title)}</h1>
+    <p>${escapeHtml(result.message)}</p>
+    <div class="badge">${escapeHtml(result.label)} · Webhook primary · OAuth backup</div>
+    <br />
+    <a href="/connect">Return to payment setup</a>
+  </main>
+</body>
+</html>`;
+}
+
+function escapeHtml(value) {
+  return String(value || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+module.exports = {
+  createAuthorizationStart,
+  getCallbackInput,
+  getOAuthStatus,
+  handleOAuthCallback,
+  renderCallbackHtml,
+};
diff --git a/backend/src/services/reviewflow.js b/backend/src/services/reviewflow.js
index d2b2b93..31e8869 100644
--- a/backend/src/services/reviewflow.js
+++ b/backend/src/services/reviewflow.js
@@ -1013,6 +1013,11 @@ function serializeBusiness(req, business) {
   return {
     id: business.id,
     name: business.name,
+    ownerId: business.ownerId || '',
+    is_active: business.is_active !== false,
+    stripe_account_reference: business.stripe_account_reference || '',
+    stripe_connected: Boolean(business.stripe_connected),
+    stripe_connected_at: business.stripe_connected_at || null,
     business_type: normalizeBusinessType(business.business_type),
     automation_mode: business.automation_mode || 'set_and_forget',
     followup_enabled: business.followup_enabled !== false,
diff --git a/frontend/src/components/FloatingAiHelper.tsx b/frontend/src/components/FloatingAiHelper.tsx
new file mode 100644
index 0000000..205c0d4
--- /dev/null
+++ b/frontend/src/components/FloatingAiHelper.tsx
@@ -0,0 +1,209 @@
+import {
+  mdiChatQuestionOutline,
+  mdiClose,
+  mdiRobotHappyOutline,
+  mdiSend,
+} from '@mdi/js';
+import { useRouter } from 'next/router';
+import React, { FormEvent, useMemo, useState } from 'react';
+import BaseIcon from './BaseIcon';
+import { aiResponse } from '../stores/openAiSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+
+type ChatMessage = {
+  role: 'assistant' | 'user';
+  content: string;
+};
+
+function extractAiResponseText(response: any) {
+  if (typeof response?.output_text === 'string') return response.output_text;
+  if (typeof response?.text === 'string') return response.text;
+
+  const output = Array.isArray(response?.output)
+    ? response.output
+    : Array.isArray(response?.data?.output)
+      ? response.data.output
+      : [];
+
+  for (const item of output) {
+    if (item?.type === 'message' && Array.isArray(item.content)) {
+      const textContent = item.content.find((contentItem) => contentItem?.type === 'output_text' && typeof contentItem.text === 'string');
+
+      if (textContent?.text) return textContent.text;
+    }
+  }
+
+  return '';
+}
+
+function buildSystemPrompt(pathname: string, userName: string) {
+  return [
+    'You are the ReviewFlow in-app AI setup assistant.',
+    'ReviewFlow is a SaaS/CRM/admin app for automating review requests after payments, orders, jobs, or customer transactions. The current business context is logistics/transportation, but users may configure any business type.',
+    'Important app areas: Setup, Connect, Review Flow, Growth Tools, Businesses, Customers, Transactions, Review Requests, Stripe Events, Cron Runs, Subscription, Users, Roles, and Permissions.',
+    'Payment setup flow: select provider, create/copy ReviewFlow webhook URL, paste that webhook URL into the provider dashboard, paste the same URL back into the app to confirm, run a test transaction, wait for status Complete, then click Finish setup to close into the summary box.',
+    'Review output setup flow: choose business type, choose review destinations such as Google/Facebook/Yelp/Angi/OpenTable/Trustpilot/custom/Shopify hosted, add required links, then save/finish selections.',
+    'When helping, give short step-by-step guidance. Explain basic concepts kindly because the user may be new to web development. Do not claim that external OAuth is fully connected unless the app screen says it is. If webhook setup fails, suggest checking provider, exact URL match, business type/provider compatibility, and using the test transaction window.',
+    `Current page path: ${pathname}.`,
+    userName ? `Current signed-in user name: ${userName}.` : '',
+  ].filter(Boolean).join('\n');
+}
+
+export default function FloatingAiHelper() {
+  const dispatch = useAppDispatch();
+  const router = useRouter();
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const { isAskingResponse } = useAppSelector((state) => state.openAi);
+  const [isOpen, setIsOpen] = useState(false);
+  const [dismissedNudge, setDismissedNudge] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [isSending, setIsSending] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([
+    {
+      role: 'assistant',
+      content: 'Hi — I can help you set up ReviewFlow. Ask me about webhook URLs, test transactions, review destinations, Growth Tools, or what to do next.',
+    },
+  ]);
+
+  const isSetupRoute = useMemo(
+    () => ['/setup', '/connect', '/growth-tools', '/reviewflow'].some((path) => router.pathname.startsWith(path)),
+    [router.pathname],
+  );
+  const userName = [currentUser?.firstName, currentUser?.lastName].filter(Boolean).join(' ');
+
+  const submitMessage = async (event: FormEvent) => {
+    event.preventDefault();
+
+    const question = draft.trim();
+
+    if (!question || isSending) return;
+
+    const nextMessages: ChatMessage[] = [...messages, { role: 'user', content: question }];
+    const payload = {
+      input: [
+        { role: 'system', content: buildSystemPrompt(router.pathname, userName) },
+        ...nextMessages.slice(-8).map((message) => ({ role: message.role, content: message.content })),
+      ],
+      options: { poll_interval: 5, poll_timeout: 300 },
+    };
+
+    setMessages(nextMessages);
+    setDraft('');
+    setIsSending(true);
+
+    try {
+      const response = await dispatch(aiResponse(payload)).unwrap();
+      const answer = extractAiResponseText(response) || 'I received a response, but could not find readable assistant text. Please try asking again.';
+
+      setMessages([...nextMessages, { role: 'assistant', content: answer }]);
+    } catch (requestError) {
+      console.error('Floating AI helper request failed:', { payload, error: requestError });
+      setMessages([
+        ...nextMessages,
+        {
+          role: 'assistant',
+          content: 'I could not reach the AI helper right now. Please try again in a moment, and check that you are still signed in.',
+        },
+      ]);
+      throw requestError;
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return (
+    <div className='fixed bottom-5 right-5 z-[70] flex flex-col items-end gap-3'>
+      {!isOpen && isSetupRoute && !dismissedNudge ? (
+        <div className='max-w-xs rounded-3xl border border-indigo-200 bg-white p-4 text-sm text-slate-700 shadow-2xl dark:border-indigo-900 dark:bg-dark-900 dark:text-slate-100'>
+          <div className='flex items-start gap-3'>
+            <BaseIcon path={mdiRobotHappyOutline} className='mt-0.5 shrink-0 text-indigo-600 dark:text-indigo-300' />
+            <div>
+              <p className='font-black text-slate-900 dark:text-white'>Need setup help?</p>
+              <p className='mt-1 leading-5'>Click the AI helper any time for first-this-then-this guidance.</p>
+            </div>
+            <button
+              type='button'
+              aria-label='Dismiss AI helper reminder'
+              className='ml-1 rounded-full p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-dark-800 dark:hover:text-white'
+              onClick={() => setDismissedNudge(true)}
+            >
+              <BaseIcon path={mdiClose} size={16} />
+            </button>
+          </div>
+        </div>
+      ) : null}
+
+      {isOpen ? (
+        <div className='w-[calc(100vw-2rem)] max-w-md overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-dark-700 dark:bg-dark-900'>
+          <div className='flex items-center justify-between bg-gradient-to-r from-indigo-700 to-sky-600 p-4 text-white'>
+            <div className='flex items-center gap-3'>
+              <span className='flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15'>
+                <BaseIcon path={mdiRobotHappyOutline} />
+              </span>
+              <div>
+                <p className='font-black'>ReviewFlow AI Helper</p>
+                <p className='text-xs text-indigo-100'>Ask about setup, payments, reviews, or next steps.</p>
+              </div>
+            </div>
+            <button
+              type='button'
+              aria-label='Close AI helper'
+              className='rounded-full p-2 hover:bg-white/15'
+              onClick={() => setIsOpen(false)}
+            >
+              <BaseIcon path={mdiClose} />
+            </button>
+          </div>
+
+          <div className='max-h-[55vh] space-y-3 overflow-y-auto p-4'>
+            {messages.map((message, index) => (
+              <div
+                key={`${message.role}-${index}`}
+                className={`rounded-3xl p-3 text-sm leading-6 ${message.role === 'user'
+                  ? 'ml-8 bg-indigo-600 text-white'
+                  : 'mr-8 bg-slate-100 text-slate-800 dark:bg-dark-800 dark:text-slate-100'}`}
+              >
+                {message.content}
+              </div>
+            ))}
+            {isSending || isAskingResponse ? (
+              <div className='mr-8 rounded-3xl bg-slate-100 p-3 text-sm font-semibold text-slate-500 dark:bg-dark-800 dark:text-slate-300'>
+                Thinking…
+              </div>
+            ) : null}
+          </div>
+
+          <form onSubmit={submitMessage} className='border-t border-slate-200 p-3 dark:border-dark-700'>
+            <div className='flex gap-2'>
+              <textarea
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+                placeholder='Ask the AI helper…'
+                className='h-14 min-h-14 flex-1 rounded-2xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:border-dark-700 dark:bg-dark-800 dark:text-white'
+              />
+              <button
+                type='submit'
+                disabled={!draft.trim() || isSending}
+                className='flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-indigo-600 text-white shadow-lg transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50'
+              >
+                <BaseIcon path={mdiSend} />
+              </button>
+            </div>
+          </form>
+        </div>
+      ) : null}
+
+      <button
+        type='button'
+        aria-label='Open ReviewFlow AI helper'
+        className='flex h-16 w-16 items-center justify-center rounded-full bg-indigo-600 text-white shadow-2xl ring-4 ring-white transition hover:-translate-y-0.5 hover:bg-indigo-700 dark:ring-dark-800'
+        onClick={() => {
+          setIsOpen((current) => !current);
+          setDismissedNudge(true);
+        }}
+      >
+        <BaseIcon path={isOpen ? mdiClose : mdiChatQuestionOutline} size={30} />
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/components/ReviewFlow/PaymentProviderConnectors.tsx b/frontend/src/components/ReviewFlow/PaymentProviderConnectors.tsx
index f0f2bae..2b24297 100644
--- a/frontend/src/components/ReviewFlow/PaymentProviderConnectors.tsx
+++ b/frontend/src/components/ReviewFlow/PaymentProviderConnectors.tsx
@@ -1,19 +1,23 @@
 import {
   mdiAlertCircleOutline,
+  mdiCashCheck,
   mdiCheckCircleOutline,
+  mdiClipboardTextOutline,
   mdiContentCopy,
-  mdiCreditCardOutline,
-  mdiRefresh,
+  mdiHelpCircleOutline,
+  mdiLinkVariant,
+  mdiPlayCircleOutline,
+  mdiRobotHappyOutline,
   mdiWebhook,
 } from '@mdi/js';
 import axios from 'axios';
-import React, { FormEvent, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import BaseButton from '../BaseButton';
+import BaseIcon from '../BaseIcon';
 import CardBox from '../CardBox';
 import FormField from '../FormField';
-import { getBusinessProfileUsageLabel } from '../../helpers/businessPlanLabels';
 
-type BusinessType = 'local' | 'online' | 'hybrid';
+export type BusinessType = 'local' | 'online' | 'hybrid';
 
 export interface ProviderConnector {
   key: 'stripe' | 'square' | 'paypal' | 'shopify' | 'woocommerce' | string;
@@ -61,1693 +65,1194 @@ interface PaymentProviderConnectorsProps {
   eyebrow?: string;
   title?: string;
   description?: string;
+  initialBusinessId?: string;
+  initialBusinessName?: string;
   initialBusinessType?: BusinessType;
+  initialReviewDestination?: string;
+  initialReviewLink?: string;
+  initialDelayDays?: string | number;
   onConnected?: (
     business: ConnectorBusiness,
     connectorForm: ConnectorFormValues,
   ) => void | Promise<void>;
 }
 
-type ConnectorSubscriptionStatus = {
-  subscription: {
-    planId: string;
-    planName: string;
-    effectiveStatus: string;
-    isActive: boolean;
-  };
-  usage: {
-    businesses: number;
-    paymentConnectors: number;
-  };
-  limits: {
-    businesses: number;
-    paymentConnectors: number;
+type PaymentProviderKey = 'stripe' | 'square' | 'paypal' | 'shopify' | 'woocommerce';
+
+type PaymentProviderSetup = {
+  key: PaymentProviderKey;
+  label: string;
+  eventLabel: string;
+  defaultReviewDestination: string;
+  providerArea: string;
+  instructions: string[];
+  testWindow: {
+    title: string;
+    steps: string[];
+    success: string;
   };
+  summary: string;
 };
 
-const connectorDefaults: ConnectorFormValues = {
-  provider: 'stripe',
-  businessType: 'hybrid',
-  businessName: 'Review Flow Studio',
-  reviewDestination: 'google',
-  reviewLink: 'https://g.page/r/example/review',
-  delayDays: '7',
-  accountReference: '',
+type CompletedConnection = {
+  providerKey: PaymentProviderKey;
+  providerLabel: string;
+  status: string;
+  completedAt: string;
+  summary: string;
+  testResult: string;
+  webhookUrl: string;
 };
 
-const providerOptions = [
+type TestTransaction = {
+  id: string;
+  providerReference: string;
+  customer: string;
+  email: string;
+  amount: string;
+  eventType: string;
+  receivedAt: string;
+  message: string;
+};
+
+type TestPayload = {
+  payload: Record<string, any>;
+  headers?: Record<string, string>;
+  transaction: Omit<TestTransaction, 'id' | 'message'>;
+};
+
+type OauthBackupReason = 'failed_test' | 'completed_webhook';
+
+const copyTextToClipboard = async (text: string) => {
+  let clipboardApiError: unknown;
+
+  if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch (copyError) {
+      clipboardApiError = copyError;
+      console.warn('Clipboard API copy failed; trying legacy copy fallback.', copyError);
+    }
+  }
+
+  if (typeof document === 'undefined') {
+    throw clipboardApiError || new Error('Clipboard copy is not available in this environment.');
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.setAttribute('readonly', 'true');
+  textarea.style.position = 'fixed';
+  textarea.style.left = '-9999px';
+  textarea.style.top = '0';
+  textarea.style.opacity = '0';
+
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+
+  try {
+    const copied = document.execCommand('copy');
+
+    if (!copied) {
+      throw new Error('Legacy clipboard copy command failed.');
+    }
+  } catch (fallbackError) {
+    console.error('Failed to copy webhook URL with the legacy fallback:', fallbackError);
+
+    if (clipboardApiError) {
+      console.error('Original Clipboard API error:', clipboardApiError);
+    }
+
+    throw fallbackError;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+};
+
+const paymentProviders: PaymentProviderSetup[] = [
   {
     key: 'stripe',
     label: 'Stripe',
-    categoryLabel: 'Payment trigger',
+    eventLabel: 'checkout.session.completed or payment_intent.succeeded',
     defaultReviewDestination: 'google',
-    businessTypes: ['local', 'online', 'hybrid'],
-    description: 'Connect card and checkout payments from Stripe.',
-  },
-  {
-    key: 'paypal',
-    label: 'PayPal',
-    categoryLabel: 'Payment trigger',
-    defaultReviewDestination: 'google',
-    businessTypes: ['local', 'online', 'hybrid'],
-    description: 'Connect completed PayPal captures and sales.',
+    providerArea: 'Stripe Dashboard → Developers → Webhooks',
+    instructions: [
+      'First, open Stripe Dashboard → Developers → Webhooks → Add endpoint.',
+      'Then copy the ReviewFlow webhook URL from this screen and paste it into Stripe as the endpoint URL.',
+      'Next, enable checkout.session.completed or payment_intent.succeeded events and save the webhook.',
+      'Finally, paste the same webhook URL back into the confirmation box below and run the test transaction.',
+    ],
+    testWindow: {
+      title: 'Stripe test transaction window',
+      steps: [
+        'ReviewFlow will send a safe Stripe-style checkout.session.completed test event to your generated webhook URL.',
+        'The backend will process it through the same webhook processor used by live payment events.',
+        'When the test transaction appears below, the status changes to Complete and Finish setup unlocks.',
+      ],
+      success: 'A successful Stripe test payment was received and saved as a ReviewFlow transaction.',
+    },
+    summary: 'Stripe is connected as the payment trigger for completed card or checkout payments.',
   },
   {
     key: 'square',
     label: 'Square',
-    categoryLabel: 'Payment trigger',
+    eventLabel: 'payment.created or payment.updated',
     defaultReviewDestination: 'google',
-    businessTypes: ['local', 'hybrid'],
-    description: 'Connect Square payment notifications.',
+    providerArea: 'Square Developer Console → Webhooks → Subscriptions',
+    instructions: [
+      'First, open Square Developer Console → Webhooks → Subscriptions.',
+      'Then create a subscription and paste the ReviewFlow webhook URL from this screen.',
+      'Next, enable completed payment events and save the webhook subscription.',
+      'Finally, paste the same webhook URL back into the confirmation box below and run the test transaction.',
+    ],
+    testWindow: {
+      title: 'Square test transaction window',
+      steps: [
+        'ReviewFlow will send a safe Square-style payment.created test event to your generated webhook URL.',
+        'The backend will process it through the same webhook processor used by live Square events.',
+        'When the test transaction appears below, the status changes to Complete and Finish setup unlocks.',
+      ],
+      success: 'A successful Square test payment was received and saved as a ReviewFlow transaction.',
+    },
+    summary: 'Square is connected as the payment trigger for completed in-person or online payments.',
+  },
+  {
+    key: 'paypal',
+    label: 'PayPal',
+    eventLabel: 'PAYMENT.CAPTURE.COMPLETED or PAYMENT.SALE.COMPLETED',
+    defaultReviewDestination: 'google',
+    providerArea: 'PayPal Developer Dashboard → Apps & Credentials → Webhooks',
+    instructions: [
+      'First, open PayPal Developer Dashboard → Apps & Credentials → Webhooks.',
+      'Then add a webhook and paste the ReviewFlow webhook URL from this screen.',
+      'Next, subscribe to completed payment/capture events and save the webhook.',
+      'Finally, paste the same webhook URL back into the confirmation box below and run the test transaction.',
+    ],
+    testWindow: {
+      title: 'PayPal test transaction window',
+      steps: [
+        'ReviewFlow will send a safe PayPal-style PAYMENT.CAPTURE.COMPLETED test event to your generated webhook URL.',
+        'The backend will process it through the same webhook processor used by live PayPal events.',
+        'When the test transaction appears below, the status changes to Complete and Finish setup unlocks.',
+      ],
+      success: 'A successful PayPal test payment was received and saved as a ReviewFlow transaction.',
+    },
+    summary: 'PayPal is connected as the payment trigger for completed captures, sales, or orders.',
   },
   {
     key: 'shopify',
     label: 'Shopify',
-    categoryLabel: 'Ecommerce order trigger + hosted reviews',
+    eventLabel: 'orders/paid',
     defaultReviewDestination: 'shopify_hosted',
-    businessTypes: ['online', 'hybrid'],
-    description:
-      'Connect paid Shopify orders; customers review products on a hosted Review Flow form.',
+    providerArea: 'Shopify admin → Settings → Notifications → Webhooks',
+    instructions: [
+      'First, open Shopify admin → Settings → Notifications → Webhooks.',
+      'Then create an orders/paid webhook in JSON format and paste the ReviewFlow webhook URL from this screen.',
+      'Next, save the webhook so paid orders are sent to ReviewFlow.',
+      'Finally, paste the same webhook URL back into the confirmation box below and run the test transaction.',
+    ],
+    testWindow: {
+      title: 'Shopify test order window',
+      steps: [
+        'ReviewFlow will send a safe Shopify-style orders/paid test event to your generated webhook URL.',
+        'The backend will process it through the same webhook processor used by live Shopify paid orders.',
+        'When the test order appears below, the status changes to Complete and Finish setup unlocks.',
+      ],
+      success: 'A successful Shopify paid-order test was received and saved as a ReviewFlow transaction.',
+    },
+    summary: 'Shopify is connected as the order trigger for paid ecommerce orders.',
   },
   {
     key: 'woocommerce',
     label: 'WooCommerce',
-    categoryLabel: 'Ecommerce order trigger',
+    eventLabel: 'order.created or order.updated',
     defaultReviewDestination: 'trustpilot',
-    businessTypes: ['online', 'hybrid'],
-    description: 'Connect WooCommerce orders from your WordPress store.',
+    providerArea: 'WordPress admin → WooCommerce → Settings → Advanced → Webhooks',
+    instructions: [
+      'First, open WordPress admin → WooCommerce → Settings → Advanced → Webhooks.',
+      'Then create an active webhook and paste the ReviewFlow webhook URL from this screen.',
+      'Next, choose order created/updated events so paid order changes are sent to ReviewFlow.',
+      'Finally, paste the same webhook URL back into the confirmation box below and run the test transaction.',
+    ],
+    testWindow: {
+      title: 'WooCommerce test order window',
+      steps: [
+        'ReviewFlow will send a safe WooCommerce-style completed order test event to your generated webhook URL.',
+        'The backend will process it through the same webhook processor used by live WooCommerce orders.',
+        'When the test order appears below, the status changes to Complete and Finish setup unlocks.',
+      ],
+      success: 'A successful WooCommerce completed-order test was received and saved as a ReviewFlow transaction.',
+    },
+    summary: 'WooCommerce is connected as the order trigger for processing or completed orders.',
   },
 ];
 
-const reviewDestinationOptions = [
-  {
-    key: 'google',
-    label: 'Google',
-    group: 'Local review destinations',
-    scope: 'local',
-    mode: 'external_link',
-    description: 'For local businesses collecting Google profile reviews.',
-  },
-  {
-    key: 'facebook',
-    label: 'Facebook',
-    group: 'Local review destinations',
-    scope: 'local',
-    mode: 'external_link',
-    description: 'For local Facebook recommendations and reviews.',
-  },
-  {
-    key: 'yelp',
-    label: 'Yelp',
-    group: 'Local review destinations',
-    scope: 'local',
-    mode: 'external_link',
-    description: 'For local-service Yelp review requests.',
-  },
-  {
-    key: 'angi',
-    label: 'Angi',
-    group: 'Local review destinations',
-    scope: 'local',
-    mode: 'external_link',
-    description: 'For home-service Angi profile review requests.',
-  },
-  {
-    key: 'opentable',
-    label: 'OpenTable',
-    group: 'Local review destinations',
-    scope: 'local',
-    mode: 'external_link',
-    description: 'For restaurant guests leaving OpenTable reviews.',
-  },
-  {
-    key: 'shopify_hosted',
-    label: 'Shopify hosted product review',
-    group: 'Ecommerce review destinations',
-    scope: 'online',
-    mode: 'hosted_form',
-    description:
-      'Review Flow hosts the product review form after a Shopify paid order.',
-  },
-  {
-    key: 'trustpilot',
-    label: 'Trustpilot',
-    group: 'Ecommerce review destinations',
-    scope: 'online',
-    mode: 'external_link',
-    description: 'For ecommerce brand/store review invitations.',
-  },
-  {
-    key: 'custom',
-    label: 'Custom review page',
-    group: 'Custom destination',
-    scope: 'hybrid',
-    mode: 'external_link',
-    description: 'Use any review page you control.',
-  },
-];
+const helpButtonLabel =
+  'Having problems connecting? Read our FAQs or ask the AI helper.';
 
-const reviewDestinationGroups = [
-  {
-    title: 'Local review destinations',
-    subtitle:
-      'Google, Facebook, Yelp, Angi, and OpenTable send customers to the correct local profile/review page.',
-    keys: ['google', 'facebook', 'yelp', 'angi', 'opentable'],
-  },
-  {
-    title: 'Ecommerce review destinations',
-    subtitle:
-      'Shopify uses Review Flow hosted product reviews. Trustpilot stays separate as an ecommerce review link destination.',
-    keys: ['shopify_hosted', 'trustpilot'],
-  },
-];
+const reviewDestinationLabels: Record<string, string> = {
+  google: 'Google',
+  facebook: 'Facebook',
+  yelp: 'Yelp',
+  angi: 'Angi',
+  opentable: 'OpenTable',
+  trustpilot: 'Trustpilot',
+  shopify_hosted: 'Shopify hosted product review',
+  custom: 'Custom review page',
+};
 
-const businessTypeOptions: Array<{
-  key: BusinessType;
-  label: string;
-  help: string;
-}> = [
-  {
-    key: 'local',
-    label: 'Local / service',
-    help: 'Keeps payment triggers focused on local review destinations.',
-  },
-  {
-    key: 'online',
-    label: 'Online / ecommerce',
-    help: 'Keeps order triggers focused on ecommerce review destinations.',
-  },
-  {
-    key: 'hybrid',
-    label: 'Hybrid',
-    help: 'Shows both local and online triggers for mixed businesses.',
-  },
-];
+const localReviewDestinations = new Set(['google', 'facebook', 'yelp', 'angi', 'opentable', 'custom']);
+const onlineReviewDestinations = new Set(['trustpilot', 'shopify_hosted', 'custom']);
 
 function normalizeBusinessType(value?: string): BusinessType {
-  if (value === 'local' || value === 'online' || value === 'hybrid') {
-    return value;
-  }
-
-  return 'hybrid';
+  return value === 'local' || value === 'online' || value === 'hybrid' ? value : 'hybrid';
 }
 
-function destinationAllowedForBusinessType(
+function normalizeReviewDestination(value?: string) {
+  return value && reviewDestinationLabels[value] ? value : '';
+}
+
+function getSafeReviewDestination(
+  provider: PaymentProviderSetup | undefined,
   businessType: BusinessType,
-  destination: (typeof reviewDestinationOptions)[number],
+  preferredDestination?: string,
 ) {
-  if (businessType === 'hybrid' || destination.scope === 'hybrid') {
-    return true;
+  const preferred = normalizeReviewDestination(preferredDestination);
+  const fallback = provider?.defaultReviewDestination || 'google';
+
+  if (businessType === 'local') {
+    return preferred && localReviewDestinations.has(preferred) ? preferred : 'google';
   }
 
-  return destination.scope === businessType;
-}
-
-function getReviewDestinationsForBusinessType(businessType: BusinessType) {
-  return reviewDestinationOptions.filter((destination) =>
-    destinationAllowedForBusinessType(businessType, destination),
-  );
-}
-
-function getDefaultReviewDestinationForBusinessType(businessType: BusinessType) {
-  if (businessType === 'online') return 'shopify_hosted';
-  return 'google';
-}
-
-function getAllowedReviewDestination(
-  businessType: BusinessType,
-  reviewDestination?: string,
-) {
-  const allowedDestinations = getReviewDestinationsForBusinessType(businessType);
-  const isAllowed = allowedDestinations.some(
-    (destination) => destination.key === reviewDestination,
-  );
-
-  return isAllowed
-    ? reviewDestination || allowedDestinations[0].key
-    : getDefaultReviewDestinationForBusinessType(businessType);
-}
-
-function providerAllowedForBusinessType(
-  businessType: BusinessType,
-  provider: (typeof providerOptions)[number],
-) {
-  return provider.businessTypes.includes(businessType);
-}
-
-function getProvidersForBusinessType(businessType: BusinessType) {
-  return providerOptions.filter((provider) =>
-    providerAllowedForBusinessType(businessType, provider),
-  );
-}
-
-const providerInstructions: Record<string, string[]> = {
-  stripe: [
-    'Stripe Dashboard → Developers → Webhooks → Add endpoint.',
-    'Paste this Review Flow webhook URL as the endpoint URL.',
-    'Send checkout.session.completed, payment_intent.succeeded, and charge.succeeded events.',
-  ],
-  square: [
-    'Square Developer Dashboard → Webhooks → Create subscription.',
-    'Paste this Review Flow webhook URL as the notification URL.',
-    'Send payment.created and payment.updated events so completed payments queue reviews.',
-  ],
-  paypal: [
-    'PayPal Developer Dashboard → Webhooks → Add webhook.',
-    'Paste this Review Flow webhook URL as the webhook URL.',
-    'Send PAYMENT.CAPTURE.COMPLETED or PAYMENT.SALE.COMPLETED events.',
-  ],
-  shopify: [
-    'Shopify admin → Settings → Notifications → Webhooks → Create webhook.',
-    'Choose JSON format, paste this Review Flow webhook URL, and save the webhook.',
-    'Start with orders/paid. Review Flow will generate a hosted product-review page for each paid order.',
-  ],
-  woocommerce: [
-    'WordPress admin → WooCommerce → Settings → Advanced → Webhooks → Add webhook.',
-    'Set status to Active, paste this Review Flow webhook URL as the delivery URL, and save.',
-    'Create order.created and order.updated webhooks so paid status changes can queue reviews.',
-  ],
-};
-
-const providerSetupDetails: Record<
-  string,
-  {
-    dashboardPath: string;
-    requiredEvents: string[];
-    steps: string[];
-    testTip: string;
-  }
-> = {
-  stripe: {
-    dashboardPath:
-      'Stripe Dashboard → Developers → Webhooks → Add endpoint or Create event destination',
-    requiredEvents: [
-      'checkout.session.completed',
-      'payment_intent.succeeded',
-      'charge.succeeded',
-    ],
-    steps: [
-      'Select Stripe in Review Flow, enter the business name, review link, delay days, and click Connect Stripe.',
-      'Copy the generated Review Flow webhook URL from the connected account card.',
-      'In Stripe, create a new webhook endpoint and paste the copied URL into the endpoint URL field.',
-      'Choose your account events unless you are intentionally configuring a Stripe Connect platform flow.',
-      'Add the required successful payment event types listed below, then save the endpoint.',
-      'Send a Stripe test webhook or make a test payment, then return here and click Check webhook status.',
-    ],
-    testTip:
-      'A successful Stripe delivery should show a 2xx response and create a payment event in Review Flow.',
-  },
-  square: {
-    dashboardPath:
-      'Square Developer Console → Application → Webhooks → Subscriptions → Add subscription',
-    requiredEvents: ['payment.created', 'payment.updated'],
-    steps: [
-      'Select Square in Review Flow, enter the business name, review link, delay days, and click Connect Square.',
-      'Copy the generated Review Flow webhook URL from the connected account card.',
-      'In Square, open your application, create a webhook subscription, and paste the copied URL as the notification URL.',
-      'Select the payment events listed below so completed payments can be converted into review requests.',
-      'Save the subscription and keep any Square signature details private for future verification hardening.',
-      'Use a Square test payment or webhook test delivery, then return here and click Check webhook status.',
-    ],
-    testTip:
-      'Square payments queue reviews only when the payment status is completed and a customer email is available.',
-  },
-  paypal: {
-    dashboardPath:
-      'PayPal Developer Dashboard → Apps & Credentials → REST app → Webhooks → Add webhook',
-    requiredEvents: [
-      'PAYMENT.CAPTURE.COMPLETED',
-      'PAYMENT.SALE.COMPLETED',
-      'CHECKOUT.ORDER.COMPLETED',
-    ],
-    steps: [
-      'Select PayPal in Review Flow, enter the business name, review link, delay days, and click Connect PayPal.',
-      'Copy the generated Review Flow webhook URL from the connected account card.',
-      'In PayPal, open the REST app that receives your payments and add a new webhook.',
-      'Paste the copied URL into the webhook URL field and subscribe to the completed payment events listed below.',
-      'Save the webhook, then confirm it is attached to the same PayPal app used by your checkout flow.',
-      'Run a sandbox checkout or webhook simulator event, then return here and click Check webhook status.',
-    ],
-    testTip:
-      'A completed PayPal capture, sale, or checkout order should appear as a payment event before a review request is queued.',
-  },
-  shopify: {
-    dashboardPath:
-      'Shopify admin → Settings → Notifications → Webhooks → Create webhook',
-    requiredEvents: ['orders/paid', 'orders/create', 'orders/fulfilled'],
-    steps: [
-      'Select Shopify in Review Flow, enter the business name and delay days, and click Connect Shopify.',
-      'Copy the generated Review Flow webhook URL from the connected account card.',
-      'In Shopify admin, open Settings, then Notifications, then create a webhook in the Webhooks section.',
-      'Choose the Order payment / orders/paid event, select JSON format, paste the copied URL, and save the webhook.',
-      'Review Flow will create a customer, transaction, and hosted product-review form link for each paid order with an email.',
-      'Use Shopify test notifications or place a test paid order, then return here and click Check webhook status.',
-    ],
-    testTip:
-      'A paid Shopify order queues a hosted Review Flow product review when the payload includes a customer email and financial_status is paid.',
-  },
-  woocommerce: {
-    dashboardPath:
-      'WordPress admin → WooCommerce → Settings → Advanced → Webhooks → Add webhook',
-    requiredEvents: ['order.created', 'order.updated'],
-    steps: [
-      'Select WooCommerce in Review Flow, enter the business name, review link, delay days, and click Connect WooCommerce.',
-      'Copy the generated Review Flow webhook URL from the connected account card.',
-      'In WordPress admin, open WooCommerce, then Settings, then Advanced, then Webhooks, and click Add webhook.',
-      'Name the webhook Review Flow, set Status to Active, choose the Order created topic, and paste the copied URL into Delivery URL.',
-      'Save the webhook, then add a second Active webhook for Order updated so status changes to processing or completed are captured.',
-      'Create or update a test order to processing/completed, then return here and click Check webhook status.',
-    ],
-    testTip:
-      'A WooCommerce order queues a review when status is processing or completed and the billing email is present.',
-  },
-};
-
-type ProviderApiBackup = {
-  summary: string;
-  samplePayload: string;
-  successTip: string;
-};
-
-type PaymentSetupMethod = 'Webhook' | 'API backup';
-
-type PaymentWebhookEvent = {
-  provider?: string;
-  provider_event_type?: string;
-  event_type?: string;
-  processed?: boolean;
-  processing_error?: string;
-  createdAt?: string;
-  business?: { name?: string };
-};
-
-type VerifiedPaymentSetup = {
-  provider: string;
-  providerLabel: string;
-  businessName: string;
-  method: PaymentSetupMethod;
-  reviewDestinationLabel: string;
-  verifiedAt: string;
-  statusNote: string;
-  eventType?: string;
-};
-
-const commonApiBackupUseCases = [
-  'Use this only after trying the provider dashboard webhook first.',
-  'Good for a custom backend, Zapier, Make, n8n, or middleware that already knows the payment/order succeeded.',
-  'Post JSON to the same secure Review Flow URL. Keep that URL private because it includes the provider secret token.',
-];
-
-const providerApiBackups: Record<string, ProviderApiBackup> = {
-  stripe: {
-    summary:
-      'If Stripe webhooks are blocked or you run a custom checkout service, send a Stripe-style successful payment event to Review Flow after payment confirmation.',
-    samplePayload: JSON.stringify(
-      {
-        id: 'evt_api_backup_stripe_001',
-        type: 'checkout.session.completed',
-        data: {
-          object: {
-            id: 'cs_test_review_flow_001',
-            object: 'checkout.session',
-            payment_intent: 'pi_review_flow_001',
-            amount_total: 12900,
-            currency: 'usd',
-            payment_status: 'paid',
-            customer: 'cus_review_flow_001',
-            customer_email: 'customer@example.com',
-            customer_details: {
-              name: 'Alex Customer',
-              email: 'customer@example.com',
-              phone: '+15555550100',
-            },
-            created: 1793232000,
-          },
-        },
-      },
-      null,
-      2,
-    ),
-    successTip:
-      'Review Flow needs a successful Stripe event type and a customer email to create the customer, transaction, and review request.',
-  },
-  paypal: {
-    summary:
-      'If PayPal webhook setup is unavailable, your server or automation tool can send a PayPal-style completed capture/sale event after the payment settles.',
-    samplePayload: JSON.stringify(
-      {
-        id: 'WH-API-BACKUP-PAYPAL-001',
-        event_type: 'PAYMENT.CAPTURE.COMPLETED',
-        create_time: '2026-06-29T12:00:00Z',
-        resource: {
-          id: 'PAYPAL-CAPTURE-001',
-          amount: {
-            value: '129.00',
-            currency_code: 'USD',
-          },
-          payer: {
-            payer_id: 'PAYER123',
-            email_address: 'customer@example.com',
-            name: {
-              given_name: 'Alex',
-              surname: 'Customer',
-            },
-          },
-          description: 'Paid invoice #1001',
-          create_time: '2026-06-29T12:00:00Z',
-        },
-      },
-      null,
-      2,
-    ),
-    successTip:
-      'Review Flow queues the request when the PayPal event is completed and the payload includes the payer email.',
-  },
-  square: {
-    summary:
-      'If Square webhook subscriptions are not practical, send a Square-style payment.created or payment.updated event once the payment status is COMPLETED.',
-    samplePayload: JSON.stringify(
-      {
-        event_id: 'square-api-backup-001',
-        type: 'payment.updated',
-        created_at: '2026-06-29T12:00:00Z',
-        data: {
-          object: {
-            payment: {
-              id: 'SQ-PAYMENT-001',
-              status: 'COMPLETED',
-              total_money: {
-                amount: 12900,
-                currency: 'USD',
-              },
-              buyer_email_address: 'customer@example.com',
-              customer_id: 'SQ-CUSTOMER-001',
-              customer: {
-                given_name: 'Alex',
-                family_name: 'Customer',
-                email_address: 'customer@example.com',
-                phone_number: '+15555550100',
-              },
-              note: 'Square payment #1001',
-              created_at: '2026-06-29T12:00:00Z',
-            },
-          },
-        },
-      },
-      null,
-      2,
-    ),
-    successTip:
-      'Review Flow checks for a Square payment event, COMPLETED status, and a buyer email before queuing a review.',
-  },
-  shopify: {
-    summary:
-      'If Shopify webhooks cannot be configured, send a Shopify-style paid order payload after your store confirms the order is paid.',
-    samplePayload: JSON.stringify(
-      {
-        topic: 'orders/paid',
-        id: 1001001,
-        name: '#1001',
-        order_number: 1001,
-        financial_status: 'paid',
-        email: 'customer@example.com',
-        contact_email: 'customer@example.com',
-        total_price: '129.00',
-        currency: 'USD',
-        processed_at: '2026-06-29T12:00:00Z',
-        customer: {
-          id: 501,
-          first_name: 'Alex',
-          last_name: 'Customer',
-          email: 'customer@example.com',
-        },
-        line_items: [
-          {
-            product_id: 9001,
-            variant_id: 8001,
-            name: 'Premium Product',
-            sku: 'PREMIUM-001',
-            quantity: 1,
-          },
-        ],
-      },
-      null,
-      2,
-    ),
-    successTip:
-      'Review Flow creates a hosted product-review page when the Shopify event is orders/paid or financial_status is paid and an email is present.',
-  },
-  woocommerce: {
-    summary:
-      'If WooCommerce webhook delivery is unreliable, send a WooCommerce-style order payload after the order status becomes processing or completed.',
-    samplePayload: JSON.stringify(
-      {
-        topic: 'order.updated',
-        id: 1001,
-        number: '1001',
-        order_key: 'wc_order_review_flow_001',
-        status: 'processing',
-        total: '129.00',
-        currency: 'USD',
-        date_created: '2026-06-29T12:00:00Z',
-        billing: {
-          first_name: 'Alex',
-          last_name: 'Customer',
-          email: 'customer@example.com',
-          phone: '+15555550100',
-        },
-      },
-      null,
-      2,
-    ),
-    successTip:
-      'Review Flow queues a review for WooCommerce orders with processing/completed status and a billing email.',
-  },
-};
-
-const providerGradient: Record<string, string> = {
-  stripe: 'from-indigo-600 to-violet-600',
-  square: 'from-emerald-600 to-teal-600',
-  paypal: 'from-sky-600 to-blue-700',
-  shopify: 'from-lime-600 to-emerald-700',
-  woocommerce: 'from-purple-700 to-fuchsia-700',
-};
-
-function getProviderCardTitle(provider: ProviderConnector) {
-  if (provider.key === 'shopify' || provider.hosted_review_provider) {
-    return 'Order trigger + hosted review form';
+  if (businessType === 'online') {
+    if (preferred && onlineReviewDestinations.has(preferred)) return preferred;
+    return provider?.key === 'shopify' ? 'shopify_hosted' : 'trustpilot';
   }
 
-  return 'Webhook receiver';
+  return preferred || fallback;
 }
 
-function formatDate(value?: string | null) {
-  if (!value) return 'Not scheduled';
-
+function formatCompletedAt(date: Date) {
   return new Intl.DateTimeFormat('en', {
     month: 'short',
     day: 'numeric',
     year: 'numeric',
     hour: 'numeric',
     minute: '2-digit',
-  }).format(new Date(value));
+  }).format(date);
 }
 
-function hasAuthToken() {
-  return (
-    typeof window !== 'undefined' && Boolean(localStorage.getItem('token'))
-  );
+function getErrorMessage(error: unknown, fallback: string) {
+  if (axios.isAxiosError(error)) {
+    const data = error.response?.data;
+
+    if (typeof data === 'string') return data;
+    if (typeof data?.message === 'string') return data.message;
+    if (typeof data?.error === 'string') return data.error;
+  }
+
+  if (error instanceof Error) return error.message;
+
+  return fallback;
 }
 
-function isUnauthorizedError(error: unknown) {
-  return axios.isAxiosError(error) && error.response?.status === 401;
+function findProviderConnector(business: ConnectorBusiness | null, providerKey: string) {
+  return business?.providers?.find((provider) => provider.key === providerKey) || null;
+}
+
+function getWebhookAxiosPath(webhookUrl: string) {
+  try {
+    const parsed = new URL(webhookUrl);
+    const apiIndex = parsed.pathname.indexOf('/api/');
+
+    if (apiIndex >= 0) {
+      return parsed.pathname.slice(apiIndex + 4);
+    }
+
+    return parsed.pathname;
+  } catch {
+    const apiIndex = webhookUrl.indexOf('/api/');
+
+    if (apiIndex >= 0) {
+      return webhookUrl.slice(apiIndex + 4);
+    }
+
+    return webhookUrl;
+  }
+}
+
+function createTestPayload(providerKey: PaymentProviderKey): TestPayload {
+  const now = new Date();
+  const isoNow = now.toISOString();
+  const timestamp = now.getTime();
+  const customer = 'Taylor Test';
+  const email = 'taylor.test@example.com';
+  const amount = '$149.00';
+
+  if (providerKey === 'stripe') {
+    const reference = `cs_test_reviewflow_${timestamp}`;
+
+    return {
+      payload: {
+        id: `evt_reviewflow_test_${timestamp}`,
+        type: 'checkout.session.completed',
+        created: Math.floor(timestamp / 1000),
+        data: {
+          object: {
+            id: reference,
+            object: 'checkout.session',
+            amount_total: 14900,
+            currency: 'usd',
+            customer_email: email,
+            customer_details: { email, name: customer, phone: '+15555550100' },
+            payment_intent: `pi_reviewflow_test_${timestamp}`,
+            description: 'ReviewFlow guided test transaction',
+            created: Math.floor(timestamp / 1000),
+          },
+        },
+      },
+      transaction: {
+        providerReference: reference,
+        customer,
+        email,
+        amount,
+        eventType: 'checkout.session.completed',
+        receivedAt: formatCompletedAt(now),
+      },
+    };
+  }
+
+  if (providerKey === 'square') {
+    const reference = `sq_pay_reviewflow_${timestamp}`;
+
+    return {
+      payload: {
+        event_id: `sq_evt_reviewflow_${timestamp}`,
+        type: 'payment.created',
+        created_at: isoNow,
+        data: {
+          object: {
+            payment: {
+              id: reference,
+              status: 'COMPLETED',
+              total_money: { amount: 14900, currency: 'USD' },
+              buyer_email_address: email,
+              customer: { given_name: 'Taylor', family_name: 'Test', email_address: email, phone_number: '+15555550100' },
+              customer_id: `SQ-CUST-${timestamp}`,
+              note: 'ReviewFlow guided test transaction',
+              created_at: isoNow,
+              updated_at: isoNow,
+            },
+          },
+        },
+      },
+      transaction: {
+        providerReference: reference,
+        customer,
+        email,
+        amount,
+        eventType: 'payment.created',
+        receivedAt: formatCompletedAt(now),
+      },
+    };
+  }
+
+  if (providerKey === 'paypal') {
+    const reference = `CAPTURE-REVIEWFLOW-${timestamp}`;
+
+    return {
+      payload: {
+        id: `WH-REVIEWFLOW-${timestamp}`,
+        event_type: 'PAYMENT.CAPTURE.COMPLETED',
+        create_time: isoNow,
+        resource: {
+          id: reference,
+          amount: { value: '149.00', currency_code: 'USD' },
+          payer: {
+            email_address: email,
+            payer_id: `PAYER-${timestamp}`,
+            name: { given_name: 'Taylor', surname: 'Test' },
+            phone: { phone_number: { national_number: '5555550100' } },
+          },
+          description: 'ReviewFlow guided test transaction',
+          create_time: isoNow,
+          update_time: isoNow,
+        },
+      },
+      transaction: {
+        providerReference: reference,
+        customer,
+        email,
+        amount,
+        eventType: 'PAYMENT.CAPTURE.COMPLETED',
+        receivedAt: formatCompletedAt(now),
+      },
+    };
+  }
+
+  if (providerKey === 'shopify') {
+    const numericId = Number(String(timestamp).slice(-10));
+    const reference = `gid://shopify/Order/${numericId}`;
+
+    return {
+      payload: {
+        id: numericId,
+        admin_graphql_api_id: reference,
+        topic: 'orders/paid',
+        financial_status: 'paid',
+        name: `#RF-${String(timestamp).slice(-5)}`,
+        order_number: numericId,
+        total_price: '149.00',
+        current_total_price: '149.00',
+        currency: 'USD',
+        email,
+        contact_email: email,
+        customer: { id: numericId, first_name: 'Taylor', last_name: 'Test', email, phone: '+15555550100' },
+        billing_address: { first_name: 'Taylor', last_name: 'Test', email, phone: '+15555550100' },
+        line_items: [{ name: 'ReviewFlow guided test order', product_id: numericId, quantity: 1, sku: 'RF-TEST' }],
+        created_at: isoNow,
+        processed_at: isoNow,
+        updated_at: isoNow,
+        webhook_id: `shopify-reviewflow-${timestamp}`,
+      },
+      headers: { 'x-shopify-topic': 'orders/paid', 'x-shopify-webhook-id': `shopify-reviewflow-${timestamp}` },
+      transaction: {
+        providerReference: reference,
+        customer,
+        email,
+        amount,
+        eventType: 'orders/paid',
+        receivedAt: formatCompletedAt(now),
+      },
+    };
+  }
+
+  const reference = `wc_order_reviewflow_${timestamp}`;
+
+  return {
+    payload: {
+      id: timestamp,
+      order_key: reference,
+      number: `RF-${String(timestamp).slice(-5)}`,
+      topic: 'order.updated',
+      status: 'completed',
+      total: '149.00',
+      currency: 'USD',
+      transaction_id: `wc_txn_${timestamp}`,
+      billing: { first_name: 'Taylor', last_name: 'Test', email, phone: '+15555550100' },
+      customer_id: timestamp,
+      date_created: isoNow,
+      date_created_gmt: isoNow,
+      date_paid: isoNow,
+      date_paid_gmt: isoNow,
+      webhook_id: `wc-reviewflow-${timestamp}`,
+    },
+    headers: { 'x-wc-webhook-topic': 'order.updated', 'x-wc-webhook-delivery-id': `wc-reviewflow-${timestamp}` },
+    transaction: {
+      providerReference: reference,
+      customer,
+      email,
+      amount,
+      eventType: 'order.updated',
+      receivedAt: formatCompletedAt(now),
+    },
+  };
 }
 
 export default function PaymentProviderConnectors({
   className = '',
-  eyebrow = 'Order triggers and review destinations',
-  title = 'Connect payment/ecommerce triggers without mixing local review channels',
-  description = 'Payment and ecommerce providers trigger review requests. Review destinations decide where customers leave feedback: local profiles, ecommerce review links, or the hosted Shopify product-review form.',
+  eyebrow = 'Step 2',
+  title = 'Payment system connect',
+  description = 'Choose the payment/order provider that should trigger review requests automatically after completed jobs, payments, or orders.',
+  initialBusinessId = '',
+  initialBusinessName = '',
   initialBusinessType = 'hybrid',
+  initialReviewDestination = '',
+  initialReviewLink = '',
+  initialDelayDays = '7',
   onConnected,
 }: PaymentProviderConnectorsProps) {
-  const [connectorForm, setConnectorForm] =
-    useState<ConnectorFormValues>(connectorDefaults);
-  const [connectors, setConnectors] = useState<ConnectorBusiness[]>([]);
-  const [isConnectorLoading, setIsConnectorLoading] = useState(true);
-  const [isConnectorSubmitting, setIsConnectorSubmitting] = useState(false);
-  const [connectorMessage, setConnectorMessage] = useState('');
+  const [selectedProviderKey, setSelectedProviderKey] = useState<PaymentProviderKey | ''>('');
+  const [businesses, setBusinesses] = useState<ConnectorBusiness[]>([]);
+  const [businessId, setBusinessId] = useState(initialBusinessId);
+  const [businessName, setBusinessName] = useState(initialBusinessName);
+  const [businessType, setBusinessType] = useState<BusinessType>(normalizeBusinessType(initialBusinessType));
+  const [reviewDestination, setReviewDestination] = useState(initialReviewDestination || 'google');
+  const [reviewLink, setReviewLink] = useState(initialReviewLink);
+  const [delayDays, setDelayDays] = useState(String(initialDelayDays || '7'));
+  const [accountReference, setAccountReference] = useState('');
+  const [connectedBusiness, setConnectedBusiness] = useState<ConnectorBusiness | null>(null);
+  const [reviewFlowWebhookUrl, setReviewFlowWebhookUrl] = useState('');
+  const [confirmedWebhookUrl, setConfirmedWebhookUrl] = useState('');
+  const [testTransactions, setTestTransactions] = useState<TestTransaction[]>([]);
+  const [testStatus, setTestStatus] = useState<'idle' | 'running' | 'complete' | 'error'>('idle');
+  const [completedConnection, setCompletedConnection] = useState<CompletedConnection | null>(null);
+  const [isLoadingConnectors, setIsLoadingConnectors] = useState(false);
+  const [isGeneratingWebhook, setIsGeneratingWebhook] = useState(false);
+  const [isTestingWebhook, setIsTestingWebhook] = useState(false);
+  const [copied, setCopied] = useState(false);
   const [error, setError] = useState('');
-  const [copiedUrl, setCopiedUrl] = useState('');
-  const [isClientReady, setIsClientReady] = useState(false);
-  const [subscriptionStatus, setSubscriptionStatus] =
-    useState<ConnectorSubscriptionStatus | null>(null);
-  const [isApiBackupVisible, setIsApiBackupVisible] = useState(false);
-  const [isCheckingWebhook, setIsCheckingWebhook] = useState(false);
-  const [paymentSetupFinished, setPaymentSetupFinished] = useState(false);
-  const [verifiedPaymentSetup, setVerifiedPaymentSetup] =
-    useState<VerifiedPaymentSetup | null>(null);
+  const [isStartingOauth, setIsStartingOauth] = useState(false);
+  const [oauthStatusMessage, setOauthStatusMessage] = useState('');
 
-  const currentBusinessType = normalizeBusinessType(connectorForm.businessType);
-  const filteredProviderOptions = getProvidersForBusinessType(currentBusinessType);
-  const filteredReviewDestinationOptions = getReviewDestinationsForBusinessType(currentBusinessType);
-  const selectedProvider =
-    filteredProviderOptions.find(
-      (provider) => provider.key === connectorForm.provider,
-    ) || filteredProviderOptions[0];
-  const selectedSetup =
-    providerSetupDetails[selectedProvider.key] || providerSetupDetails.stripe;
-  const selectedApiBackup =
-    providerApiBackups[selectedProvider.key] || providerApiBackups.stripe;
-  const selectedProviderGradient =
-    providerGradient[selectedProvider.key] || providerGradient.stripe;
-  const effectiveReviewDestination =
-    selectedProvider.defaultReviewDestination === 'shopify_hosted'
-      ? 'shopify_hosted'
-      : connectorForm.reviewDestination;
-  const selectedReviewDestination =
-    filteredReviewDestinationOptions.find(
-      (destination) => destination.key === effectiveReviewDestination,
-    ) || filteredReviewDestinationOptions[0];
-  const isHostedReviewDestination =
-    selectedReviewDestination.mode === 'hosted_form';
-
-  const connectorPreviewDate = useMemo(() => {
-    if (!isClientReady) return 'after the selected delay';
-
-    const days = Math.max(0, Number(connectorForm.delayDays) || 0);
-    return formatDate(
-      new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString(),
-    );
-  }, [connectorForm.delayDays, isClientReady]);
-
-  const providerSummary = useMemo(() => {
-    const providers = connectors.flatMap(
-      (business) => business.providers || [],
-    );
-    const connectedCount = providers.filter(
-      (provider) => provider.connected,
-    ).length;
-
-    return {
-      connectedCount,
-      totalCount: providers.length || filteredProviderOptions.length,
-    };
-  }, [connectors, filteredProviderOptions.length]);
-
-  const selectedWebhookTargets = useMemo(
-    () =>
-      connectors.flatMap((business) =>
-        (business.providers || [])
-          .filter(
-            (provider) =>
-              provider.key === selectedProvider.key &&
-              Boolean(provider.webhook_url),
-          )
-          .map((provider) => ({
-            businessId: business.id,
-            businessName: business.name || 'Connected business',
-            url: provider.webhook_url || '',
-          })),
-      ),
-    [connectors, selectedProvider.key],
+  const selectedProvider = useMemo(
+    () => paymentProviders.find((provider) => provider.key === selectedProviderKey),
+    [selectedProviderKey],
   );
 
-  const updateConnectorForm = (
-    key: keyof ConnectorFormValues,
-    value: string,
-  ) => {
-    if (key === 'businessType') {
-      setIsApiBackupVisible(false);
-      setPaymentSetupFinished(false);
-    }
+  const selectedBusiness = useMemo(() => {
+    if (connectedBusiness) return connectedBusiness;
 
-    setConnectorForm((current) => {
-      if (key === 'businessType') {
-        const businessType = normalizeBusinessType(value);
-        const providers = getProvidersForBusinessType(businessType);
-        const provider = providers.find(
-          (providerOption) => providerOption.key === current.provider,
-        ) || providers[0];
+    return businesses.find((business) => business.id === businessId) || businesses[0] || null;
+  }, [businessId, businesses, connectedBusiness]);
 
-        return {
-          ...current,
-          businessType,
-          provider: provider.key,
-          reviewDestination: getAllowedReviewDestination(
-            businessType,
-            provider.defaultReviewDestination === 'shopify_hosted'
-              ? 'shopify_hosted'
-              : current.reviewDestination,
-          ),
-        };
-      }
+  const providerConnector = useMemo(
+    () => findProviderConnector(selectedBusiness, selectedProviderKey),
+    [selectedBusiness, selectedProviderKey],
+  );
 
-      return { ...current, [key]: value };
-    });
-  };
-
-  const updateSelectedProvider = (providerKey: string) => {
-    setIsApiBackupVisible(false);
-    setPaymentSetupFinished(false);
-
-    const provider =
-      filteredProviderOptions.find(
-        (providerOption) => providerOption.key === providerKey,
-      ) || filteredProviderOptions[0];
-
-    setConnectorForm((current) => ({
-      ...current,
-      provider: provider.key,
-      reviewDestination: getAllowedReviewDestination(
-        currentBusinessType,
-        provider.defaultReviewDestination === 'shopify_hosted'
-          ? 'shopify_hosted'
-          : current.reviewDestination,
-      ),
-    }));
-  };
-
-  const loadConnectors = async () => {
-    setIsConnectorLoading(true);
-    try {
-      const response = await axios.get('/reviewflow/connectors');
-      setConnectors(response.data.businesses || []);
-      setError('');
-    } catch (requestError) {
-      if (!isUnauthorizedError(requestError)) {
-        console.error(
-          'Failed to load payment webhook connectors:',
-          requestError,
-        );
-        setError(
-          'Could not load your payment connectors. Please refresh or try again.',
-        );
-      }
-    } finally {
-      setIsConnectorLoading(false);
-    }
-  };
-
-  const loadSubscriptionStatus = async () => {
-    try {
-      const response = await axios.get('/subscription/me');
-      setSubscriptionStatus(response.data);
-    } catch (requestError) {
-      if (!isUnauthorizedError(requestError)) {
-        console.error('Failed to load connector subscription status:', requestError);
-      }
-    }
-  };
+  const isWebhookConfirmed = Boolean(
+    reviewFlowWebhookUrl && confirmedWebhookUrl.trim() === reviewFlowWebhookUrl.trim(),
+  );
+  const canRunTest = Boolean(selectedProvider && reviewFlowWebhookUrl && isWebhookConfirmed && !isTestingWebhook);
+  const canFinish = testStatus === 'complete' && testTransactions.length > 0;
 
   useEffect(() => {
-    setIsClientReady(true);
-
-    if (!hasAuthToken()) {
-      setIsConnectorLoading(false);
-      return;
-    }
-
-    loadConnectors();
-    loadSubscriptionStatus();
-  }, []);
-
-  useEffect(() => {
-    updateConnectorForm('businessType', normalizeBusinessType(initialBusinessType));
+    setBusinessType(normalizeBusinessType(initialBusinessType));
   }, [initialBusinessType]);
 
-  const handleConnectorSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsConnectorSubmitting(true);
-    setConnectorMessage('');
-    setError('');
+  useEffect(() => {
+    if (initialBusinessId) setBusinessId(initialBusinessId);
+  }, [initialBusinessId]);
 
-    try {
-      const submittedConnectorForm = {
-        ...connectorForm,
-        reviewDestination: effectiveReviewDestination,
-        reviewLink: isHostedReviewDestination ? '' : connectorForm.reviewLink,
-      };
-      const response = await axios.post('/reviewflow/connectors', {
-        ...submittedConnectorForm,
-        delayDays: Number(connectorForm.delayDays),
-      });
-      const business = response.data.business as ConnectorBusiness;
-      setConnectorMessage(
-        `${selectedProvider.label} is connected for ${business.name}. ${selectedReviewDestination.label} is the review destination. Copy the secure webhook URL below into your ${selectedProvider.label} dashboard.`,
-      );
-      setIsApiBackupVisible(false);
-      setPaymentSetupFinished(false);
-      setVerifiedPaymentSetup(null);
+  useEffect(() => {
+    if (initialBusinessName) setBusinessName(initialBusinessName);
+  }, [initialBusinessName]);
 
-      await Promise.all([loadConnectors(), loadSubscriptionStatus()]);
+  useEffect(() => {
+    if (initialReviewLink) setReviewLink(initialReviewLink);
+  }, [initialReviewLink]);
 
-      if (onConnected) {
-        try {
-          await onConnected(business, submittedConnectorForm);
-        } catch (refreshError) {
-          console.error(
-            'Payment connector post-connect refresh failed:',
-            refreshError,
-          );
-          setError(
-            'The connection was created, but the dashboard refresh failed. Please refresh the page to see the latest data.',
-          );
+  useEffect(() => {
+    if (initialDelayDays !== undefined && initialDelayDays !== null) {
+      setDelayDays(String(initialDelayDays));
+    }
+  }, [initialDelayDays]);
+
+  useEffect(() => {
+    setReviewDestination(getSafeReviewDestination(selectedProvider, businessType, initialReviewDestination || reviewDestination));
+  }, [businessType, initialReviewDestination, selectedProvider, reviewDestination]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadConnectorBusinesses = async () => {
+      setIsLoadingConnectors(true);
+
+      try {
+        const response = await axios.get('/reviewflow/connectors');
+        const loadedBusinesses: ConnectorBusiness[] = Array.isArray(response.data?.businesses)
+          ? response.data.businesses
+          : [];
+
+        if (!isMounted) return;
+
+        setBusinesses(loadedBusinesses);
+
+        const preferredBusiness = loadedBusinesses.find((business) => business.id === initialBusinessId) || loadedBusinesses[0];
+
+        if (preferredBusiness) {
+          setBusinessId((current) => current || preferredBusiness.id);
+          setBusinessName((current) => current || preferredBusiness.name || '');
+          setBusinessType((current) => normalizeBusinessType(current || preferredBusiness.business_type));
+          setDelayDays((current) => current || String(preferredBusiness.delay_days ?? 7));
         }
+      } catch (requestError) {
+        console.error('Failed to load ReviewFlow connector businesses:', requestError);
+        if (isMounted) {
+          setError(getErrorMessage(requestError, 'Could not load existing payment connector details.'));
+        }
+      } finally {
+        if (isMounted) setIsLoadingConnectors(false);
       }
-    } catch (requestError) {
-      console.error(
-        'Failed to connect payment webhook provider:',
-        requestError,
-      );
-      if (axios.isAxiosError(requestError) && requestError.response?.data) {
-        setError(String(requestError.response.data));
-      } else {
-        setError(
-          'Could not connect this payment provider. Please check the fields and try again.',
-        );
-      }
-    } finally {
-      setIsConnectorSubmitting(false);
-    }
-  };
+    };
 
-  const rotateWebhookToken = async (businessId: string, provider: string) => {
-    setConnectorMessage('');
+    loadConnectorBusinesses();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [initialBusinessId]);
+
+  useEffect(() => {
+    if (!selectedProvider) return;
+
+    setReviewFlowWebhookUrl(providerConnector?.webhook_url || '');
+    setConnectedBusiness(providerConnector?.webhook_url ? selectedBusiness : null);
+    setConfirmedWebhookUrl('');
+    setTestTransactions([]);
+    setTestStatus('idle');
+    setCompletedConnection(null);
+    setCopied(false);
     setError('');
+    setIsStartingOauth(false);
+    setOauthStatusMessage('');
+    setReviewDestination((current) => getSafeReviewDestination(selectedProvider, businessType, current || initialReviewDestination));
+    setAccountReference(providerConnector?.account_reference || '');
+  }, [businessType, initialReviewDestination, providerConnector, selectedBusiness, selectedProvider]);
 
-    try {
-      await axios.post(
-        `/reviewflow/connectors/${businessId}/${provider}/rotate`,
-      );
-      setConnectorMessage(
-        `${provider.toUpperCase()} webhook token rotated. Update the webhook URL inside ${provider.toUpperCase()} before sending more live payments.`,
-      );
-      await loadConnectors();
-    } catch (requestError) {
-      console.error('Failed to rotate payment webhook token:', requestError);
-      setError('Could not rotate the webhook token. Please try again.');
-    }
+  const handleProviderChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextProviderKey = event.target.value as PaymentProviderKey | '';
+    setSelectedProviderKey(nextProviderKey);
   };
 
-  const copyWebhookUrl = async (url?: string) => {
-    if (!url) return;
+  const createWebhookUrl = async () => {
+    if (!selectedProvider) return;
 
-    try {
-      await navigator.clipboard.writeText(url);
-      setCopiedUrl(url);
-      setConnectorMessage(
-        'Webhook URL copied. Paste it into the matching payment provider dashboard.',
-      );
-      window.setTimeout(() => setCopiedUrl(''), 2500);
-    } catch (requestError) {
-      console.error('Failed to copy webhook URL:', requestError);
-      setError(
-        'Could not copy the webhook URL. You can still select and copy it manually.',
-      );
-    }
-  };
+    const safeBusinessName = businessName.trim();
 
-  const finishPaymentSetup = (
-    method: PaymentSetupMethod = 'Webhook',
-    statusNote = 'Manual verification saved after a successful provider test.',
-    eventType?: string,
-  ) => {
-    const target = selectedWebhookTargets[0];
-
-    if (!target) {
-      setError(
-        `Connect ${selectedProvider.label} first so Review Flow can generate the secure webhook URL before verification.`,
-      );
+    if (!safeBusinessName) {
+      setError('Add your business name first, then create the webhook URL.');
       return;
     }
 
-    setVerifiedPaymentSetup({
-      provider: selectedProvider.key,
-      providerLabel: selectedProvider.label,
-      businessName: target.businessName || connectorForm.businessName || 'Connected business',
-      method,
-      reviewDestinationLabel: selectedReviewDestination.label,
-      verifiedAt: new Date().toISOString(),
-      statusNote,
-      eventType,
-    });
-    setPaymentSetupFinished(true);
+    setIsGeneratingWebhook(true);
     setError('');
-    setConnectorMessage(
-      `${selectedProvider.label} ${method.toLowerCase()} setup marked verified. You can edit this setup any time.`,
+    setOauthStatusMessage('');
+
+    try {
+      const response = await axios.post('/reviewflow/connectors', {
+        businessId: businessId || undefined,
+        provider: selectedProvider.key,
+        businessName: safeBusinessName,
+        businessType,
+        reviewDestination: getSafeReviewDestination(selectedProvider, businessType, reviewDestination),
+        reviewLink: reviewLink.trim(),
+        delayDays,
+        accountReference: accountReference.trim(),
+      });
+      const business = response.data?.business as ConnectorBusiness;
+      const connector = findProviderConnector(business, selectedProvider.key);
+
+      if (!business || !connector?.webhook_url) {
+        throw new Error('The backend did not return a webhook URL for this provider.');
+      }
+
+      setConnectedBusiness(business);
+      setBusinessId(business.id);
+      setBusinessName(business.name || safeBusinessName);
+      setReviewFlowWebhookUrl(connector.webhook_url);
+      setConfirmedWebhookUrl('');
+      setTestTransactions([]);
+      setTestStatus('idle');
+      setCopied(false);
+    } catch (requestError) {
+      console.error('Failed to create ReviewFlow webhook URL:', requestError);
+      setError(getErrorMessage(requestError, 'Could not create the webhook URL.'));
+      throw requestError;
+    } finally {
+      setIsGeneratingWebhook(false);
+    }
+  };
+
+  const copyWebhookUrl = async () => {
+    if (!reviewFlowWebhookUrl) return;
+
+    try {
+      await copyTextToClipboard(reviewFlowWebhookUrl);
+      setCopied(true);
+      setError('');
+    } catch (copyError) {
+      console.error('Failed to copy webhook URL:', copyError);
+      setCopied(false);
+      setError('Could not copy the webhook URL. Select the URL text and copy it manually.');
+    }
+  };
+
+  const runTestTransaction = async () => {
+    if (!selectedProvider || !reviewFlowWebhookUrl) return;
+
+    if (!isWebhookConfirmed) {
+      setError('Paste the exact ReviewFlow webhook URL into the confirmation box before running the test.');
+      return;
+    }
+
+    setIsTestingWebhook(true);
+    setTestStatus('running');
+    setError('');
+    setOauthStatusMessage('');
+
+    const testPayload = createTestPayload(selectedProvider.key);
+    const webhookPath = getWebhookAxiosPath(reviewFlowWebhookUrl);
+
+    try {
+      const response = await axios.post(webhookPath, testPayload.payload, {
+        headers: testPayload.headers,
+      });
+      const savedTransactionId = response.data?.transactionId || testPayload.transaction.providerReference;
+      const message = response.data?.message || selectedProvider.testWindow.success;
+
+      setTestTransactions([
+        {
+          id: savedTransactionId,
+          message,
+          ...testPayload.transaction,
+        },
+      ]);
+      setTestStatus('complete');
+    } catch (requestError) {
+      console.error('Failed to run ReviewFlow test transaction:', {
+        provider: selectedProvider.key,
+        webhookPath,
+        error: requestError,
+      });
+      setTestStatus('error');
+      setError(getErrorMessage(requestError, 'The test transaction did not reach ReviewFlow. Check the webhook URL and try again.'));
+      throw requestError;
+    } finally {
+      setIsTestingWebhook(false);
+    }
+  };
+
+
+  const startOauthBackup = async (reason: OauthBackupReason) => {
+    if (!selectedProvider) return;
+
+    setIsStartingOauth(true);
+    setError('');
+    setOauthStatusMessage('');
+
+    try {
+      const response = await axios.post(`/reviewflow/oauth/${selectedProvider.key}/start`, {
+        businessId: connectedBusiness?.id || businessId || undefined,
+        accountReference: accountReference.trim(),
+        reason,
+        primaryConnection: 'webhook',
+      });
+      const authorizationUrl = response.data?.authorizationUrl;
+
+      if (!authorizationUrl) {
+        throw new Error('The backend did not return a payment provider login URL.');
+      }
+
+      setOauthStatusMessage(response.data?.message || `Opening ${selectedProvider.label} provider login…`);
+      window.location.assign(authorizationUrl);
+    } catch (requestError) {
+      console.error('Failed to start ReviewFlow OAuth backup:', {
+        provider: selectedProvider.key,
+        reason,
+        error: requestError,
+      });
+      const message = getErrorMessage(
+        requestError,
+        'Could not start provider OAuth backup. Webhook remains the primary connection.',
+      );
+      setOauthStatusMessage(message);
+      setError(message);
+      throw requestError;
+    } finally {
+      setIsStartingOauth(false);
+    }
+  };
+
+  const finishSetup = async () => {
+    if (!selectedProvider || !connectedBusiness || !canFinish) return;
+
+    const completedAt = new Date();
+    const connectorForm: ConnectorFormValues = {
+      provider: selectedProvider.key,
+      businessType,
+      businessName: businessName.trim(),
+      reviewDestination: getSafeReviewDestination(selectedProvider, businessType, reviewDestination),
+      reviewLink: reviewLink.trim(),
+      delayDays,
+      accountReference: accountReference.trim(),
+    };
+
+    try {
+      if (onConnected) {
+        await onConnected(connectedBusiness, connectorForm);
+      }
+
+      setCompletedConnection({
+        providerKey: selectedProvider.key,
+        providerLabel: selectedProvider.label,
+        status: 'Complete',
+        completedAt: formatCompletedAt(completedAt),
+        summary: selectedProvider.summary,
+        testResult: testTransactions[0]?.message || selectedProvider.testWindow.success,
+        webhookUrl: reviewFlowWebhookUrl,
+      });
+    } catch (requestError) {
+      console.error('Failed to finish payment provider setup:', requestError);
+      setError(getErrorMessage(requestError, 'The provider was tested, but the setup summary could not be refreshed.'));
+      throw requestError;
+    }
+  };
+
+
+  const renderOauthBackupCard = (reason: OauthBackupReason) => {
+    if (!selectedProvider) return null;
+
+    const isFailedTest = reason === 'failed_test';
+
+    return (
+      <div className='rounded-3xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-900/60 dark:bg-amber-950/30'>
+        <div className='mb-4 flex flex-wrap items-start justify-between gap-4'>
+          <div className='flex items-start gap-3'>
+            <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-amber-500 text-sm font-black text-white'>B</span>
+            <div>
+              <p className='text-sm font-black uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300'>Backup option</p>
+              <h4 className='text-lg font-black text-slate-900 dark:text-white'>Connect via Your Payment Provider</h4>
+            </div>
+          </div>
+          <span className='rounded-full bg-white px-4 py-2 text-xs font-black text-amber-700 shadow-sm dark:bg-dark-800 dark:text-amber-200'>Webhook stays primary</span>
+        </div>
+        <p className='text-sm leading-6 text-slate-700 dark:text-slate-300'>
+          {isFailedTest
+            ? 'The webhook test failed, so OAuth is available as a backup path for account verification and recovery.'
+            : 'Webhook setup is complete. OAuth is optional backup only, useful for account verification, recovery, or future manual sync.'}
+          {' '}ReviewFlow will still rely on webhook events as the main payment trigger instead of constantly calling the provider API.
+        </p>
+        {(selectedProvider.key === 'shopify' || selectedProvider.key === 'woocommerce') ? (
+          <p className='mt-3 text-xs font-semibold text-amber-800 dark:text-amber-100'>
+            For {selectedProvider.label}, enter your store domain in the account/store label field before using OAuth backup.
+          </p>
+        ) : null}
+        <div className='mt-5 flex flex-wrap items-center gap-3'>
+          <BaseButton
+            label={isStartingOauth ? 'Opening provider login…' : 'Connect via Your Payment Provider'}
+            icon={mdiLinkVariant}
+            color='warning'
+            roundedFull
+            disabled={isStartingOauth}
+            onClick={() => startOauthBackup(reason)}
+          />
+          <span className='text-xs font-semibold text-slate-500 dark:text-slate-400'>
+            Backup only — not required for normal webhook automation.
+          </span>
+        </div>
+        {oauthStatusMessage ? (
+          <div className='mt-4 rounded-2xl bg-white p-4 text-sm font-semibold text-amber-900 shadow-sm dark:bg-dark-900 dark:text-amber-100'>
+            {oauthStatusMessage}
+          </div>
+        ) : null}
+      </div>
     );
   };
 
-  const checkWebhookStatus = async () => {
-    const target = selectedWebhookTargets[0];
-
-    if (!target) {
-      setError(
-        `Connect ${selectedProvider.label} first, then paste its webhook URL into ${selectedProvider.label} and send a test event.`,
-      );
-      return;
-    }
-
-    setIsCheckingWebhook(true);
-    setError('');
-    setConnectorMessage('');
-
-    try {
-      const response = await axios.get('/reviewflow/summary?limit=12');
-      const events: PaymentWebhookEvent[] = Array.isArray(response.data?.recentEvents)
-        ? response.data.recentEvents
-        : [];
-      const matchingEvent = events.find((event) => {
-        const providerMatches =
-          (event.provider || '').toLowerCase() === selectedProvider.key;
-        const businessMatches =
-          !event.business?.name || event.business.name === target.businessName;
-
-        return providerMatches && businessMatches;
-      });
-
-      await loadConnectors();
-
-      if (matchingEvent) {
-        finishPaymentSetup(
-          'Webhook',
-          matchingEvent.processing_error
-            ? `A ${selectedProvider.label} webhook event arrived, but Review Flow reported: ${matchingEvent.processing_error}`
-            : `A ${selectedProvider.label} webhook test event arrived in Review Flow.`,
-          matchingEvent.provider_event_type || matchingEvent.event_type,
-        );
-        return;
-      }
-
-      setConnectorMessage(
-        `No recent ${selectedProvider.label} webhook test event was found yet. Send a provider test event, then click Check webhook status again. If the provider dashboard already shows a successful delivery, you can use the manual verification button.`,
-      );
-    } catch (requestError) {
-      console.error('Failed to check payment webhook status:', requestError);
-      setError(
-        'Could not check webhook status right now. If your provider dashboard confirms a successful test delivery, you can still mark it verified manually.',
-      );
-    } finally {
-      setIsCheckingWebhook(false);
-    }
-  };
-
-  const connectorUsage = subscriptionStatus?.usage.paymentConnectors ?? 0;
-  const connectorLimit = subscriptionStatus?.limits.paymentConnectors ?? 0;
-  const businessUsage = subscriptionStatus?.usage.businesses ?? 0;
-  const businessLimit = subscriptionStatus?.limits.businesses ?? 0;
-  const isConnectorSubscriptionInactive = Boolean(
-    subscriptionStatus && !subscriptionStatus.subscription.isActive,
-  );
-  const isConnectorLimitReached = Boolean(
-    subscriptionStatus && connectorLimit > 0 && connectorUsage >= connectorLimit,
-  );
-  const isBusinessLimitReached = Boolean(
-    subscriptionStatus && businessLimit > 0 && businessUsage >= businessLimit,
-  );
-  const shouldShowConnectorLimitCta =
-    isConnectorSubscriptionInactive || isConnectorLimitReached || isBusinessLimitReached;
-  const connectorLimitButtonLabel =
-    subscriptionStatus?.subscription.planId === 'starter' ? 'Upgrade to Pro' : 'Manage plan';
-
   return (
-    <CardBox
-      className={`${className} border-0 shadow-xl ring-1 ring-slate-200/70 dark:ring-dark-700`}
-    >
-      <div className='mb-6 grid gap-4 lg:grid-cols-[0.85fr_1.15fr] lg:items-start'>
-        <div>
-          <p className='text-sm font-bold uppercase tracking-[0.25em] text-indigo-500'>
-            {eyebrow}
-          </p>
-          <h3 className='text-2xl font-black text-slate-900 dark:text-white'>
-            {title}
-          </h3>
-          <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400'>
-            {description}
-          </p>
-        </div>
-        <div className='rounded-2xl bg-slate-50 p-4 text-sm text-slate-600 ring-1 ring-slate-200 dark:bg-dark-800 dark:text-slate-300 dark:ring-dark-700'>
-          <div className='mb-2 flex items-center gap-2 font-black text-slate-900 dark:text-white'>
-            <BaseButton
-              icon={mdiAlertCircleOutline}
-              color='warning'
-              roundedFull
-              small
-            />
-            Secure connection note
-          </div>
-          Payment and ecommerce providers POST order/payment events to a public
-          webhook URL. Local review destinations do not use these webhooks; they
-          are the places customers visit after a request. Shopify is the
-          exception here: it triggers from orders and Review Flow hosts the
-          product-review form.
-        </div>
-      </div>
-
-      {connectorMessage && (
-        <div className='mb-6 rounded-2xl border border-indigo-200 bg-indigo-50 p-4 text-indigo-900'>
-          <strong>Connection update.</strong> {connectorMessage}
-        </div>
-      )}
-      {error && (
-        <div className='mb-6 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-rose-900'>
-          <p>{error}</p>
-          {error.includes('Upgrade to Pro') && (
-            <BaseButton
-              href='/subscription'
-              icon={mdiCreditCardOutline}
-              label='Manage subscription'
-              color='danger'
-              className='mt-3'
-            />
-          )}
-        </div>
-      )}
-
-      {shouldShowConnectorLimitCta && (
-        <div className='mb-6 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-rose-900 dark:border-rose-900 dark:bg-rose-950 dark:text-rose-50'>
-          <p className='text-sm font-black uppercase tracking-[0.25em]'>
-            {isConnectorSubscriptionInactive ? 'Subscription inactive' : 'Plan limit may block new connections'}
-          </p>
-          <p className='mt-2 text-sm leading-6'>
-            {isConnectorSubscriptionInactive
-              ? 'Provider connections are paused until this account has an active plan.'
-              : `${subscriptionStatus?.subscription.planName} currently uses ${connectorUsage.toLocaleString()} / ${connectorLimit.toLocaleString()} provider connectors and ${getBusinessProfileUsageLabel(businessUsage, businessLimit)}.`}
-            {' '}Updating an already connected provider may still work, but new providers or new business profiles can be blocked.
-          </p>
-          <BaseButton
-            href='/subscription'
-            icon={mdiCreditCardOutline}
-            label={connectorLimitButtonLabel}
-            color='danger'
-            className='mt-3'
-          />
-        </div>
-      )}
-
-      <div className='mb-6 grid gap-4 lg:grid-cols-2'>
-        {reviewDestinationGroups.map((group) => (
-          <div
-            key={group.title}
-            className='rounded-2xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'
-          >
-            <p className='text-xs font-bold uppercase tracking-[0.22em] text-slate-400'>
-              Review destination group
-            </p>
-            <h4 className='mt-1 text-lg font-black text-slate-900 dark:text-white'>
-              {group.title}
-            </h4>
-            <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400'>
-              {group.subtitle}
-            </p>
-            <div className='mt-3 flex flex-wrap gap-2'>
-              {group.keys.map((destinationKey) => {
-                const destination = reviewDestinationOptions.find(
-                  (option) => option.key === destinationKey,
-                );
-
-                if (!destination) return null;
-
-                return (
-                  <span
-                    key={destination.key}
-                    className='rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-700 dark:bg-dark-800 dark:text-slate-200'
-                  >
-                    {destination.label}
-                  </span>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {paymentSetupFinished && verifiedPaymentSetup ? (
-        <div className='mb-6 rounded-3xl border border-emerald-200 bg-emerald-50 p-5 text-emerald-950 shadow-sm dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-50'>
+    <CardBox className={`border-0 shadow-xl ring-1 ring-slate-200/70 dark:ring-dark-700 ${className}`}>
+      {completedConnection ? (
+        <div className='rounded-3xl border border-emerald-200 bg-emerald-50 p-5 dark:border-emerald-900/60 dark:bg-emerald-950/30'>
           <div className='flex flex-wrap items-start justify-between gap-4'>
             <div>
-              <p className='text-sm font-black uppercase tracking-[0.25em] text-emerald-700 dark:text-emerald-300'>
-                Payment setup finished
-              </p>
-              <h4 className='mt-1 text-2xl font-black'>
-                {verifiedPaymentSetup.providerLabel} is ready to trigger review requests
-              </h4>
-              <p className='mt-2 text-sm leading-6 opacity-80'>
-                Review Flow will use this payment setup for {verifiedPaymentSetup.businessName}.
+              <p className='text-sm font-bold uppercase tracking-[0.25em] text-emerald-600 dark:text-emerald-300'>
+                Connection status
               </p>
+              <h3 className='mt-1 text-2xl font-black text-emerald-950 dark:text-emerald-100'>
+                {completedConnection.status}
+              </h3>
             </div>
-            <BaseButton
-              type='button'
-              label='Edit setup'
-              color='whiteDark'
-              onClick={() => {
-                setPaymentSetupFinished(false);
-                setConnectorMessage('');
-              }}
-            />
+            <span className='inline-flex items-center rounded-full bg-emerald-600 px-4 py-2 text-sm font-black text-white'>
+              {completedConnection.providerLabel}
+            </span>
           </div>
 
-          <div className='mt-4 grid gap-3 md:grid-cols-4'>
-            <div className='rounded-2xl bg-white/70 p-4 ring-1 ring-emerald-200 dark:bg-dark-900/60 dark:ring-emerald-900'>
-              <p className='text-xs font-black uppercase tracking-widest opacity-60'>Provider</p>
-              <p className='mt-1 font-black'>{verifiedPaymentSetup.providerLabel}</p>
+          <div className='mt-5 grid gap-3 text-sm text-emerald-950 dark:text-emerald-100 md:grid-cols-2'>
+            <div className='rounded-2xl bg-white p-4 shadow-sm dark:bg-dark-800'>
+              <p className='font-black'>Summary</p>
+              <p className='mt-1 leading-6'>{completedConnection.summary}</p>
+              <p className='mt-3 break-all text-xs opacity-80'>Webhook: {completedConnection.webhookUrl}</p>
             </div>
-            <div className='rounded-2xl bg-white/70 p-4 ring-1 ring-emerald-200 dark:bg-dark-900/60 dark:ring-emerald-900'>
-              <p className='text-xs font-black uppercase tracking-widest opacity-60'>Method</p>
-              <p className='mt-1 font-black'>{verifiedPaymentSetup.method}</p>
-            </div>
-            <div className='rounded-2xl bg-white/70 p-4 ring-1 ring-emerald-200 dark:bg-dark-900/60 dark:ring-emerald-900'>
-              <p className='text-xs font-black uppercase tracking-widest opacity-60'>Review destination</p>
-              <p className='mt-1 font-black'>{verifiedPaymentSetup.reviewDestinationLabel}</p>
-            </div>
-            <div className='rounded-2xl bg-white/70 p-4 ring-1 ring-emerald-200 dark:bg-dark-900/60 dark:ring-emerald-900'>
-              <p className='text-xs font-black uppercase tracking-widest opacity-60'>Verified</p>
-              <p className='mt-1 font-black'>{formatDate(verifiedPaymentSetup.verifiedAt)}</p>
+            <div className='rounded-2xl bg-white p-4 shadow-sm dark:bg-dark-800'>
+              <p className='font-black'>Test result</p>
+              <p className='mt-1 leading-6'>{completedConnection.testResult}</p>
+              <p className='mt-3 text-xs font-bold uppercase tracking-[0.2em] text-emerald-600 dark:text-emerald-300'>
+                Finished {completedConnection.completedAt}
+              </p>
             </div>
           </div>
 
-          <div className='mt-4 rounded-2xl bg-white/70 p-4 text-sm leading-6 ring-1 ring-emerald-200 dark:bg-dark-900/60 dark:ring-emerald-900'>
-            <p><strong>Status:</strong> {verifiedPaymentSetup.statusNote}</p>
-            {verifiedPaymentSetup.eventType && (
-              <p className='mt-1'><strong>Last event:</strong> {verifiedPaymentSetup.eventType}</p>
-            )}
+          <div className='mt-5'>
+            {renderOauthBackupCard('completed_webhook')}
           </div>
         </div>
       ) : (
         <>
-      <div className='mb-6 rounded-2xl border border-indigo-100 bg-indigo-50/70 p-4 dark:border-indigo-900 dark:bg-indigo-950/20'>
-        <p className='text-sm font-bold uppercase tracking-[0.25em] text-indigo-500'>
-          Cleaner setup flow
-        </p>
-        <h4 className='mt-1 text-xl font-black text-slate-900 dark:text-white'>
-          Choose one provider, then follow one guide
-        </h4>
-        <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300'>
-          The provider dropdown below controls the instructions. Review Flow
-          shows the detailed webhook setup for only the selected payment or
-          ecommerce company. API backup instructions stay hidden unless you click
-          Use API instead.
-        </p>
-        <div className='mt-4 grid gap-3 md:grid-cols-3'>
-          <div className='rounded-xl bg-white p-3 text-sm ring-1 ring-indigo-100 dark:bg-dark-900 dark:ring-indigo-900'>
-            <p className='font-black text-slate-900 dark:text-white'>
-              1. Select provider
-            </p>
-            <p className='mt-1 text-slate-500 dark:text-slate-400'>
-              Pick the relevant provider from the filtered dropdown; Local, Online, and Hybrid setups show different choices.
-            </p>
-          </div>
-          <div className='rounded-xl bg-white p-3 text-sm ring-1 ring-indigo-100 dark:bg-dark-900 dark:ring-indigo-900'>
-            <p className='font-black text-slate-900 dark:text-white'>
-              2. Connect webhook
-            </p>
-            <p className='mt-1 text-slate-500 dark:text-slate-400'>
-              Connect first so Review Flow generates the secure URL for that
-              provider.
-            </p>
-          </div>
-          <div className='rounded-xl bg-white p-3 text-sm ring-1 ring-indigo-100 dark:bg-dark-900 dark:ring-indigo-900'>
-            <p className='font-black text-slate-900 dark:text-white'>
-              3. Test and finish
-            </p>
-            <p className='mt-1 text-slate-500 dark:text-slate-400'>
-              Send a provider test event, check status here, then finish to see
-              the summary box.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <form
-        onSubmit={handleConnectorSubmit}
-        className='mb-6 rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800'
-      >
-        <FormField
-          label='Business type, provider, and business'
-          help={businessTypeOptions.find((option) => option.key === currentBusinessType)?.help}
-        >
-          <select
-            value={connectorForm.businessType}
-            onChange={(event) => updateConnectorForm('businessType', event.target.value)}
-          >
-            {businessTypeOptions.map((option) => (
-              <option key={`${option.key}-business-type`} value={option.key}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <select
-            value={selectedProvider.key}
-            onChange={(event) => updateSelectedProvider(event.target.value)}
-          >
-            {filteredProviderOptions.map((provider) => (
-              <option key={`${provider.key}-option`} value={provider.key}>
-                {provider.label}
-              </option>
-            ))}
-          </select>
-          <input
-            required
-            value={connectorForm.businessName}
-            onChange={(event) =>
-              updateConnectorForm('businessName', event.target.value)
-            }
-            placeholder='Business name'
-          />
-          <input
-            value={connectorForm.accountReference}
-            onChange={(event) =>
-              updateConnectorForm('accountReference', event.target.value)
-            }
-            placeholder='Optional account / merchant ID'
-          />
-        </FormField>
-        <FormField
-          label='Review destination'
-          help={`${selectedProvider.label} events will queue ${selectedReviewDestination.label} requests for ${connectorPreviewDate}.`}
-        >
-          <select
-            value={effectiveReviewDestination}
-            disabled={
-              selectedProvider.defaultReviewDestination === 'shopify_hosted'
-            }
-            onChange={(event) =>
-              updateConnectorForm('reviewDestination', event.target.value)
-            }
-          >
-            {filteredReviewDestinationOptions.map((destination) => (
-              <option
-                key={`${destination.key}-destination`}
-                value={destination.key}
-              >
-                {destination.label}
-              </option>
-            ))}
-          </select>
-          <input
-            min='0'
-            max='30'
-            type='number'
-            value={connectorForm.delayDays}
-            onChange={(event) =>
-              updateConnectorForm('delayDays', event.target.value)
-            }
-            placeholder='Delay days'
-          />
-        </FormField>
-        <FormField
-          label={
-            isHostedReviewDestination
-              ? 'Hosted review form'
-              : 'External review link'
-          }
-          help={selectedReviewDestination.description}
-        >
-          {isHostedReviewDestination ? (
-            <div className='rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm font-semibold text-emerald-900'>
-              No external Shopify review URL is needed. Review Flow generates a
-              secure hosted product-review page for each Shopify paid order.
-            </div>
-          ) : (
-            <input
-              required
-              type='url'
-              value={connectorForm.reviewLink}
-              onChange={(event) =>
-                updateConnectorForm('reviewLink', event.target.value)
-              }
-              placeholder='https://your-review-destination.example/review'
-            />
-          )}
-        </FormField>
-        <div className='flex flex-wrap gap-3'>
-          <BaseButton
-            type='submit'
-            icon={mdiWebhook}
-            label={
-              isConnectorSubmitting
-                ? 'Connecting...'
-                : `Connect ${selectedProvider.label}`
-            }
-            color='info'
-            disabled={isConnectorSubmitting || isConnectorSubscriptionInactive}
-          />
-          <BaseButton
-            type='button'
-            icon={mdiRefresh}
-            label='Refresh connectors'
-            color='whiteDark'
-            onClick={loadConnectors}
-            disabled={isConnectorLoading}
-          />
-        </div>
-      </form>
-
-      <div className='mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white dark:border-dark-700 dark:bg-dark-900'>
-        <div
-          className={`bg-gradient-to-r ${selectedProviderGradient} p-5 text-white`}
-        >
-          <div className='flex flex-wrap items-start justify-between gap-4'>
+          <div className='mb-5 flex flex-wrap items-start justify-between gap-4'>
             <div>
-              <p className='text-xs font-bold uppercase tracking-[0.25em] text-white/70'>
-                Selected provider guide
-              </p>
-              <h4 className='mt-1 text-2xl font-black'>
-                {selectedProvider.label} setup
-              </h4>
-              <p className='mt-2 max-w-3xl text-sm leading-6 text-white/85'>
-                Follow the webhook instructions first. Click Use API instead
-                only when a custom system or automation tool needs the fallback
-                POST option.
+              <p className='text-sm font-bold uppercase tracking-[0.25em] text-indigo-500'>{eyebrow}</p>
+              <h3 className='mt-1 text-2xl font-black text-slate-900 dark:text-white'>{title}</h3>
+              <p className='mt-2 max-w-3xl text-sm leading-6 text-slate-500 dark:text-slate-400'>
+                {description}
               </p>
             </div>
-            <span className='rounded-full bg-white/15 px-4 py-2 text-xs font-black uppercase tracking-widest text-white ring-1 ring-white/20'>
-              Webhook setup — recommended
-            </span>
           </div>
-        </div>
 
-        <div className={`grid gap-4 p-4 ${isApiBackupVisible ? 'lg:grid-cols-[1fr_0.95fr]' : 'lg:grid-cols-1'}`}>
-          <div className='space-y-4 rounded-2xl bg-slate-50 p-4 dark:bg-dark-800'>
-            <div>
-              <p className='mb-1 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Dashboard path
-              </p>
-              <p className='font-semibold text-slate-900 dark:text-white'>
-                {selectedSetup.dashboardPath}
-              </p>
-            </div>
-
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Install steps
-              </p>
-              <ol className='list-decimal space-y-2 pl-4 text-sm leading-6 text-slate-600 dark:text-slate-300'>
-                {selectedSetup.steps.map((step, index) => (
-                  <li key={`${selectedProvider.key}-selected-step-${index}`}>
-                    {step}
-                  </li>
-                ))}
-              </ol>
-            </div>
-
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Events to enable
-              </p>
-              <div className='flex flex-wrap gap-2'>
-                {selectedSetup.requiredEvents.map((eventName) => (
-                  <code
-                    key={`${selectedProvider.key}-${eventName}`}
-                    className='rounded-lg bg-slate-950 px-2 py-1 text-xs text-emerald-200'
-                  >
-                    {eventName}
-                  </code>
-                ))}
-              </div>
-            </div>
-
-            <div className='rounded-xl bg-white p-3 text-xs leading-5 text-slate-600 ring-1 ring-slate-200 dark:bg-dark-900 dark:text-slate-300 dark:ring-dark-700'>
-              <strong>Test after saving:</strong> {selectedSetup.testTip}
-            </div>
-
-            <div className='flex flex-wrap gap-2'>
-              <BaseButton
-                type='button'
-                icon={mdiRefresh}
-                label={isCheckingWebhook ? 'Checking...' : 'Check webhook status'}
-                color='info'
-                small
-                disabled={isCheckingWebhook || !selectedWebhookTargets.length}
-                onClick={checkWebhookStatus}
-              />
-              <BaseButton
-                type='button'
-                icon={mdiCheckCircleOutline}
-                label='I sent a successful test'
-                color='success'
-                small
-                disabled={!selectedWebhookTargets.length}
-                onClick={() => finishPaymentSetup('Webhook')}
-              />
-              <BaseButton
-                type='button'
-                icon={mdiCreditCardOutline}
-                label={isApiBackupVisible ? 'Hide API instructions' : 'Use API instead'}
-                color='whiteDark'
-                small
-                onClick={() => setIsApiBackupVisible((current) => !current)}
-              />
-            </div>
-            <p className='text-xs leading-5 text-slate-500 dark:text-slate-400'>
-              Recommended path: use the webhook. Use API only for custom systems or automation tools when the provider dashboard webhook is not practical.
+          <div className='mb-5 flex items-start gap-3 rounded-3xl border border-indigo-200 bg-indigo-50 p-4 text-sm text-indigo-950 dark:border-indigo-900/60 dark:bg-indigo-950/30 dark:text-indigo-100'>
+            <BaseIcon path={mdiRobotHappyOutline} className='mt-0.5 shrink-0 text-indigo-600 dark:text-indigo-300' />
+            <p className='leading-6'>
+              Need help during setup? Use the floating AI helper in the bottom-right corner. It knows this setup flow and can walk you through each step.
             </p>
           </div>
 
-          <div className={`${isApiBackupVisible ? 'space-y-4' : 'hidden'} rounded-2xl border border-dashed border-slate-300 bg-white p-4 dark:border-dark-700 dark:bg-dark-900`}>
-            <div>
-              <p className='text-xs font-bold uppercase tracking-[0.25em] text-amber-500'>
-                API backup
-              </p>
-              <h5 className='mt-1 text-xl font-black text-slate-900 dark:text-white'>
-                Backup POST option for {selectedProvider.label}
-              </h5>
-              <p className='mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300'>
-                {selectedApiBackup.summary}
-              </p>
+          {error ? (
+            <div className='mb-5 flex items-start gap-3 rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-900 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-100'>
+              <BaseIcon path={mdiAlertCircleOutline} className='mt-0.5 shrink-0' />
+              <p className='leading-6'>{error}</p>
             </div>
+          ) : null}
 
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                When to use this backup
-              </p>
-              <ul className='list-disc space-y-2 pl-4 text-sm leading-6 text-slate-600 dark:text-slate-300'>
-                {commonApiBackupUseCases.map((useCase) => (
-                  <li key={useCase}>{useCase}</li>
-                ))}
-              </ul>
-            </div>
-
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Backup endpoint
-              </p>
-              {selectedWebhookTargets.length > 0 ? (
-                <div className='space-y-2'>
-                  {selectedWebhookTargets.map((target) => (
-                    <div
-                      key={`${target.businessId}-${selectedProvider.key}-backup-url`}
-                      className='rounded-xl bg-slate-50 p-3 ring-1 ring-slate-200 dark:bg-dark-800 dark:ring-dark-700'
-                    >
-                      <p className='mb-1 text-xs font-black uppercase tracking-widest text-slate-400'>
-                        POST · {target.businessName}
-                      </p>
-                      <code className='block break-all rounded-lg bg-slate-950 p-3 text-xs leading-5 text-emerald-200'>
-                        {target.url}
-                      </code>
-                      <BaseButton
-                        type='button'
-                        icon={
-                          copiedUrl === target.url
-                            ? mdiCheckCircleOutline
-                            : mdiContentCopy
-                        }
-                        label={copiedUrl === target.url ? 'Copied' : 'Copy URL'}
-                        color='info'
-                        small
-                        className='mt-2'
-                        onClick={() => copyWebhookUrl(target.url)}
-                      />
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <code className='block rounded-xl bg-slate-950 p-3 text-xs leading-5 text-emerald-200'>
-                  Connect {selectedProvider.label} first, then copy the
-                  generated webhook URL here. The API backup uses that same URL.
-                </code>
-              )}
-            </div>
-
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Headers
-              </p>
-              <div className='space-y-2 text-sm text-slate-600 dark:text-slate-300'>
-                <code className='block rounded-lg bg-slate-100 px-3 py-2 dark:bg-dark-800'>
-                  Content-Type: application/json
-                </code>
-                <p>
-                  No user login token is required for this public webhook URL;
-                  the secret token in the URL protects it.
-                </p>
-              </div>
-            </div>
-
-            <div>
-              <p className='mb-2 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                Example JSON body
-              </p>
-              <pre className='max-h-80 overflow-auto rounded-xl bg-slate-950 p-3 text-xs leading-5 text-emerald-200'>
-                <code>{selectedApiBackup.samplePayload}</code>
-              </pre>
-            </div>
-
-            <div className='rounded-xl bg-amber-50 p-3 text-xs leading-5 text-amber-900 ring-1 ring-amber-200 dark:bg-amber-950/30 dark:text-amber-100 dark:ring-amber-900'>
-              <strong>Backup success check:</strong>{' '}
-              {selectedApiBackup.successTip}
-            </div>
-
-            <BaseButton
-              type='button'
-              icon={mdiCheckCircleOutline}
-              label='I tested API backup'
-              color='success'
-              small
-              disabled={!selectedWebhookTargets.length}
-              onClick={() =>
-                finishPaymentSetup(
-                  'API backup',
-                  'Manual verification saved after a successful API backup test POST.',
-                )
-              }
-            />
-          </div>
-        </div>
-      </div>
-
-        </>
-      )}
-
-      <div className='mb-4 flex flex-wrap items-center justify-between gap-3'>
-        <div>
-          <p className='text-sm font-bold uppercase tracking-[0.25em] text-slate-400'>
-            Connected accounts
-          </p>
-          <h4 className='text-xl font-black text-slate-900 dark:text-white'>
-            {`${providerSummary.connectedCount} of ${providerSummary.totalCount} provider slots connected`}
-          </h4>
-        </div>
-      </div>
-
-      {isConnectorLoading ? (
-        <div className='rounded-2xl border border-dashed border-slate-200 p-8 text-center text-slate-500'>
-          Loading webhook connectors...
-        </div>
-      ) : connectors.length === 0 ? (
-        <div className='rounded-2xl border border-dashed border-slate-200 bg-white p-8 text-center dark:border-dark-700 dark:bg-dark-900'>
-          <BaseButton icon={mdiWebhook} color='info' roundedFull />
-          <p className='mt-3 font-bold text-slate-900 dark:text-white'>
-            No order/payment triggers connected yet
-          </p>
-          <p className='mt-1 text-sm text-slate-500'>
-            Choose Stripe, PayPal, Square, Shopify, or WooCommerce above to
-            generate your first secure order/payment webhook URL.
-          </p>
-        </div>
-      ) : (
-        <div className='space-y-5'>
-          {connectors.map((business) => (
-            <div
-              key={business.id}
-              className='rounded-3xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'
-            >
-              <div className='mb-4 flex flex-wrap items-center justify-between gap-3'>
+          <div className='space-y-5'>
+            <div className='rounded-3xl border border-slate-200 bg-white p-5 dark:border-dark-700 dark:bg-dark-900/50'>
+              <div className='mb-4 flex items-center gap-3'>
+                <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white'>1</span>
                 <div>
-                  <h4 className='text-xl font-black text-slate-900 dark:text-white'>
-                    {business.name}
-                  </h4>
-                  <p className='text-sm text-slate-500'>
-                    Default review delay: {business.delay_days ?? 0} days ·
-                    Review destination:{' '}
-                    {business.review_destination || 'google'}
-                  </p>
+                  <p className='text-sm font-black uppercase tracking-[0.2em] text-indigo-500'>First</p>
+                  <h4 className='text-lg font-black text-slate-900 dark:text-white'>Select your payment provider</h4>
                 </div>
-                <BaseButton
-                  href='/transactions/transactions-list'
-                  icon={mdiCreditCardOutline}
-                  label='View payments'
-                  color='whiteDark'
-                  small
-                />
               </div>
-              <div className='grid gap-4 lg:grid-cols-2 2xl:grid-cols-3'>
-                {business.providers.map((provider) => (
-                  <div
-                    key={`${business.id}-${provider.key}`}
-                    className='overflow-hidden rounded-2xl border border-slate-200 bg-slate-50 dark:border-dark-700 dark:bg-dark-800'
-                  >
-                    <div
-                      className={`bg-gradient-to-r ${providerGradient[provider.key] || providerGradient.stripe} p-4 text-white`}
-                    >
-                      <div className='flex items-start justify-between gap-3'>
-                        <div>
-                          <p className='text-xs font-bold uppercase tracking-[0.2em] text-white/70'>
-                            {provider.label}
-                          </p>
-                          <h5 className='text-lg font-black'>
-                            {getProviderCardTitle(provider)}
-                          </h5>
-                        </div>
-                        <span
-                          className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${provider.connected ? 'bg-emerald-100 text-emerald-900' : 'bg-white/20 text-white'}`}
-                        >
-                          {provider.connected ? 'Connected' : 'Not connected'}
+              <FormField label='Payment provider'>
+                <select value={selectedProviderKey} onChange={handleProviderChange}>
+                  <option value=''>Select your payment provider</option>
+                  {paymentProviders.map((provider) => (
+                    <option key={provider.key} value={provider.key}>
+                      {provider.label}
+                    </option>
+                  ))}
+                </select>
+              </FormField>
+              <p className='text-sm leading-6 text-slate-500 dark:text-slate-400'>
+                Choose the system where completed payments or paid orders happen. After this, the next steps appear in order.
+              </p>
+            </div>
+
+            {selectedProvider ? (
+              <>
+                <div className='rounded-3xl border border-slate-200 bg-slate-50 p-5 dark:border-dark-700 dark:bg-dark-900/50'>
+                  <div className='mb-4 flex flex-wrap items-start justify-between gap-4'>
+                    <div className='flex items-center gap-3'>
+                      <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white'>2</span>
+                      <div>
+                        <p className='text-sm font-black uppercase tracking-[0.2em] text-indigo-500'>Then</p>
+                        <h4 className='text-lg font-black text-slate-900 dark:text-white'>Create your ReviewFlow webhook URL</h4>
+                      </div>
+                    </div>
+                    <span className='rounded-full bg-white px-4 py-2 text-xs font-black text-slate-700 shadow-sm ring-1 ring-slate-200 dark:bg-dark-800 dark:text-slate-200 dark:ring-dark-700'>
+                      Event: {selectedProvider.eventLabel}
+                    </span>
+                  </div>
+
+                  <FormField label='Business and account details' help='Business name is required so ReviewFlow knows where to save the test transaction.'>
+                    <input
+                      value={businessName}
+                      onChange={(event) => setBusinessName(event.target.value)}
+                      placeholder='Business name, e.g. Acme Logistics'
+                    />
+                    <input
+                      value={accountReference}
+                      onChange={(event) => setAccountReference(event.target.value)}
+                      placeholder={`${selectedProvider.label} account/store label (optional)`}
+                    />
+                  </FormField>
+
+                  <div className='grid gap-3 rounded-2xl bg-white p-4 text-sm text-slate-700 shadow-sm dark:bg-dark-800 dark:text-slate-300 md:grid-cols-3'>
+                    <div>
+                      <p className='font-black text-slate-900 dark:text-white'>Business type</p>
+                      <p className='mt-1 capitalize'>{businessType}</p>
+                    </div>
+                    <div>
+                      <p className='font-black text-slate-900 dark:text-white'>Review destination used</p>
+                      <p className='mt-1'>{reviewDestinationLabels[getSafeReviewDestination(selectedProvider, businessType, reviewDestination)]}</p>
+                    </div>
+                    <div>
+                      <p className='font-black text-slate-900 dark:text-white'>Request delay</p>
+                      <p className='mt-1'>{delayDays || '0'} day(s)</p>
+                    </div>
+                  </div>
+
+                  <div className='mt-5 flex flex-wrap gap-3'>
+                    <BaseButton
+                      label={reviewFlowWebhookUrl ? 'Refresh webhook URL' : 'Create webhook URL'}
+                      icon={mdiWebhook}
+                      color='info'
+                      roundedFull
+                      onClick={createWebhookUrl}
+                      disabled={isGeneratingWebhook || isLoadingConnectors}
+                    />
+                    {isLoadingConnectors ? (
+                      <span className='inline-flex items-center text-sm font-semibold text-slate-500 dark:text-slate-400'>Loading existing connections…</span>
+                    ) : null}
+                  </div>
+
+                  {reviewFlowWebhookUrl ? (
+                    <div className='mt-5 rounded-3xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-900/60 dark:bg-emerald-950/30'>
+                      <div className='mb-3 flex items-center gap-2 text-emerald-800 dark:text-emerald-100'>
+                        <BaseIcon path={mdiLinkVariant} />
+                        <p className='font-black'>Your ReviewFlow webhook URL</p>
+                      </div>
+                      <textarea readOnly value={reviewFlowWebhookUrl} className='h-24 font-mono text-xs' />
+                      <div className='mt-3 flex flex-wrap items-center gap-3'>
+                        <BaseButton
+                          label={copied ? 'Copied' : 'Copy webhook URL'}
+                          icon={mdiContentCopy}
+                          color='success'
+                          roundedFull
+                          onClick={copyWebhookUrl}
+                        />
+                        <span className='text-sm leading-6 text-emerald-900 dark:text-emerald-100'>
+                          Copy this URL now. You will paste it into {selectedProvider.providerArea}.
                         </span>
                       </div>
                     </div>
-                    <div className='space-y-4 p-4'>
+                  ) : null}
+                </div>
+
+                {testStatus === 'error' ? renderOauthBackupCard('failed_test') : null}
+
+                {reviewFlowWebhookUrl ? (
+                  <div className='rounded-3xl border border-slate-200 bg-white p-5 dark:border-dark-700 dark:bg-dark-900/50'>
+                    <div className='mb-4 flex items-center gap-3'>
+                      <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white'>3</span>
                       <div>
-                        <p className='mb-1 text-xs font-bold uppercase tracking-widest text-slate-400'>
-                          Webhook URL
-                        </p>
-                        <code className='block break-all rounded-xl bg-slate-950 p-3 text-xs leading-5 text-emerald-200'>
-                          {provider.webhook_url ||
-                            'Connect this provider to reveal its secure webhook endpoint.'}
-                        </code>
-                      </div>
-                      <div className='flex flex-wrap gap-2'>
-                        <BaseButton
-                          type='button'
-                          icon={
-                            provider.webhook_url &&
-                            copiedUrl === provider.webhook_url
-                              ? mdiCheckCircleOutline
-                              : mdiContentCopy
-                          }
-                          label={
-                            provider.webhook_url &&
-                            copiedUrl === provider.webhook_url
-                              ? 'Copied'
-                              : 'Copy URL'
-                          }
-                          color='info'
-                          small
-                          disabled={!provider.webhook_url}
-                          onClick={() => copyWebhookUrl(provider.webhook_url)}
-                        />
-                        <BaseButton
-                          type='button'
-                          icon={mdiRefresh}
-                          label='Rotate URL'
-                          color='whiteDark'
-                          small
-                          disabled={!provider.webhook_url}
-                          onClick={() =>
-                            rotateWebhookToken(business.id, provider.key)
-                          }
-                        />
-                      </div>
-                      <div className='rounded-xl bg-white p-3 text-xs text-slate-600 ring-1 ring-slate-200 dark:bg-dark-900 dark:text-slate-300 dark:ring-dark-700'>
-                        <p className='mb-2 font-black text-slate-900 dark:text-white'>
-                          Quick setup reminder
-                        </p>
-                        <ol className='list-decimal space-y-1 pl-4'>
-                          {(providerInstructions[provider.key] || []).map(
-                            (instruction) => (
-                              <li key={instruction}>{instruction}</li>
-                            ),
-                          )}
-                        </ol>
-                        <p className='mt-3 text-slate-500 dark:text-slate-400'>
-                          Need API backup? Use the selected provider guide above
-                          and click Use API instead.
-                        </p>
-                        {provider.webhook_token_last4 && (
-                          <p className='mt-3 text-slate-400'>
-                            Secret token ends in: ****
-                            {provider.webhook_token_last4}
-                          </p>
-                        )}
+                        <p className='text-sm font-black uppercase tracking-[0.2em] text-indigo-500'>Next</p>
+                        <h4 className='text-lg font-black text-slate-900 dark:text-white'>Paste the webhook into {selectedProvider.label}</h4>
                       </div>
                     </div>
+
+                    <ol className='space-y-3'>
+                      {selectedProvider.instructions.map((instruction, index) => (
+                        <li key={instruction} className='flex gap-3 text-sm leading-6 text-slate-700 dark:text-slate-300'>
+                          <span className='flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-slate-900 text-xs font-black text-white dark:bg-white dark:text-slate-900'>
+                            {index + 1}
+                          </span>
+                          <span>{instruction}</span>
+                        </li>
+                      ))}
+                    </ol>
+
+                    <FormField label='Confirm the webhook URL you pasted into the provider' help='Paste the exact ReviewFlow webhook URL here after saving it in the payment provider.'>
+                      <textarea
+                        value={confirmedWebhookUrl}
+                        onChange={(event) => setConfirmedWebhookUrl(event.target.value)}
+                        placeholder='Paste the webhook URL here after you save it in the provider'
+                      />
+                    </FormField>
+
+                    {confirmedWebhookUrl ? (
+                      <div className={`rounded-2xl p-4 text-sm font-semibold ${isWebhookConfirmed ? 'bg-emerald-50 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-100' : 'bg-amber-50 text-amber-800 dark:bg-amber-950/30 dark:text-amber-100'}`}>
+                        {isWebhookConfirmed
+                          ? 'Webhook URL confirmed. You can run the test transaction now.'
+                          : 'The pasted URL does not match yet. Copy the ReviewFlow webhook URL exactly, then paste it here.'}
+                      </div>
+                    ) : null}
                   </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
+                ) : null}
+
+                {reviewFlowWebhookUrl ? (
+                  <div className='rounded-3xl border border-indigo-200 bg-indigo-50 p-5 dark:border-indigo-900/60 dark:bg-indigo-950/30'>
+                    <div className='mb-4 flex flex-wrap items-start justify-between gap-4'>
+                      <div className='flex items-center gap-3'>
+                        <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white'>4</span>
+                        <div>
+                          <p className='text-sm font-black uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-300'>Then test</p>
+                          <h4 className='text-lg font-black text-slate-900 dark:text-white'>
+                            {selectedProvider.testWindow.title}
+                          </h4>
+                        </div>
+                      </div>
+                      <span className={`rounded-full px-4 py-2 text-xs font-black ${testStatus === 'complete' ? 'bg-emerald-600 text-white' : 'bg-white text-indigo-700 shadow-sm dark:bg-dark-800 dark:text-indigo-200'}`}>
+                        {testStatus === 'complete' ? 'Complete' : testStatus === 'running' ? 'Testing…' : testStatus === 'error' ? 'Test failed' : 'Waiting for test'}
+                      </span>
+                    </div>
+
+                    <ul className='space-y-2 text-sm leading-6 text-slate-700 dark:text-slate-300'>
+                      {selectedProvider.testWindow.steps.map((step) => (
+                        <li key={step} className='flex gap-2'>
+                          <span className='mt-2 h-2 w-2 shrink-0 rounded-full bg-indigo-500' />
+                          <span>{step}</span>
+                        </li>
+                      ))}
+                    </ul>
+
+                    <div className='mt-5 flex flex-wrap gap-3'>
+                      <BaseButton
+                        label={isTestingWebhook ? 'Running test…' : 'Run test transaction'}
+                        icon={mdiPlayCircleOutline}
+                        color='info'
+                        roundedFull
+                        disabled={!canRunTest}
+                        onClick={runTestTransaction}
+                      />
+                      <BaseButton
+                        label={helpButtonLabel}
+                        icon={mdiHelpCircleOutline}
+                        color='whiteDark'
+                        roundedFull
+                      />
+                    </div>
+
+                    {testTransactions.length > 0 ? (
+                      <div className='mt-5 overflow-hidden rounded-3xl border border-emerald-200 bg-white shadow-sm dark:border-emerald-900/60 dark:bg-dark-900'>
+                        <div className='flex items-center gap-3 border-b border-emerald-100 bg-emerald-50 p-4 text-emerald-900 dark:border-emerald-900/60 dark:bg-emerald-950/30 dark:text-emerald-100'>
+                          <BaseIcon path={mdiCashCheck} />
+                          <div>
+                            <p className='font-black'>Test transaction received</p>
+                            <p className='text-xs opacity-80'>The webhook processor saved this transaction, so setup can be completed.</p>
+                          </div>
+                        </div>
+                        <div className='grid gap-3 p-4 text-sm text-slate-700 dark:text-slate-300 md:grid-cols-2'>
+                          {testTransactions.map((transaction) => (
+                            <div key={transaction.id} className='rounded-2xl border border-slate-200 p-4 dark:border-dark-700'>
+                              <div className='mb-3 flex items-center gap-2 text-emerald-600 dark:text-emerald-300'>
+                                <BaseIcon path={mdiCheckCircleOutline} />
+                                <p className='font-black'>Complete</p>
+                              </div>
+                              <p><span className='font-black'>Customer:</span> {transaction.customer}</p>
+                              <p><span className='font-black'>Email:</span> {transaction.email}</p>
+                              <p><span className='font-black'>Amount:</span> {transaction.amount}</p>
+                              <p><span className='font-black'>Event:</span> {transaction.eventType}</p>
+                              <p><span className='font-black'>Received:</span> {transaction.receivedAt}</p>
+                              <p className='mt-2 break-all text-xs opacity-80'>Transaction ID: {transaction.id}</p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+                  </div>
+                ) : null}
+
+                {testStatus === 'error' ? renderOauthBackupCard('failed_test') : null}
+
+                {reviewFlowWebhookUrl ? (
+                  <div className='rounded-3xl border border-slate-200 bg-white p-5 dark:border-dark-700 dark:bg-dark-900/50'>
+                    <div className='mb-4 flex items-center gap-3'>
+                      <span className='flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-sm font-black text-white'>5</span>
+                      <div>
+                        <p className='text-sm font-black uppercase tracking-[0.2em] text-indigo-500'>Last</p>
+                        <h4 className='text-lg font-black text-slate-900 dark:text-white'>Finish and close to summary</h4>
+                      </div>
+                    </div>
+                    <p className='mb-4 text-sm leading-6 text-slate-500 dark:text-slate-400'>
+                      Finish setup unlocks only after the test transaction appears and the status says Complete.
+                    </p>
+                    <BaseButton
+                      label={canFinish ? 'Finish setup' : 'Finish setup unlocks after test transaction'}
+                      icon={canFinish ? mdiCheckCircleOutline : mdiClipboardTextOutline}
+                      color={canFinish ? 'success' : 'whiteDark'}
+                      roundedFull
+                      disabled={!canFinish}
+                      onClick={finishSetup}
+                    />
+                  </div>
+                ) : null}
+              </>
+            ) : null}
+          </div>
+        </>
       )}
     </CardBox>
   );
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 3626286..431e86b 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -8,6 +8,7 @@ import NavBar from '../components/NavBar'
 import NavBarItemPlain from '../components/NavBarItemPlain'
 import AsideMenu from '../components/AsideMenu'
 import FooterBar from '../components/FooterBar'
+import FloatingAiHelper from '../components/FloatingAiHelper'
 import { useAppDispatch, useAppSelector } from '../stores/hooks'
 import Search from '../components/Search';
 import { useRouter } from 'next/router'
@@ -153,6 +154,7 @@ export default function LayoutAuthenticated({
         />
         {children}
         <FooterBar>{portalLabel} · ReviewFlow</FooterBar>
+        <FloatingAiHelper />
       </div>
     </div>
   )
diff --git a/frontend/src/pages/businesses/businesses-list.tsx b/frontend/src/pages/businesses/businesses-list.tsx
index 6bdb3c1..653f310 100644
--- a/frontend/src/pages/businesses/businesses-list.tsx
+++ b/frontend/src/pages/businesses/businesses-list.tsx
@@ -115,7 +115,7 @@ const BusinessesTablesPage = () => {
         />
         <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/businesses/businesses-new'} color='info' label='Add Business'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/setup?businessMode=new#business-info'} color='info' label='Add Business'/>}
           
           <BaseButton
               className={'mr-3'}
diff --git a/frontend/src/pages/businesses/businesses-table.tsx b/frontend/src/pages/businesses/businesses-table.tsx
index 60390a9..68ee0ae 100644
--- a/frontend/src/pages/businesses/businesses-table.tsx
+++ b/frontend/src/pages/businesses/businesses-table.tsx
@@ -115,7 +115,7 @@ const BusinessesTablesPage = () => {
         />
         <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/businesses/businesses-new'} color='info' label='Add Business'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/setup?businessMode=new#business-info'} color='info' label='Add Business'/>}
           
           <BaseButton
               className={'mr-3'}
diff --git a/frontend/src/pages/setup.tsx b/frontend/src/pages/setup.tsx
index 3a34fa9..977ed25 100644
--- a/frontend/src/pages/setup.tsx
+++ b/frontend/src/pages/setup.tsx
@@ -7,6 +7,7 @@ import {
 } from '@mdi/js';
 import axios from 'axios';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import React, { ReactElement, useEffect, useMemo, useState } from 'react';
 import PaymentProviderConnectors, {
   ConnectorFormValues,
@@ -18,12 +19,19 @@ import SectionMain from '../components/SectionMain';
 import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
 import LayoutAuthenticated from '../layouts/Authenticated';
 import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
 
 type BusinessType = 'local' | 'online' | 'hybrid';
 
 type ReviewBusiness = {
   id: string;
   name?: string;
+  ownerId?: string;
+  is_active?: boolean;
+  stripe_account_reference?: string;
+  stripe_connected?: boolean;
+  stripe_connected_at?: string | null;
+  default_review_platform?: string;
   business_type?: BusinessType;
   review_destination?: string;
   delay_days?: number;
@@ -103,6 +111,12 @@ type SubscriptionStatusResponse = {
     effectiveStatus: string;
     isActive: boolean;
   };
+  usage?: {
+    businesses?: number;
+  } | null;
+  limits?: {
+    businesses?: number;
+  };
 };
 
 const businessTypeOptions: Array<{ key: BusinessType; label: string; help: string }> = [
@@ -139,6 +153,7 @@ type ReviewDestinationKey = ReviewDestinationOption['key'];
 type ReviewDestinationField = Exclude<ReviewDestinationOption['field'], ''>;
 
 const defaultSettings = {
+  ownerId: '',
   businessName: 'Review Flow Business',
   businessType: 'hybrid' as BusinessType,
   reviewDestination: 'google',
@@ -181,6 +196,11 @@ const defaultSettings = {
   angiReviewLink: '',
   opentableReviewLink: '',
   customReviewLink: '',
+  isActive: true,
+  stripeAccountReference: '',
+  stripeConnected: false,
+  stripeConnectedAt: '',
+  defaultReviewPlatform: 'google',
 };
 
 type SetupSettings = typeof defaultSettings;
@@ -280,15 +300,59 @@ function formatReviewDestinationList(destinations: ReviewDestinationOption[]) {
   return destinations.map((destination) => destination.label).join(', ');
 }
 
+function getBlankBusinessSettings(ownerId = ''): SetupSettings {
+  return {
+    ...defaultSettings,
+    ownerId,
+    businessName: '',
+    delayDays: '',
+    emailSubjectTemplate: '',
+    emailBodyTemplate: '',
+    isActive: false,
+    stripeAccountReference: '',
+    stripeConnected: false,
+    stripeConnectedAt: '',
+    defaultReviewPlatform: 'google',
+  };
+}
+
+function toDateTimeLocalValue(value?: string | null) {
+  if (!value) return '';
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) return '';
+
+  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+
+  return localDate.toISOString().slice(0, 16);
+}
+
+function getBusinessTypeLabel(businessType: BusinessType) {
+  return businessTypeOptions.find((option) => option.key === businessType)?.label || 'Hybrid business';
+}
+
+function getDefaultReviewPlatformLabel(value?: string) {
+  const labels: Record<string, string> = {
+    google: 'google',
+    yelp: 'yelp',
+    facebook: 'facebook',
+    custom: 'custom',
+  };
+
+  return labels[value || 'google'] || labels.google;
+}
+
 function businessToSettings(business?: ReviewBusiness | null): SetupSettings {
   if (!business) return defaultSettings;
 
   const businessType = normalizeBusinessType(business.business_type);
 
   return {
-    businessName: business.name || defaultSettings.businessName,
+    ownerId: business.ownerId || defaultSettings.ownerId,
+    businessName: business.name || '',
     businessType,
-    reviewDestination: coerceDestination(businessType, business.review_destination),
+    reviewDestination: coerceDestination(businessType, business.review_destination || business.default_review_platform),
     delayDays: String(business.delay_days ?? 7),
     followupEnabled: business.followup_enabled !== false,
     followupDelayDays: String(business.followup_delay_days ?? 3),
@@ -319,6 +383,11 @@ function businessToSettings(business?: ReviewBusiness | null): SetupSettings {
     angiReviewLink: business.angi_review_link || '',
     opentableReviewLink: business.opentable_review_link || '',
     customReviewLink: business.custom_review_link || '',
+    isActive: business.is_active !== false,
+    stripeAccountReference: business.stripe_account_reference || '',
+    stripeConnected: Boolean(business.stripe_connected),
+    stripeConnectedAt: toDateTimeLocalValue(business.stripe_connected_at),
+    defaultReviewPlatform: business.default_review_platform || 'google',
   };
 }
 
@@ -376,6 +445,8 @@ function setupStepClass(isComplete: boolean) {
 }
 
 export default function SetupPage() {
+  const router = useRouter();
+  const { currentUser } = useAppSelector((state) => state.auth);
   const [summary, setSummary] = useState<SummaryResponse | null>(null);
   const [subscriptionStatus, setSubscriptionStatus] = useState<SubscriptionStatusResponse | null>(null);
   const [selectedBusinessId, setSelectedBusinessId] = useState('');
@@ -384,6 +455,8 @@ export default function SetupPage() {
   const [error, setError] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
+  const [businessInfoEditing, setBusinessInfoEditing] = useState(true);
+  const [isCreatingBusinessProfile, setIsCreatingBusinessProfile] = useState(false);
   const [selectedReviewDestinations, setSelectedReviewDestinations] = useState<ReviewDestinationKey[]>([
     'google',
   ]);
@@ -392,10 +465,14 @@ export default function SetupPage() {
   const businesses = summary?.businesses || [];
   const recentEvents = summary?.recentEvents || [];
   const recentTransactions = summary?.recentTransactions || [];
-  const selectedBusiness = useMemo(
-    () => businesses.find((business) => business.id === selectedBusinessId) || summary?.primaryBusiness || null,
-    [businesses, selectedBusinessId, summary?.primaryBusiness],
-  );
+  const selectedBusiness = useMemo(() => {
+    if (isCreatingBusinessProfile) return null;
+    if (selectedBusinessId) {
+      return businesses.find((business) => business.id === selectedBusinessId) || null;
+    }
+
+    return summary?.primaryBusiness || null;
+  }, [businesses, isCreatingBusinessProfile, selectedBusinessId, summary?.primaryBusiness]);
   const currentBusinessType = normalizeBusinessType(settingsForm.businessType);
   const destinationOptions = getDestinationsForBusinessType(currentBusinessType);
   const selectedDestinationOptions = getSelectedDestinationOptions(
@@ -406,6 +483,14 @@ export default function SetupPage() {
   const selectedReviewDestination = getReviewDestinationOption(primaryReviewDestinationKey) || destinationOptions[0];
   const selectedDestinationField = selectedReviewDestination?.field || '';
   const brandedMessagingLocked = subscriptionStatus?.subscription.planId === 'starter';
+  const currentUserName = [currentUser?.firstName, currentUser?.lastName].filter(Boolean).join(' ');
+  const ownerLabel = currentUserName || currentUser?.email || 'Current user';
+  const businessLimit = Number(subscriptionStatus?.limits?.businesses ?? 1);
+  const businessCount = Number(subscriptionStatus?.usage?.businesses ?? businesses.length);
+  const isMultiBusinessPlan = businessLimit > 1;
+  const canStartNewBusiness = businessCount < businessLimit;
+  const canAddAnotherBusiness = isMultiBusinessPlan && canStartNewBusiness;
+  const businessLimitText = `${subscriptionStatus?.subscription.planName || 'Your plan'} includes ${businessLimit} ${businessLimit === 1 ? 'business profile' : 'business profiles'}.`;
   const previewReplacements = useMemo(() => ({
     businessName: settingsForm.businessName || 'Your Business',
     customerName: 'Riley',
@@ -419,7 +504,7 @@ export default function SetupPage() {
   const emailPreviewFooter = renderPreviewTemplate(settingsForm.emailFooterText, previewReplacements);
   const smsPreview = renderPreviewTemplate(settingsForm.smsTemplate, previewReplacements);
 
-  const hasBusinessInfo = Boolean(settingsForm.businessName.trim());
+  const hasBusinessInfo = Boolean(!isCreatingBusinessProfile && selectedBusinessId && settingsForm.businessName.trim());
   const hasPaymentConnection = Boolean(
     selectedBusiness?.id && selectedBusiness.providers?.some((provider: any) => provider.connected),
   );
@@ -445,7 +530,7 @@ export default function SetupPage() {
     },
   ];
 
-  const loadData = async () => {
+  const loadData = async (options: { startNewBusiness?: boolean } = {}) => {
     setIsLoading(true);
     setError('');
 
@@ -455,17 +540,48 @@ export default function SetupPage() {
         axios.get('/subscription/me'),
       ]);
       const loadedSummary = summaryResponse.data as SummaryResponse;
-      const primaryBusiness = loadedSummary.primaryBusiness || loadedSummary.businesses?.[0] || null;
+      const loadedSubscription = subscriptionResponse.data as SubscriptionStatusResponse;
+      const loadedBusinesses = loadedSummary.businesses || [];
+      const primaryBusiness = loadedSummary.primaryBusiness || loadedBusinesses[0] || null;
+      const loadedBusinessLimit = Number(loadedSubscription.limits?.businesses ?? 1);
+      const loadedBusinessCount = Number(loadedSubscription.usage?.businesses ?? loadedBusinesses.length);
+      const loadedPlanName = loadedSubscription.subscription.planName || 'Your plan';
 
       setSummary(loadedSummary);
-      setSubscriptionStatus(subscriptionResponse.data);
+      setSubscriptionStatus(loadedSubscription);
+
+      if (options.startNewBusiness) {
+        if (loadedBusinessCount < loadedBusinessLimit) {
+          const blankSettings = getBlankBusinessSettings(currentUser?.id || '');
+          setSelectedBusinessId('');
+          setSettingsForm(blankSettings);
+          setSelectedReviewDestinations(['google']);
+          setReviewOutputFinished(false);
+          setBusinessInfoEditing(true);
+          setIsCreatingBusinessProfile(true);
+          return;
+        }
+
+        setError(`${loadedPlanName} includes ${loadedBusinessLimit} ${loadedBusinessLimit === 1 ? 'business profile' : 'business profiles'}. Edit your existing business profile or upgrade before adding another.`);
+      }
 
       if (primaryBusiness) {
         const nextSettings = businessToSettings(primaryBusiness);
+        const nextSelectedDestinations = getSelectedDestinationsFromSettings(nextSettings);
         setSelectedBusinessId(primaryBusiness.id);
         setSettingsForm(nextSettings);
-        setSelectedReviewDestinations(getSelectedDestinationsFromSettings(nextSettings));
-        setReviewOutputFinished(getReviewOutputIsComplete(nextSettings, getSelectedDestinationsFromSettings(nextSettings)));
+        setSelectedReviewDestinations(nextSelectedDestinations);
+        setReviewOutputFinished(getReviewOutputIsComplete(nextSettings, nextSelectedDestinations));
+        setBusinessInfoEditing(false);
+        setIsCreatingBusinessProfile(false);
+      } else {
+        const blankSettings = getBlankBusinessSettings(currentUser?.id || '');
+        setSelectedBusinessId('');
+        setSettingsForm(blankSettings);
+        setSelectedReviewDestinations(['google']);
+        setReviewOutputFinished(false);
+        setBusinessInfoEditing(true);
+        setIsCreatingBusinessProfile(true);
       }
     } catch (requestError) {
       console.error('Failed to load Setup:', requestError);
@@ -476,8 +592,10 @@ export default function SetupPage() {
   };
 
   useEffect(() => {
-    loadData();
-  }, []);
+    if (!router.isReady) return;
+
+    loadData({ startNewBusiness: router.query.businessMode === 'new' });
+  }, [router.isReady, router.query.businessMode, currentUser?.id]);
 
   const updateSettings = (key: SetupSettingsKey, value: string | boolean) => {
     setSettingsForm((current) => {
@@ -502,6 +620,22 @@ export default function SetupPage() {
         };
       }
 
+      if (key === 'defaultReviewPlatform') {
+        const nextReviewDestination = coerceDestination(current.businessType, String(value));
+
+        if (isReviewDestinationKey(nextReviewDestination)) {
+          setSelectedReviewDestinations([nextReviewDestination]);
+        }
+
+        setReviewOutputFinished(false);
+
+        return {
+          ...current,
+          defaultReviewPlatform: String(value),
+          reviewDestination: nextReviewDestination,
+        };
+      }
+
       if (key === 'reviewDestination') {
         setReviewOutputFinished(false);
       }
@@ -512,11 +646,38 @@ export default function SetupPage() {
 
   const selectBusiness = (businessId: string) => {
     const business = businesses.find((item) => item.id === businessId);
+
+    if (!business) return;
+
     const nextSettings = businessToSettings(business);
+    const nextSelectedDestinations = getSelectedDestinationsFromSettings(nextSettings);
     setSelectedBusinessId(businessId);
     setSettingsForm(nextSettings);
-    setSelectedReviewDestinations(getSelectedDestinationsFromSettings(nextSettings));
-    setReviewOutputFinished(getReviewOutputIsComplete(nextSettings, getSelectedDestinationsFromSettings(nextSettings)));
+    setSelectedReviewDestinations(nextSelectedDestinations);
+    setReviewOutputFinished(getReviewOutputIsComplete(nextSettings, nextSelectedDestinations));
+    setBusinessInfoEditing(false);
+    setIsCreatingBusinessProfile(false);
+  };
+
+  const startNewBusinessProfile = () => {
+    if (!canStartNewBusiness && businesses.length > 0) {
+      setError(`${businessLimitText} Edit an existing business profile or upgrade before adding another.`);
+      return;
+    }
+
+    const blankSettings = getBlankBusinessSettings(currentUser?.id || '');
+    setSelectedBusinessId('');
+    setSettingsForm(blankSettings);
+    setSelectedReviewDestinations(['google']);
+    setReviewOutputFinished(false);
+    setBusinessInfoEditing(true);
+    setIsCreatingBusinessProfile(true);
+    setMessage('');
+    setError('');
+
+    if (typeof document !== 'undefined') {
+      document.getElementById('business-info')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
   };
 
   const toggleReviewDestination = (destinationKey: ReviewDestinationKey) => {
@@ -563,11 +724,16 @@ export default function SetupPage() {
     return true;
   };
 
-  const saveSettings = async (options: { finishReviewOutput?: boolean } = {}) => {
+  const saveSettings = async (options: { finishReviewOutput?: boolean; collapseBusinessInfo?: boolean } = {}) => {
     if (options.finishReviewOutput) {
       setMessage('');
     }
 
+    if (!settingsForm.businessName.trim()) {
+      setError('Business name is required.');
+      return;
+    }
+
     if (options.finishReviewOutput && !validateReviewOutput()) {
       return;
     }
@@ -579,22 +745,29 @@ export default function SetupPage() {
     try {
       const reviewDestination = getPrimaryReviewDestination(settingsForm, selectedReviewDestinations);
       const response = await axios.put('/reviewflow/growth-tools/business', {
-        businessId: selectedBusinessId,
+        businessId: isCreatingBusinessProfile ? '' : selectedBusinessId,
         ...settingsForm,
         reviewDestination,
-        delayDays: Number(settingsForm.delayDays),
-        followupDelayDays: Number(settingsForm.followupDelayDays),
-        maxFollowups: Number(settingsForm.maxFollowups),
+        delayDays: settingsForm.delayDays === '' ? '' : Number(settingsForm.delayDays),
+        followupDelayDays: settingsForm.followupDelayDays === '' ? '' : Number(settingsForm.followupDelayDays),
+        maxFollowups: settingsForm.maxFollowups === '' ? '' : Number(settingsForm.maxFollowups),
       });
       const business = response.data.business as ReviewBusiness;
       const nextSettings = businessToSettings(business);
+      const nextSelectedDestinations = getSelectedDestinationsFromSettings(nextSettings);
       setSelectedBusinessId(business.id);
       setSettingsForm(nextSettings);
-      setSelectedReviewDestinations(getSelectedDestinationsFromSettings(nextSettings));
+      setSelectedReviewDestinations(nextSelectedDestinations);
       setReviewOutputFinished(Boolean(options.finishReviewOutput));
+      setIsCreatingBusinessProfile(false);
+      if (options.collapseBusinessInfo || isCreatingBusinessProfile) {
+        setBusinessInfoEditing(false);
+      }
       setMessage(options.finishReviewOutput
         ? 'Review destinations saved to the company profile. Email and SMS messages will use these review links.'
-        : 'Setup saved. Your Growth Tools now use these company, payment, and review-output defaults.');
+        : options.collapseBusinessInfo
+          ? 'Business info saved. The summary box is ready, and the next setup steps will use this business profile.'
+          : 'Setup saved. Your Growth Tools now use these company, payment, and review-output defaults.');
       await loadData();
     } catch (requestError) {
       console.error('Failed to save Setup:', requestError);
@@ -616,6 +789,8 @@ export default function SetupPage() {
   ) => {
     const businessType = normalizeBusinessType(connectorForm.businessType);
     setSelectedBusinessId(business.id);
+    setIsCreatingBusinessProfile(false);
+    setBusinessInfoEditing(false);
     setSettingsForm((current) => ({
       ...businessToSettings(business),
       businessName: connectorForm.businessName || business.name || current.businessName,
@@ -623,7 +798,7 @@ export default function SetupPage() {
       reviewDestination: coerceDestination(businessType, connectorForm.reviewDestination),
       delayDays: connectorForm.delayDays || current.delayDays,
     }));
-    setMessage(`${connectorForm.provider.toUpperCase()} connected. Copy the generated webhook URL into that provider to finish the payment trigger.`);
+    setMessage(`${connectorForm.provider.toUpperCase()} setup complete. Test transaction received, and the payment trigger summary is ready.`);
     await loadData();
   };
 
@@ -692,80 +867,233 @@ export default function SetupPage() {
           ))}
         </div>
 
-        <CardBox className='mb-6 border-0 shadow-xl ring-1 ring-slate-200/70 dark:ring-dark-700'>
+        <CardBox id='business-info' className='mb-6 border-0 shadow-xl ring-1 ring-slate-200/70 dark:ring-dark-700'>
           <div className='mb-5 flex flex-wrap items-start justify-between gap-4'>
             <div>
               <p className='text-sm font-bold uppercase tracking-[0.25em] text-emerald-500'>Step 1</p>
               <h3 className='mt-1 text-2xl font-black text-slate-900 dark:text-white'>Business info</h3>
               <p className='mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400'>
-                This tells the app who the business is and which workflow type should be shown. For your logistics/transportation app, most companies will usually start as Local or Hybrid.
+                Add the business profile the same way the Businesses &gt; Add Business page collects it. Grow accounts can save one business profile; Pro accounts can add more based on the plan limit.
               </p>
             </div>
-            <BaseButton icon={mdiRefresh} label='Refresh' color='whiteDark' onClick={loadData} disabled={isLoading} />
+            <BaseButton icon={mdiRefresh} label='Refresh' color='whiteDark' onClick={() => loadData()} disabled={isLoading} />
           </div>
 
-          {businesses.length > 0 && (
-            <FormField label='Business profile' help='Choose the company/location you want to configure.'>
-              <select value={selectedBusinessId} onChange={(event) => selectBusiness(event.target.value)}>
-                {businesses.map((business) => (
-                  <option key={business.id} value={business.id}>{business.name || 'Business'}</option>
-                ))}
-              </select>
-            </FormField>
+          <div className='mb-5 rounded-2xl border border-indigo-100 bg-indigo-50 p-4 text-sm leading-6 text-indigo-950 dark:border-indigo-900 dark:bg-indigo-950/30 dark:text-indigo-100'>
+            <strong>{businessLimitText}</strong>{' '}
+            {isMultiBusinessPlan
+              ? `You currently have ${businessCount} saved ${businessCount === 1 ? 'business' : 'businesses'}.`
+              : 'Use the Edit button to update your existing Grow business profile.'}
+          </div>
+
+          {!businessInfoEditing && selectedBusiness ? (
+            <div className='rounded-3xl border border-emerald-200 bg-emerald-50 p-5 text-emerald-950 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-50'>
+              <div className='flex flex-wrap items-start justify-between gap-4'>
+                <div>
+                  <p className='text-sm font-black uppercase tracking-[0.25em] text-emerald-700 dark:text-emerald-300'>Saved business summary</p>
+                  <h4 className='mt-1 text-2xl font-black'>{settingsForm.businessName || selectedBusiness.name || 'Business'}</h4>
+                  <p className='mt-2 max-w-2xl text-sm leading-6'>
+                    This is the business profile that payment connections, review links, and automated review requests will use.
+                  </p>
+                </div>
+                <div className='flex flex-wrap gap-2'>
+                  <BaseButton label='Edit' color='whiteDark' onClick={() => setBusinessInfoEditing(true)} />
+                  {isMultiBusinessPlan && (
+                    <BaseButton label='Add Another Business' color='info' onClick={startNewBusinessProfile} disabled={!canAddAnotherBusiness} />
+                  )}
+                </div>
+              </div>
+
+              {businesses.length > 1 && (
+                <div className='mt-5 rounded-2xl bg-white/80 p-4 shadow-sm dark:bg-dark-900/60'>
+                  <FormField label='Business profile' help='Choose another saved company/location to configure.'>
+                    <select value={selectedBusinessId} onChange={(event) => selectBusiness(event.target.value)}>
+                      {businesses.map((business) => (
+                        <option key={business.id} value={business.id}>{business.name || 'Business'}</option>
+                      ))}
+                    </select>
+                  </FormField>
+                </div>
+              )}
+
+              <div className='mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-3'>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Owner</p>
+                  <p className='mt-1'>{ownerLabel}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Business type</p>
+                  <p className='mt-1'>{getBusinessTypeLabel(currentBusinessType)}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Active</p>
+                  <p className='mt-1'>{settingsForm.isActive ? 'Yes' : 'No'}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Review delay days</p>
+                  <p className='mt-1'>{settingsForm.delayDays || 'Not set'}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Default review platform</p>
+                  <p className='mt-1'>{getDefaultReviewPlatformLabel(settingsForm.defaultReviewPlatform)}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Stripe connected</p>
+                  <p className='mt-1'>{settingsForm.stripeConnected ? 'Yes' : 'No'}</p>
+                </div>
+              </div>
+
+              <div className='mt-5 grid gap-3 md:grid-cols-2'>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Review links</p>
+                  <p className='mt-2 break-all'>Google: {settingsForm.googleReviewLink || 'Not set'}</p>
+                  <p className='mt-1 break-all'>Yelp: {settingsForm.yelpReviewLink || 'Not set'}</p>
+                  <p className='mt-1 break-all'>Facebook: {settingsForm.facebookReviewLink || 'Not set'}</p>
+                  <p className='mt-1 break-all'>Custom: {settingsForm.customReviewLink || 'Not set'}</p>
+                </div>
+                <div className='rounded-2xl bg-white/80 p-4 text-sm shadow-sm dark:bg-dark-900/60'>
+                  <p className='font-black'>Stripe details</p>
+                  <p className='mt-2 break-all'>Account reference: {settingsForm.stripeAccountReference || 'Not set'}</p>
+                  <p className='mt-1'>Connected at: {settingsForm.stripeConnectedAt ? formatDate(settingsForm.stripeConnectedAt) : 'Not set'}</p>
+                  {!canAddAnotherBusiness && isMultiBusinessPlan && (
+                    <p className='mt-3 text-xs font-bold opacity-80'>Business limit reached for this plan.</p>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div>
+              {isCreatingBusinessProfile ? (
+                <div className='mb-5 rounded-2xl border border-dashed border-emerald-300 bg-emerald-50 p-4 text-sm font-bold text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950/30 dark:text-emerald-100'>
+                  New business profile. Save this form to create the summary box before connecting payment systems.
+                </div>
+              ) : businesses.length > 0 && (
+                <FormField label='Business profile' help='Choose the company/location you want to configure.'>
+                  <select value={selectedBusinessId} onChange={(event) => selectBusiness(event.target.value)}>
+                    {businesses.map((business) => (
+                      <option key={business.id} value={business.id}>{business.name || 'Business'}</option>
+                    ))}
+                  </select>
+                </FormField>
+              )}
+
+              <FormField label='Owner' labelFor='ownerId'>
+                <select id='ownerId' value={settingsForm.ownerId || currentUser?.id || ''} onChange={(event) => updateSettings('ownerId', event.target.value)}>
+                  <option value={settingsForm.ownerId || currentUser?.id || ''}>{ownerLabel}</option>
+                </select>
+              </FormField>
+
+              <FormField label='Business name'>
+                <input
+                  required
+                  value={settingsForm.businessName}
+                  onChange={(event) => updateSettings('businessName', event.target.value)}
+                  placeholder='Business name'
+                />
+              </FormField>
+
+              <FormField label='Business type' labelFor='businessType' help='Choose Local, Online, or Hybrid so Review Flow hides irrelevant setup options.'>
+                <select id='businessType' value={settingsForm.businessType} onChange={(event) => updateSettings('businessType', event.target.value)}>
+                  {businessTypeOptions.map((option) => (
+                    <option key={option.key} value={option.key}>{option.label}</option>
+                  ))}
+                </select>
+              </FormField>
+
+              <FormField label='Google review link'>
+                <input value={settingsForm.googleReviewLink} onChange={(event) => updateSettings('googleReviewLink', event.target.value)} placeholder='Google review link' />
+              </FormField>
+
+              <FormField label='Yelp review link'>
+                <input value={settingsForm.yelpReviewLink} onChange={(event) => updateSettings('yelpReviewLink', event.target.value)} placeholder='Yelp review link' />
+              </FormField>
+
+              <FormField label='Facebook review link'>
+                <input value={settingsForm.facebookReviewLink} onChange={(event) => updateSettings('facebookReviewLink', event.target.value)} placeholder='Facebook review link' />
+              </FormField>
+
+              <FormField label='Review delay days'>
+                <input
+                  type='number'
+                  value={settingsForm.delayDays}
+                  onChange={(event) => updateSettings('delayDays', event.target.value)}
+                  placeholder='Review delay days'
+                />
+              </FormField>
+
+              <FormField label='Email subject template'>
+                <input value={settingsForm.emailSubjectTemplate} onChange={(event) => updateSettings('emailSubjectTemplate', event.target.value)} placeholder='Email subject template' />
+              </FormField>
+
+              <FormField label='Email body template' hasTextareaHeight>
+                <textarea value={settingsForm.emailBodyTemplate} onChange={(event) => updateSettings('emailBodyTemplate', event.target.value)} placeholder='Email body template' />
+              </FormField>
+
+              <label className='mb-4 flex gap-3 rounded-2xl border border-slate-200 p-4 text-sm dark:border-dark-700'>
+                <input type='checkbox' checked={settingsForm.isActive} onChange={(event) => updateSettings('isActive', event.target.checked)} />
+                <span>
+                  <span className='block font-black text-slate-900 dark:text-white'>Active</span>
+                  <span className='mt-1 block leading-5 text-slate-500 dark:text-slate-400'>When active, this profile can be used by setup workflows and automated review requests.</span>
+                </span>
+              </label>
+
+              <FormField label='Stripe account reference'>
+                <input value={settingsForm.stripeAccountReference} onChange={(event) => updateSettings('stripeAccountReference', event.target.value)} placeholder='Stripe account reference' />
+              </FormField>
+
+              <label className='mb-4 flex gap-3 rounded-2xl border border-slate-200 p-4 text-sm dark:border-dark-700'>
+                <input type='checkbox' checked={settingsForm.stripeConnected} onChange={(event) => updateSettings('stripeConnected', event.target.checked)} />
+                <span>
+                  <span className='block font-black text-slate-900 dark:text-white'>Stripe connected</span>
+                  <span className='mt-1 block leading-5 text-slate-500 dark:text-slate-400'>Use this only if this business already has a Stripe connection.</span>
+                </span>
+              </label>
+
+              <FormField label='Stripe connected at'>
+                <input type='datetime-local' value={settingsForm.stripeConnectedAt} onChange={(event) => updateSettings('stripeConnectedAt', event.target.value)} placeholder='Stripe connected at' />
+              </FormField>
+
+              <FormField label='Default review platform' labelFor='defaultReviewPlatform'>
+                <select id='defaultReviewPlatform' value={settingsForm.defaultReviewPlatform} onChange={(event) => updateSettings('defaultReviewPlatform', event.target.value)}>
+                  <option value='google'>google</option>
+                  <option value='yelp'>yelp</option>
+                  <option value='facebook'>facebook</option>
+                  <option value='custom'>custom</option>
+                </select>
+              </FormField>
+
+              <FormField label='Custom review link'>
+                <input value={settingsForm.customReviewLink} onChange={(event) => updateSettings('customReviewLink', event.target.value)} placeholder='Custom review link' />
+              </FormField>
+
+              <div className='mt-6 flex flex-wrap gap-3 border-t border-slate-100 pt-5 dark:border-dark-700'>
+                <BaseButton label={isSaving ? 'Saving business...' : 'Save Business Info'} color='info' onClick={() => saveSettings({ collapseBusinessInfo: true })} disabled={isSaving} />
+                <BaseButton
+                  label='Reset'
+                  color='info'
+                  outline
+                  onClick={() => {
+                    if (isCreatingBusinessProfile) {
+                      const blankSettings = getBlankBusinessSettings(currentUser?.id || '');
+                      setSettingsForm(blankSettings);
+                      setSelectedReviewDestinations(['google']);
+                      setReviewOutputFinished(false);
+                      return;
+                    }
+
+                    if (selectedBusiness) {
+                      const nextSettings = businessToSettings(selectedBusiness);
+                      const nextSelectedDestinations = getSelectedDestinationsFromSettings(nextSettings);
+                      setSettingsForm(nextSettings);
+                      setSelectedReviewDestinations(nextSelectedDestinations);
+                      setReviewOutputFinished(getReviewOutputIsComplete(nextSettings, nextSelectedDestinations));
+                    }
+                  }}
+                />
+                <BaseButton label='Cancel' color='danger' outline onClick={() => selectedBusiness ? setBusinessInfoEditing(false) : loadData()} />
+              </div>
+            </div>
           )}
-
-          <FormField label='Company and workflow type' help={businessTypeOptions.find((option) => option.key === currentBusinessType)?.help}>
-            <input
-              required
-              value={settingsForm.businessName}
-              onChange={(event) => updateSettings('businessName', event.target.value)}
-              placeholder='Business name'
-            />
-            <select value={settingsForm.businessType} onChange={(event) => updateSettings('businessType', event.target.value)}>
-              {businessTypeOptions.map((option) => (
-                <option key={option.key} value={option.key}>{option.label}</option>
-              ))}
-            </select>
-          </FormField>
-
-          <FormField label='Default request timing' help='These defaults are used by automated requests created from payment/order triggers.'>
-            <input
-              min='0'
-              max='30'
-              type='number'
-              value={settingsForm.delayDays}
-              onChange={(event) => updateSettings('delayDays', event.target.value)}
-              placeholder='Initial delay days'
-            />
-            <input
-              min='1'
-              max='30'
-              type='number'
-              value={settingsForm.followupDelayDays}
-              onChange={(event) => updateSettings('followupDelayDays', event.target.value)}
-              placeholder='Follow-up delay days'
-            />
-            <input
-              min='0'
-              max='5'
-              type='number'
-              value={settingsForm.maxFollowups}
-              onChange={(event) => updateSettings('maxFollowups', event.target.value)}
-              placeholder='Max follow-ups'
-            />
-          </FormField>
-
-          <label className='mb-2 flex gap-3 rounded-2xl border border-slate-200 p-4 text-sm dark:border-dark-700'>
-            <input
-              type='checkbox'
-              checked={settingsForm.followupEnabled}
-              onChange={(event) => updateSettings('followupEnabled', event.target.checked)}
-            />
-            <span>
-              <span className='block font-black text-slate-900 dark:text-white'>Enable follow-ups</span>
-              <span className='mt-1 block leading-5 text-slate-500 dark:text-slate-400'>Prepare follow-up handoffs for customers who have not clicked the first request.</span>
-            </span>
-          </label>
         </CardBox>
 
         <div className='mb-6'>
@@ -773,7 +1101,12 @@ export default function SetupPage() {
             eyebrow='Step 2'
             title='Payment system connect'
             description='Connect the payment/order provider that should trigger review requests automatically after completed jobs, payments, or orders.'
+            initialBusinessId={selectedBusinessId || selectedBusiness?.id || ''}
+            initialBusinessName={settingsForm.businessName}
             initialBusinessType={currentBusinessType}
+            initialReviewDestination={primaryReviewDestinationKey}
+            initialReviewLink={selectedDestinationField ? String(settingsForm[selectedDestinationField as SetupSettingsKey] || '') : ''}
+            initialDelayDays={settingsForm.delayDays}
             onConnected={handleProviderConnected}
           />
         </div>