On this page

Действия после установки и онбординг

Действия после установки определяют, что происходит сразу после установки пользователем Stripe App. Грамотно спроектированный опыт после установки направляет пользователей через настройку и повышает показатели активации.

Типы действий после установки

Stripe поддерживает четыре типа действий после установки, каждый из которых настраивается в манифесте приложения:

1. Ссылка на приложение (по умолчанию)

Открывает приложение в вьюпорте drawer по умолчанию:

{
  "post_install_action": {
    "type": "default"
  }
}

2. Ссылка на онбординг

Открывает специальное представление онбординга для сфокусированного опыта настройки:

{
  "post_install_action": {
    "type": "onboarding"
  }
}

Требует объявления вьюпорта onboarding в манифесте:

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  },
  "post_install_action": {
    "type": "onboarding"
  }
}

3. Ссылка на настройки

Открывает представление настроек, полезно, когда для использования требуются API-ключи:

{
  "post_install_action": {
    "type": "settings"
  }
}

4. Ссылка на внешний URL

Перенаправляет на внешний URL для настройки:

{
  "post_install_action": {
    "type": "external",
    "url": "https://app.tajo.io/stripe/setup"
  }
}

Caution

Внешние URL должны использовать HTTPS и должны быть указаны в allowed_redirect_uris. Команда проверки Stripe убедится, что внешний URL обеспечивает функциональный опыт настройки.

Лучшие практики онбординга

Сделайте его простым

Минимизируйте количество шагов для начала работы:

Предзаполняйте информацию из контекста аккаунта Stripe
Используйте разумные значения по умолчанию для параметров настройки
Разрешайте пропуск необязательных шагов с возможностью завершить их позже
Показывайте прогресс с индикаторами шагов для многоэтапных потоков

Сделайте его настраиваемым

Маппинг данных, дайте пользователям выбрать, какие поля Stripe синхронизировать с Brevo
Частота синхронизации, предлагайте варианты в реальном времени, ежечасно или ежедневно
Выборочная синхронизация, позвольте выбирать покупателей или товары для синхронизации

Покажите ценность немедленно

Предпросмотр синхронизируемых данных перед включением интеграции
Покажите тестовую синхронизацию для проверки подключения
Отобразите метрики успеха после первичной синхронизации

Компонент OnboardingView

import {
  Box,
  Button,
  Inline,
  Icon,
  Banner,
  TextField,
  Select,
  Divider,
} from '@stripe/ui-extension-sdk/ui';
import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';
import { useState } from 'react';

const OnboardingView = ({ environment, userContext }: ExtensionContextValue) => {
  const [step, setStep] = useState(1);
  const [brevoApiKey, setBrevoApiKey] = useState('');
  const [syncMode, setSyncMode] = useState('realtime');
  const [isConnecting, setIsConnecting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const totalSteps = 3;

  const handleConnect = async () => {
    setIsConnecting(true);
    setError(null);

    try {
      // Store the API key securely
      await storeBrevoApiKey(brevoApiKey);

      // Verify the connection
      const result = await verifyBrevoConnection(brevoApiKey);

      if (result.success) {
        setStep(2);
      } else {
        setError('Unable to connect to Brevo. Please check your API key.');
      }
    } catch (err) {
      setError('Connection failed. Please try again.');
    } finally {
      setIsConnecting(false);
    }
  };

  return (
    <Box css={{ padding: 'large' }}>
      {/* Progress indicator */}
      <Inline css={{ marginBottom: 'large' }}>
        Step {step} of {totalSteps}
      </Inline>

      {error && (
        <Banner type="critical" title="Connection Error">
          {error}
        </Banner>
      )}

      {step === 1 && (
        <Box>
          <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
            Connect Your Brevo Account
          </Inline>
          <Inline css={{ marginTop: 'small', color: 'secondary' }}>
            Enter your Brevo API key to start syncing customer data.
          </Inline>

          <TextField
            label="Brevo API Key"
            placeholder="xkeysib-..."
            value={brevoApiKey}
            onChange={(e) => setBrevoApiKey(e.target.value)}
            css={{ marginTop: 'medium' }}
          />

          <Button
            type="primary"
            onPress={handleConnect}
            disabled={!brevoApiKey || isConnecting}
            css={{ marginTop: 'medium' }}
          >
            {isConnecting ? 'Connecting...' : 'Connect Brevo'}
          </Button>
        </Box>
      )}

      {step === 2 && (
        <Box>
          <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
            Configure Sync Settings
          </Inline>

          <Select
            label="Sync Mode"
            value={syncMode}
            onChange={(value) => setSyncMode(value)}
            css={{ marginTop: 'medium' }}
          >
            <option value="realtime">Real-time (recommended)</option>
            <option value="hourly">Every hour</option>
            <option value="daily">Once per day</option>
          </Select>

          <Button type="primary" onPress={() => setStep(3)}>
            Continue
          </Button>
        </Box>
      )}

      {step === 3 && (
        <Box>
          <Banner type="default" title="Ready to Sync">
            Your Brevo account is connected. Tajo will begin syncing
            customer data automatically.
          </Banner>
        </Box>
      )}
    </Box>
  );
};

export default OnboardingView;

Обработка возвращающихся пользователей

Когда пользователь открывает приложение после онбординга, определяйте его состояние и показывайте соответствующее представление:

const MainView = ({ environment, userContext }: ExtensionContextValue) => {
  const [authState, setAuthState] = useState<'loading' | 'signed-out' | 'onboarding' | 'ready'>('loading');

  useEffect(() => {
    checkUserState().then((state) => {
      setAuthState(state);
    });
  }, []);

  switch (authState) {
    case 'loading':
      return <Spinner label="Loading..." />;
    case 'signed-out':
      return <SignInView onSignInComplete={() => setAuthState('onboarding')} />;
    case 'onboarding':
      return <OnboardingView onComplete={() => setAuthState('ready')} />;
    case 'ready':
      return <DashboardView />;
  }
};

Tip

Сохраняйте статус завершения онбординга в Stripe Secret Store, чтобы определять возвращающихся пользователей без внешнего API-вызова.