---
title: "Post-Install Actions اور Onboarding | Tajo"
description: "اپنے Stripe App کے لیے post-installation رویہ ترتیب دیں اور موثر onboarding flows بنائیں"
url: https://tajo.io/ur/docs/stripe-apps/post-install/
markdown: https://tajo.io/ur/docs/stripe-apps/post-install.md
lang: ur-PK
author: "Set Noa"
author_url: https://tajo.io/ur/set-noa/
robots: noindex
---

ابتدائی رسائی کی درخواست کریں

اپنا پہلا نام اور دفتری ای میل پتہ درج کریں۔ ہم Tajo تک رسائی کی درخواست کی تصدیق کے لیے ایک لنک ای میل کریں گے۔

# Post-Install Actions اور Onboarding

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

Post-install actions یہ طے کرتے ہیں کہ جب صارف آپ کی Stripe App انسٹال کرتا ہے تو فوری طور پر کیا ہوتا ہے۔ اچھی طرح ڈیزائن کردہ post-install تجربہ صارفین کو سیٹ اپ کے ذریعے رہنمائی کرتا ہے اور activation rates بڑھاتا ہے۔

Caution

**صورتحال: منصوبہ بند، ابھی تیار نہیں ہوا۔** Tajo کی کوئی Stripe App نہیں ہے، اس لیے اس سیکشن کی کوئی چیز آج انسٹال نہیں کی جا سکتی۔ اس صفحے میں دیے گئے ایپ کے شناخت کار، URLs اور کریڈنشلز مثال کے طور پر رکھے گئے پلیس ہولڈرز ہیں، لائیو اینڈ پوائنٹس نہیں۔

## Post-Install Action کی اقسام

Stripe چار post-install action اقسام کی حمایت کرتا ہے، جن میں سے ہر ایک آپ کے app manifest میں ترتیب دی جاتی ہے:

### 1. App سے لنک کریں (پہلے سے طے شدہ)

پہلے سے طے شدہ drawer viewport میں app کھولتا ہے۔ اگر کوئی `post_install_action` مخصوص نہیں ہے تو یہ پہلے سے طے شدہ رویہ ہے:

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

صارف Stripe Dashboard sidebar میں app کا `drawer.default` viewport دیکھتا ہے۔

### 2. Onboarding سے لنک کریں

App کا خصوصی onboarding view کھولتا ہے، ایک مرکوز سیٹ اپ تجربہ فراہم کرتا ہے:

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

اس کے لیے آپ کے manifest میں `onboarding` viewport کا اعلان ضروری ہے:

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

### 3. Settings سے لنک کریں

App کا settings view کھولتا ہے، جو اس وقت مفید ہے جب app کو استعمال سے پہلے API keys یا کنفیگریشن کی ضرورت ہو:

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

اس کے لیے `settings` viewport کی ضرورت ہے:

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

### 4. بیرونی URL سے لنک کریں

سیٹ اپ کے لیے صارف کو بیرونی URL پر redirect کرتا ہے۔ اس وقت استعمال کریں جب آپ کا onboarding flow Stripe Dashboard سے باہر ہو:

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

Caution

بیرونی URLs کو HTTPS استعمال کرنا چاہیے اور انہیں آپ کے `allowed_redirect_uris` میں درج ہونا چاہیے۔ Stripe review team اس بات کی تصدیق کرے گی کہ بیرونی URL ایک فعال سیٹ اپ تجربہ فراہم کرتا ہے۔

## Onboarding کے بہترین طریقے

### آسان بنائیں

شروع کرنے کے لیے درکار مراحل کو کم سے کم کریں:

- **معلومات پہلے سے بھریں** جو Stripe account context سے دستیاب ہوں
- **معقول ڈیفالٹس استعمال کریں** کنفیگریشن آپشنز کے لیے
- **اختیاری مراحل چھوڑنے کی اجازت دیں** بعد میں مکمل کرنے کے واضح راستے کے ساتھ
- **پیشرفت دکھائیں** کثیر مرحلہ flows کے لیے step indicators کے ساتھ

### حسب ضرورت بنائیں

صارفین کو اپنی ضروریات کے مطابق انٹیگریشن ترتیب دینے دیں:

- **Data mapping آپشنز**, صارفین کو یہ چننے دیں کہ کون سے Stripe fields Brevo میں sync ہوں
- **Sync frequency**, ہر گھنٹے یا روزانہ sync کے آپشن پیش کریں
- **Selective sync**, صارفین کو یہ چننے دیں کہ کون سے customers یا products sync کریں
- **Notification ترجیحات**, sync errors یا اہم events کے لیے alerts ترتیب دیں

### متعلقہ بنائیں

فوری طور پر قدر دکھائیں:

- **Synced data کا پیش نظارہ** انٹیگریشن فعال کرنے سے پہلے
- **یہ دکھائیں کہ کیا ہوگا** جب صارف سیٹ اپ مکمل کرتا ہے
- **ٹیسٹ sync آپشن فراہم کریں** تاکہ connection کام کرے اس کی تصدیق ہو
- **کامیابی کے metrics دکھائیں** ابتدائی sync مکمل ہونے کے بعد

## OnboardingView Component

`OnboardingView` component صارف کے app انسٹال کرتے وقت ایک مرکوز modal میں render ہوتا ہے:

```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 کے ساتھ سائن ان فلو

اگر آپ کی app کے لیے صارفین کو کسی بیرونی اکاؤنٹ (جیسے Tajo) میں سائن ان کرنا ضروری ہو، تو ایک مخصوص sign-in view استعمال کریں:

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

## Query Parameters کے ساتھ Deep Link لانچ

آپ deep links میں query parameters کے ذریعے مخصوص onboarding مراحل شروع کر سکتے یا ڈیٹا پہلے سے بھر سکتے ہیں:

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

Deep links بنائیں جو onboarding ڈیٹا پہلے سے بھریں:

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

## واپس آنے والے صارفین کا انتظام

جب کوئی صارف onboarding مکمل کرنے کے بعد app کھولتا ہے، تو ان کی حالت پہچانیں اور مناسب view دکھائیں:

```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 میں onboarding مکمل ہونے کی حالت محفوظ کریں تاکہ آپ بیرونی API call کے بغیر واپس آنے والے صارفین کو پہچان سکیں۔