---
title: "Dejanja po namestitvi in uvajanje | Tajo"
description: "Nastavite vedenje po namestitvi in zgradite učinkovite uvajalne procese za svojo aplikacijo Stripe App"
url: https://tajo.io/sl/docs/stripe-apps/post-install/
markdown: https://tajo.io/sl/docs/stripe-apps/post-install.md
lang: sl-SI
author: "Set Noa"
author_url: https://tajo.io/sl/set-noa/
robots: noindex
---

Zaprosite za zgodnji dostop

Vnesite svoje ime in službeni e-poštni naslov. Poslali vam bomo povezavo za potrditev zahteve za dostop do Taja.

# Dejanja po namestitvi in uvajanje

[Set Noa](https://tajo.io/sl/set-noa/)

Dejanja po namestitvi določajo, kaj se zgodi takoj po tem, ko uporabnik namesti vašo aplikacijo Stripe App. Dobro zasnovana izkušnja po namestitvi uporabnika popelje skozi nastavitev in zviša stopnjo aktivacije.

Caution

**Stanje: načrtovano, ne izdelano.** Tajo nima aplikacije Stripe, zato danes ničesar iz tega razdelka ni mogoče namestiti. Identifikatorji aplikacije, naslovi URL in poverilnice na tej strani so ponazoritvena nadomestila, ne delujoče končne točke.

## Tipi dejanj po namestitvi

Stripe podpira štiri tipe dejanj po namestitvi, vsakega nastavite v manifestu svoje aplikacije:

### 1. Povezava do aplikacije (privzeto)

Odpre aplikacijo v privzetem viewportu predala. To je privzeto vedenje, če dejanje `post_install_action` ni navedeno:

```json
{
  "post_install_action": {
    "type": "default"
  }
}
```

Uporabnik vidi viewport `drawer.default` aplikacije v stranski vrstici vmesnika Stripe Dashboard.

### 2. Povezava do uvajanja

Odpre namenski uvajalni pogled aplikacije in ponudi osredotočeno izkušnjo nastavitve:

```json
{
  "post_install_action": {
    "type": "onboarding"
  }
}
```

Za to morate v manifestu napovedati viewport `onboarding`:

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

### 3. Povezava do nastavitev

Odpre pogled z nastavitvami aplikacije, kar je uporabno, kadar aplikacija pred uporabo zahteva ključe API ali konfiguracijo:

```json
{
  "post_install_action": {
    "type": "settings"
  }
}
```

Za to morate napovedati viewport `settings`:

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

### 4. Povezava do zunanjega naslova URL

Uporabnika preusmeri na zunanji naslov URL za nastavitev. To uporabite, kadar vaš uvajalni proces poteka zunaj vmesnika Stripe Dashboard:

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

Caution

Zunanji naslovi URL morajo uporabljati HTTPS in naj bodo navedeni med `allowed_redirect_uris`. Pregledovalna ekipa Stripe bo preverila, ali zunanji naslov URL ponuja delujočo izkušnjo nastavitve.

## Najboljše prakse pri uvajanju

### Naj bo brez napora

Zmanjšajte število korakov, potrebnih za začetek:

- **Vnaprej izpolnite podatke**, ki so na voljo iz konteksta računa Stripe
- **Uporabite smiselne privzete vrednosti** za možnosti konfiguracije
- **Dovolite preskok** neobveznih korakov z jasno potjo, da jih uporabnik dokonča pozneje
- **Prikažite napredek** s kazalniki korakov pri večkoračnih procesih

### Naj bo prilagodljivo

Uporabnikom omogočite, da integracijo prilagodijo svojim potrebam:

- **Možnosti preslikave podatkov**, uporabniki naj izberejo, katera polja Stripe se sinhronizirajo z Brevom
- **Pogostost sinhronizacije**, ponudite sinhronizacijo na uro ali na dan
- **Izbirna sinhronizacija**, uporabniki naj izberejo, katere stranke ali izdelke želijo sinhronizirati
- **Nastavitve obveščanja**, nastavite opozorila za napake sinhronizacije ali pomembne dogodke

### Naj bo relevantno

Vrednost pokažite takoj:

- **Predoglejte sinhronizirane podatke**, preden vklopite integracijo
- **Pokažite, kaj se bo zgodilo**, ko uporabnik dokonča nastavitev
- **Ponudite preizkusno sinhronizacijo**, da uporabnik preveri delovanje povezave
- **Prikažite meritve uspeha**, ko se začetna sinhronizacija dokonča

## Komponenta OnboardingView

Komponenta `OnboardingView` se izriše v osredotočenem modalnem oknu, ko uporabnik namesti aplikacijo:

```typescript
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('hourly');
  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="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 will sync on the schedule you chose</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;
```

## Postopek prijave s komponento SignInView

Če vaša aplikacija od uporabnikov zahteva prijavo v zunanji račun (na primer Tajo), uporabite namenski pogled za prijavo:

```typescript
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.example.com/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>
  );
};
```

## Zagon globoke povezave s parametri poizvedbe

Z uporabo parametrov poizvedbe v globokih povezavah lahko zaženete določene uvajalne korake ali vnaprej izpolnite podatke:

```typescript
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
};
```

Ustvarite globoke povezave, ki vnaprej izpolnijo uvajalne podatke:

```javascript
// 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('');
```

## Obravnava vračajočih se uporabnikov

Ko uporabnik odpre vašo aplikacijo po zaključenem uvajanju, zaznajte njegovo stanje in prikažite ustrezen pogled:

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

Stanje zaključenega uvajanja shranite v Stripe Secret Store, da lahko vračajoče se uporabnike zaznate brez klica zunanjega API-ja.