On this page

Post-Install Actions और Onboarding

Post-install actions define करते हैं कि user के Stripe App install करने के तुरंत बाद क्या होता है। एक well-designed post-install experience users को setup के through guide करती है।

Post-Install Action Types

Stripe चार post-install action types support करता है:

1. App पर Link (Default)

Default account viewport में app open करता है:

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

2. Onboarding पर Link

App के dedicated onboarding view पर open करता है:

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

3. Settings पर Link

App settings view open करता है:

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

4. External URL पर Link

User को external URL पर redirect करता है:

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

Onboarding Best Practices

Effortless बनाएं

Pre-fill करें Stripe account context से उपलब्ध information
Sensible defaults use करें configuration options के लिए
Skip allow करें optional steps में, completion का clear path के साथ
Progress दिखाएं multi-step flows के लिए step indicators के साथ

OnboardingView Component

import {
  Box,
  Button,
  Inline,
  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;

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

      {step === 1 && (
        <Box>
          <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
            अपना Brevo Account Connect करें
          </Inline>
          <TextField
            label="Brevo API Key"
            placeholder="xkeysib-..."
            value={brevoApiKey}
            onChange={(e) => setBrevoApiKey(e.target.value)}
            css={{ marginTop: 'medium' }}
          />
          <Button
            type="primary"
            onPress={() => setStep(2)}
            disabled={!brevoApiKey || isConnecting}
            css={{ marginTop: 'medium' }}
          >
            Brevo Connect करें
          </Button>
        </Box>
      )}
    </Box>
  );
};

export default OnboardingView;

Tip

Onboarding completion status को Stripe Secret Store में store करें ताकि returning users को external API call के बिना detect किया जा सके।

अगले कदम

Analytics, Installation और conversion metrics track करें
Install Links, App distribute करें

Post-Install Actions और Onboarding