Zatražite rani pristup

Unesite ime i imejl adresu ili broj telefona. Poslaćemo vam detalje o pristupu platformi Tajo.

Na ovoj stranici

Radnje nakon instalacije i uvodni proces

Radnje nakon instalacije određuju šta se dešava odmah nakon što korisnik instalira vašu Stripe aplikaciju. Dobro osmišljeno iskustvo nakon instalacije vodi korisnike kroz podešavanje i povećava stopu aktivacije.

Tipovi radnji nakon instalacije

Stripe podržava četiri tipa radnji nakon instalacije, a svaki se konfiguriše u manifestu vaše aplikacije:

1. Link ka aplikaciji (podrazumevano)

Otvara aplikaciju u podrazumevanom prikazu u fioci. Ovo je podrazumevano ponašanje ako nije naveden post_install_action:

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

Korisnik vidi prikaz drawer.default aplikacije u bočnoj traci Stripe komandne table.

2. Link ka uvodnom procesu

Otvara namenski uvodni prikaz aplikacije i pruža fokusirano iskustvo podešavanja:

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

Ovo zahteva prikaz onboarding deklarisan u vašem manifestu:

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

3. Link ka podešavanjima

Otvara prikaz podešavanja aplikacije, što je korisno kada aplikacija zahteva API ključeve ili konfiguraciju pre upotrebe:

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

Ovo zahteva prikaz settings:

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

4. Link ka spoljnom URL-u

Preusmerava korisnika na spoljni URL radi podešavanja. Koristite ovo kada se vaš uvodni tok nalazi izvan Stripe komandne table:

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

Caution

Spoljni URL-ovi moraju da koriste HTTPS i treba da budu navedeni u allowed_redirect_uris. Stripe tim za proveru će potvrditi da spoljni URL pruža funkcionalno iskustvo podešavanja.

Najbolje prakse za uvodni proces

Neka bude bez napora

Svedite broj koraka potrebnih za početak na najmanju meru:

  • Unapred popunite informacije dostupne iz konteksta Stripe naloga
  • Koristite razumne podrazumevane vrednosti za opcije konfiguracije
  • Omogućite preskakanje opcionih koraka uz jasan način da se dovrše kasnije
  • Prikažite napredak pomoću indikatora koraka za tokove sa više koraka

Neka bude prilagodljiv

Dozvolite korisnicima da konfigurišu integraciju prema svojim potrebama:

  • Opcije mapiranja podataka, dozvolite korisnicima da izaberu koja se Stripe polja sinhronizuju sa Brevom
  • Učestalost sinhronizacije, ponudite sinhronizaciju u realnom vremenu, na sat ili dnevno
  • Selektivna sinhronizacija, dozvolite korisnicima da izaberu koje kupce ili proizvode sinhronizuju
  • Podešavanja obaveštenja, konfigurišite upozorenja za greške u sinhronizaciji ili važne događaje

Neka bude relevantan

Pokažite vrednost odmah:

  • Prikažite pregled sinhronizovanih podataka pre nego što se integracija uključi
  • Pokažite šta će se desiti kada korisnik dovrši podešavanje
  • Ponudite probnu sinhronizaciju radi provere da veza radi
  • Prikažite pokazatelje uspeha nakon što se prva sinhronizacija završi

Komponenta OnboardingView

Komponenta OnboardingView se prikazuje u fokusiranom modalnom prozoru kada korisnik instalira aplikaciju:

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' }}
          />


          <Inline css={{ marginTop: 'xsmall', color: 'secondary', fontSize: 'small' }}>
            Find your API key in Brevo under Settings &gt; SMTP &amp; API &gt; API Keys
          </Inline>


          <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>


          <Divider css={{ marginY: 'medium' }} />


          <Button type="primary" onPress={() => setStep(3)}>
            Continue
          </Button>
          <Button type="secondary" onPress={() => setStep(1)}>
            Back
          </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 css={{ marginTop: 'medium' }}>
            <Inline css={{ fontWeight: 'bold' }}>What happens next:</Inline>
            <ul>
              <li>Existing Stripe customers will sync to Brevo contacts</li>
              <li>New customers and events will sync in real-time</li>
              <li>View sync status on any customer's detail page</li>
            </ul>
          </Box>


          <Button type="primary" onPress={() => {/* Navigate to dashboard */}}>
            Go to Dashboard
          </Button>
        </Box>
      )}
    </Box>
  );
};


export default OnboardingView;

Tok prijave sa komponentom SignInView

Ako vaša aplikacija zahteva da se korisnici prijave na spoljni nalog (kao što je Tajo), koristite namenski prikaz za prijavu:

import {
  Box,
  Button,
  Inline,
  TextField,
  Banner,
  Link,
} from '@stripe/ui-extension-sdk/ui';
import { useState } from 'react';


const SignInView = ({ onSignInComplete }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);


  const handleSignIn = async () => {
    setIsLoading(true);
    setError(null);


    try {
      const response = await fetch('https://api.tajo.io/v1/auth/stripe-app', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });


      if (!response.ok) {
        throw new Error('Invalid credentials');
      }


      const { token } = await response.json();


      // Store the auth token securely in Stripe's Secret Store
      await storeAuthToken(token);


      onSignInComplete();
    } catch (err) {
      setError('Sign-in failed. Please check your credentials and try again.');
    } finally {
      setIsLoading(false);
    }
  };


  return (
    <Box css={{ padding: 'large' }}>
      <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
        Sign in to Tajo
      </Inline>
      <Inline css={{ marginTop: 'small', color: 'secondary' }}>
        Connect your Tajo account to enable Brevo sync.
      </Inline>


      {error && (
        <Banner type="critical" title="Sign-in Failed">
          {error}
        </Banner>
      )}


      <TextField
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        css={{ marginTop: 'medium' }}
      />


      <TextField
        label="Password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        css={{ marginTop: 'small' }}
      />


      <Button
        type="primary"
        onPress={handleSignIn}
        disabled={!email || !password || isLoading}
        css={{ marginTop: 'medium' }}
      >
        {isLoading ? 'Signing in...' : 'Sign In'}
      </Button>


      <Link href="https://app.tajo.io/signup" external css={{ marginTop: 'small' }}>
        Don't have a Tajo account? Sign up
      </Link>
    </Box>
  );
};

Pokretanje preko dubokih linkova sa parametrima upita

Možete pokrenuti određene korake uvodnog procesa ili unapred popuniti podatke pomoću parametara upita u dubokim linkovima:

import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';


const OnboardingView = ({ environment }: ExtensionContextValue) => {
  // Access query parameters from the deep link
  const { queryParams } = environment;


  // Pre-fill step from query parameter
  const initialStep = queryParams?.step ? parseInt(queryParams.step) : 1;


  // Pre-fill API key from query parameter (e.g., from Tajo dashboard)
  const prefilledApiKey = queryParams?.brevo_key || '';


  // Source tracking for analytics
  const installSource = queryParams?.source || 'marketplace';


  const [step, setStep] = useState(initialStep);
  const [brevoApiKey, setBrevoApiKey] = useState(prefilledApiKey);


  // ... rest of onboarding logic
};

Generišite duboke linkove koji unapred popunjavaju podatke uvodnog procesa:

// From your Tajo dashboard, generate a link that pre-fills the Brevo API key
const onboardingLink = [
  'https://dashboard.stripe.com/live/acct_xxxxx/dashboard',
  '?apps[com.tajo.brevo-integration][modal]=stripe.dashboard.onboarding',
  '&apps[com.tajo.brevo-integration][queryParams][step]=1',
  '&apps[com.tajo.brevo-integration][queryParams][source]=tajo_dashboard',
].join('');

Rad sa korisnicima koji se vraćaju

Kada korisnik otvori vašu aplikaciju nakon završenog uvodnog procesa, otkrijte njegovo stanje i prikažite odgovarajući prikaz:

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

Čuvajte status završetka uvodnog procesa u Stripe Secret Store-u kako biste prepoznali korisnike koji se vraćaju bez poziva spoljnom API-ju.

Zatražite rani pristup

Unesite ime i imejl adresu ili broj telefona. Poslaćemo vam detalje o pristupu platformi Tajo.

automatsko prepoznavanje
AI asistent

Zdravo! Pitajte me o dokumentaciji.