Telepítés utáni műveletek és bevezetés

A telepítés utáni műveletek meghatározzák, hogy mi történik közvetlenül azután, hogy egy felhasználó telepíti a Stripe Appot. A jól megtervezett telepítés utáni élmény végigvezeti a felhasználókat a beállításon és növeli az aktiválási arányokat.

Telepítés utáni művelettípusok

A Stripe négy telepítés utáni művelettípust támogat:

1. Hivatkozás az appra (alapértelmezett)

Megnyitja az appot az alapértelmezett fiók viewportban:

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

2. Hivatkozás a bevezetésre

Megnyitja az app dedikált bevezetési nézetét:

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

3. Hivatkozás a beállításokra

Megnyitja az app beállítási nézetét, hasznos, ha az app API kulcsokat vagy konfigurációt igényel:

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

4. Hivatkozás külső URL-re

Átirányítja a felhasználót egy külső URL-re a beállításhoz:

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

Bevezetés bevált gyakorlatai

Tegye erőfeszítésmentessé

• Előre töltse ki a Stripe fiók kontextusából elérhető információkat
• Ésszerű alapértelmezéseket használjon a konfigurációs lehetőségekhez
• Engedje meg az ugrást az opcionális lépésekben, egyértelmű útvonallal a befejezéshez
• Mutasson haladást lépésjelzőkkel többlépéses folyamatokhoz

Tegye személyre szabhatóvá

• Adatleképezési opciók, engedje a felhasználóknak kiválasztani, mely Stripe mezők szinkronizálódjanak a Brevo-ba
• Szinkronizálási frekvencia, kínáljon valós idejű, óránkénti vagy napi szinkronizálási lehetőségeket
• Szelektív szinkronizálás, engedje a felhasználóknak kiválasztani, mely ügyfeleket vagy termékeket szinkronizálják

Tegye relevánsak

• Szinkronizálandó adatok előnézete az integráció engedélyezése előtt
• Mutassa meg, mi fog történni amikor a felhasználó befejezi a beállítást
• Biztosítson teszt szinkronizálást a kapcsolat ellenőrzéséhez

OnboardingView komponens

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}. lépés / {totalSteps}
      </Inline>

      {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={() => setStep(2)}
            disabled={!brevoApiKey || isConnecting}
            css={{ marginTop: 'medium' }}
          >
            Connect Brevo
          </Button>
        </Box>
      )}
    </Box>
  );
};

export default OnboardingView;