On this page

Akcie po inštalácii a onboarding

Akcie po inštalácii určujú, čo sa stane ihneď po tom, čo používateľ nainštaluje vašu Stripe App. Dobre navrhnutá skúsenosť po inštalácii vedie používateľov cez nastavenie a zvyšuje mieru aktivácie.

Typy akcií po inštalácii

1. Odkaz na aplikáciu (predvolené)

Otvorí aplikáciu v predvolenom viewporte zásuvky:

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

2. Odkaz na onboarding

Otvorí dedikovaný onboardingový pohľad aplikácie:

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

3. Odkaz na nastavenia

Otvorí pohľad nastavení aplikácie:

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

4. Odkaz na externú URL

Presmeruje používateľa na externú URL pre nastavenie:

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

Caution

Externé URL musia používať HTTPS. Tím recenzentov Stripe overí, že externá URL poskytuje funkčnú skúsenosť nastavenia.

Najlepšie praktiky pre onboarding

Uľahčite ho

Predvyplňte informácie dostupné z kontextu účtu Stripe
Používajte rozumné predvolené hodnoty pre možnosti konfigurácie
Umožnite preskočiť voliteľné kroky s jasnou cestou na ich neskoršie dokončenie
Zobrazujte postup s indikátormi krokov pre viacstupňové toky

Urobte ho relevantným

Zobrazte ukážku synchronizovaných dát pred povolením integrácie
Ukážte, čo sa stane keď používateľ dokončí nastavenie
Poskytnite možnosť testovacej synchronizácie na overenie, že pripojenie funguje

Komponent OnboardingView

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

const OnboardingView = ({ environment, userContext }) => {
  const [step, setStep] = useState(1);
  const [brevoApiKey, setBrevoApiKey] = useState('');
  const [isConnecting, setIsConnecting] = useState(false);
  const [error, setError] = useState(null);

  const handleConnect = async () => {
    setIsConnecting(true);
    try {
      await storeBrevoApiKey(brevoApiKey);
      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' }}>
      {error && (
        <Banner type="critical" title="Connection Error">
          {error}
        </Banner>
      )}
      {step === 1 && (
        <Box>
          <Inline css={{ fontWeight: 'bold', fontSize: 'large' }}>
            Connect Your Brevo Account
          </Inline>
          <TextField
            label="Brevo API Key"
            placeholder="xkeysib-..."
            value={brevoApiKey}
            onChange={(e) => setBrevoApiKey(e.target.value)}
            css={{ marginTop: 'medium' }}
          />
          <Button
            type="primary"
            onPress={handleConnect}
            disabled={!brevoApiKey || isConnecting}
            css={{ marginTop: 'medium' }}
          >
            {isConnecting ? 'Connecting...' : 'Connect Brevo'}
          </Button>
        </Box>
      )}
      {step === 2 && (
        <Box>
          <Banner type="default" title="Ready to Sync">
            Your Brevo account is connected. Tajo will begin syncing
            customer data automatically.
          </Banner>
          <Button type="primary" onPress={() => {/* Navigate to dashboard */}}>
            Go to Dashboard
          </Button>
        </Box>
      )}
    </Box>
  );
};

export default OnboardingView;

Tip

Ukladajte stav dokončenia onboardingu v Stripe Secret Store, aby ste mohli detekovať vracajúcich sa používateľov bez externého API volania.