---
title: "इंस्टॉल के बाद की कार्रवाइयां और ऑनबोर्डिंग | Tajo"
description: "अपने Stripe App के लिए इंस्टॉलेशन के बाद का व्यवहार कॉन्फ़िगर करें और असरदार ऑनबोर्डिंग फ़्लो बनाएं"
url: https://tajo.io/hi/docs/stripe-apps/post-install/
markdown: https://tajo.io/hi/docs/stripe-apps/post-install.md
lang: hi-IN
author: "Set Noa"
author_url: https://tajo.io/hi/set-noa/
robots: noindex
---

अर्ली एक्सेस का अनुरोध करें

अपना पहला नाम और कार्यस्थल का ईमेल पता दर्ज करें। Tajo एक्सेस अनुरोध की पुष्टि के लिए हम आपको एक लिंक ईमेल करेंगे।

# इंस्टॉल के बाद की कार्रवाइयां और ऑनबोर्डिंग

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

इंस्टॉल के बाद की कार्रवाइयां तय करती हैं कि यूज़र के आपका Stripe App इंस्टॉल करते ही क्या होगा. अच्छी तरह डिज़ाइन किया गया पोस्ट-इंस्टॉल अनुभव यूज़र को सेटअप के दौरान राह दिखाता है और एक्टिवेशन दर बढ़ाता है.

Caution

**स्थिति: नियोजित, अभी बना नहीं.** Tajo के पास कोई Stripe App नहीं है, इसलिए इस सेक्शन में से आज कुछ भी इंस्टॉल नहीं किया जा सकता. इस पेज पर दिए गए ऐप आइडेंटिफ़ायर, URL और क्रेडेंशियल उदाहरण के लिए रखे गए प्लेसहोल्डर हैं, लाइव एंडपॉइंट नहीं.

## इंस्टॉल के बाद की कार्रवाइयों के प्रकार

Stripe इंस्टॉल के बाद चार तरह की कार्रवाइयों का समर्थन करता है, और हर एक आपके ऐप मैनिफ़ेस्ट में कॉन्फ़िगर होती है:

### 1. ऐप का लिंक (डिफ़ॉल्ट)

ऐप को डिफ़ॉल्ट ड्रॉअर व्यूपोर्ट में खोलता है. अगर कोई `post_install_action` तय नहीं किया गया है तो यही डिफ़ॉल्ट व्यवहार होता है:

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

यूज़र को Stripe Dashboard के साइडबार में ऐप का `drawer.default` व्यूपोर्ट दिखता है.

### 2. ऑनबोर्डिंग का लिंक

ऐप का समर्पित ऑनबोर्डिंग व्यू खोलता है, जिससे सेटअप का अनुभव एक ही जगह केंद्रित रहता है:

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

इसके लिए आपके मैनिफ़ेस्ट में `onboarding` व्यूपोर्ट घोषित होना ज़रूरी है:

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

### 3. सेटिंग्स का लिंक

ऐप का सेटिंग्स व्यू खोलता है, जो तब काम आता है जब इस्तेमाल से पहले ऐप को API कीज़ या कॉन्फ़िगरेशन चाहिए:

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

इसके लिए `settings` व्यूपोर्ट ज़रूरी है:

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

### 4. बाहरी URL का लिंक

यूज़र को सेटअप के लिए किसी बाहरी URL पर भेजता है. इसका इस्तेमाल तब करें जब आपका ऑनबोर्डिंग फ़्लो Stripe Dashboard के बाहर हो:

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

Caution

बाहरी URL के लिए HTTPS ज़रूरी है और उन्हें आपके `allowed_redirect_uris` में शामिल होना चाहिए. Stripe की समीक्षा टीम यह जांचेगी कि बाहरी URL पर सेटअप का अनुभव सचमुच काम करता है.

## ऑनबोर्डिंग की सर्वोत्तम प्रथाएं

### इसे आसान बनाएं

शुरुआत करने के लिए ज़रूरी चरणों की संख्या कम से कम रखें:

- Stripe अकाउंट के संदर्भ से मिलने वाली **जानकारी पहले से भरें**
- कॉन्फ़िगरेशन विकल्पों के लिए **समझदार डिफ़ॉल्ट रखें**
- वैकल्पिक चरणों को **छोड़ने की सुविधा दें**, साथ में उन्हें बाद में पूरा करने का साफ़ रास्ता भी
- कई चरणों वाले फ़्लो में स्टेप इंडिकेटर के साथ **प्रगति दिखाएं**

### इसे अनुकूलन योग्य बनाएं

यूज़र को इंटीग्रेशन अपनी ज़रूरत के मुताबिक ढालने दें:

- **डेटा मैपिंग विकल्प**, यूज़र चुनें कि Stripe के कौन से फ़ील्ड Brevo में सिंक हों
- **सिंक की आवृत्ति**, हर घंटे या रोज़ाना सिंक के विकल्प दें
- **चुनिंदा सिंक**, यूज़र चुनें कि कौन से ग्राहक या प्रोडक्ट सिंक होंगे
- **नोटिफ़िकेशन प्राथमिकताएं**, सिंक की गड़बड़ियों या अहम इवेंट के लिए अलर्ट कॉन्फ़िगर करें

### इसे प्रासंगिक बनाएं

वैल्यू तुरंत दिखाएं:

- इंटीग्रेशन चालू करने से पहले **सिंक होने वाले डेटा का पूर्वावलोकन दें**
- **बताएं कि क्या होगा** जब यूज़र सेटअप पूरा करेगा
- कनेक्शन काम कर रहा है यह पुष्टि करने के लिए **टेस्ट सिंक का विकल्प दें**
- पहला सिंक पूरा होने के बाद **सफलता के मेट्रिक दिखाएं**

## OnboardingView कॉम्पोनेंट

यूज़र के ऐप इंस्टॉल करने पर `OnboardingView` कॉम्पोनेंट एक केंद्रित मोडल में रेंडर होता है:

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

## SignInView के साथ साइन-इन फ़्लो

अगर आपके ऐप में यूज़र को किसी बाहरी अकाउंट (जैसे Tajo) में साइन इन करना ज़रूरी है, तो अलग साइन-इन व्यू का इस्तेमाल करें:

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

## क्वेरी पैरामीटर के साथ डीप लिंक लॉन्च

डीप लिंक में क्वेरी पैरामीटर का इस्तेमाल करके आप ऑनबोर्डिंग के खास चरण लॉन्च कर सकते हैं या डेटा पहले से भर सकते हैं:

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

ऐसे डीप लिंक बनाएं जो ऑनबोर्डिंग डेटा पहले से भर दें:

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

## लौटने वाले यूज़र को संभालना

जब कोई यूज़र ऑनबोर्डिंग पूरी करने के बाद आपका ऐप खोले, तो उसकी स्थिति पहचानें और उसी के अनुसार व्यू दिखाएं:

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

ऑनबोर्डिंग पूरी होने का स्टेटस Stripe Secret Store में सेव करें, ताकि आप बिना किसी बाहरी API कॉल के लौटने वाले यूज़र को पहचान सकें.