OnboardingView-Komponente für Stripe Apps

Verwenden Sie OnboardingView, um einen Onboarding-Ablauf Ihrer Stripe-App zu implementieren

SDK-Version

Achtung

Diese Version des SDK ist eine Vorabversion und kann instabil sein. Vermeiden Sie die Verwendung dieser Version, es sei denn, sie ist für Ihre Integration erforderlich.

So fügen Sie Ihrer App die OnboardingView Komponente hinzu:

import {OnboardingView} from '@stripe/ui-extension-sdk/ui';

Die Komponente OnboardingView bietet eine standardisierte Möglichkeit, eine Onboarding-Ansicht mit vordefinierter Struktur zu implementieren:

Linke Seitenleiste, die eine Liste der Onboarding-Aufgaben anzeigt
Hauptinhaltsbereich, der den Inhalt eines bestimmten Onboarding-Schritts anzeigt

Die Liste der Onboarding-Aufgaben wird als Array von TaskListItemProps-Elementen angegeben. Sie können den Inhalt des Onboarding-Schritts selbst vollständig anpassen, indem Sie eine nutzerdefinierte React-Ansicht als direktes untergeordnetes Element der <OnboardingView> angeben. Mit diesem Ansatz können Sie einen nutzerdefinierten Onboarding-Schritt basierend auf Ihren Geschäftsanforderungen implementieren, während das Stripe-Dashboard die Art und Weise steuert, wie die Liste der Onboarding-Aufgaben gerendert wird.

OnboardingView-Eigenschaften

Eigenschaft	Typ
`children`	Pflichtfeld `React.ReactNode` React-Komponente, die den Inhalt der primären Spalte rendert.
`completed`	Pflichtfeld `boolean` Ob alle Onboarding-Aufgaben abgeschlossen sind
`tasks`	Pflichtfeld `Array<Tasks>` Eine Liste der Onboarding-Aufgaben. Verwandte Typen: Tasks.
`title`	Pflichtfeld `string` Titel des Onboarding-Schritts.
`description`	Optional `string \| undefined` Beschreibung der Onboarding-Schritte.

Aufgaben

Eigenschaft	Typ
`title`	Pflichtfeld `string` Der Anzeigetitel der Aufgabe.
`onPress`	Optional `((event: PressEvent) => void) \| undefined` Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt.
`status`	Optional `("not-started" \| "in-progress" \| "blocked" \| "complete") \| undefined` Der aktuelle Status der Aufgabe.
`subTasks`	Optional `Array<SubTasks> \| undefined` Eine Liste der Unteraufgaben, die zu dieser Aufgabe gehören. Verwandte Typen: SubTasks.

SubTasks

Eigenschaft Typ

title

Pflichtfeld

string

Der Anzeigetitel der Aufgabe.

onPress

Optional

((event: PressEvent) => void) | undefined

Ein Ereignishandler, wenn der/die Nutzer/in auf eine beliebige Stelle in der Aufgabe klickt.

status

Optional

("not-started" | "in-progress" | "blocked" | "complete") | undefined

Der aktuelle Status der Aufgabe.

Basic

Das folgende Beispiel zeigt die grundlegende Verwendung der Komponente OnboardingView, bei der für jeden Onboarding-Schritt eine andere React-Ansicht gerendert wird.

Beispiel wird geladen ...

import React, {useState, useReducer, useCallback} from 'react';
import {
  FormFieldGroup,
  TextField,
  OnboardingView,
  Switch,
  TaskListItemProps,
} from '@stripe/ui-extension-sdk/ui';

const onboardingTasks: Record<TaskName, TaskListItemProps> = {
  addInfo: {
    title: 'Add business info',
    status: 'in-progress',
    onPress: () => handlePress('addInfo'),
  },
  connectBank: {
    title: 'Connect your bank',
    status: 'not-started',
    onPress: () => handlePress('connectBank'),
  },
  review: {
    title: 'Review and finish',
    status: 'not-started',
    onPress: () => handlePress('review'),
  },
};

// These view implement the UI required by a particular onboarding step
const steps: Record<TaskName, React.FunctionComponent> = {
  addInfo: () => (
    <FormFieldGroup legend="Business Info" description="Add business info">
      <TextField
        label="Company name"
        placeholder="Company name"
        hiddenElements={['label']}
      />
    </FormFieldGroup>
  ),
  connectBank: () => (
    <FormFieldGroup
      legend="Connect your bank"
      description="Enter the bank account to which withdrawals will be sent."
    >
      <TextField
        label="Bank name"
        placeholder="Bank name"
        hiddenElements={['label']}
      />
    </FormFieldGroup>
  ),
  review: () => (
    <FormFieldGroup legend="Specify settings" layout="vertical">
      <Switch
        label="Enable automatic transfers"
        description="Enable automatic transfers"
      />
      <Switch
        label="Enable auto-import of transactions"
        description="Enable auto-import of transactions"
      />
    </FormFieldGroup>
  ),
};

const handlePress = useCallback((taskName: TaskName) => {
  setTaskName(taskName);
  dispatch({type: 'TOGGLE_STATUS', taskName});
}, []);

const [taskName, setTaskName] = useState<TaskName>('addInfo');
const [tasks, dispatch] = useReducer(taskReducer, onboardingTasks);
const taskListItems = Object.values(tasks);

const title = tasks[taskName].title;
const description = `Please complete the onboarding step.`;
const completed = taskListItems.every((item) => item.status === 'complete');
const OnboardingViewContent = steps[taskName];

return (
  <OnboardingView
    title={title}
    description={description}
    completed={completed}
    tasks={taskListItems}
  >
    <OnboardingViewContent />
  </OnboardingView>
);

function getNextStatus(
  status: string,
): 'not-started' | 'in-progress' | 'complete' {
  switch (status) {
    case 'complete':
      return 'not-started';
    case 'not-started':
      return 'in-progress';
    case 'in-progress':
      return 'complete';
    default:
      return 'not-started';
  }
}

type TaskName = 'addInfo' | 'connectBank' | 'review';

type TaskAction = {
  type: 'TOGGLE_STATUS';
  taskName: TaskName;
};

// Reducer function to handle state updates
function taskReducer(
  state: Record<TaskName, TaskListItemProps>,
  action: TaskAction,
): Record<TaskName, TaskListItemProps> {
  switch (action.type) {
    case 'TOGGLE_STATUS':
      return {
        ...state,
        [action.taskName]: {
          ...state[action.taskName],
          status: getNextStatus(state[action.taskName].status as string),
        },
      };
    default:
      return state;
  }
}