Composant OnboardingView pour les applications Stripe Apps

Utilisez OnboardingView pour implémenter un flux d’inscription de votre application Stripe

Version du SDK

Avertissement

Cette version du SDK est une préversion et peut être instable. Évitez d'utiliser cette version à moins qu'elle ne soit nécessaire à votre intégration.

Pour ajouter le composant OnboardingView à votre application :

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

Le composant OnboardingView fournit un moyen standardisé d’implémenter une vue d’inscription avec une structure prédéfinie :

Barre latérale gauche qui affiche une liste des tâches d’inscription
Zone de contenu principal qui affiche le contenu d’une étape d’inscription donnée

La liste des tâches d’inscription est spécifiée sous la forme d’un tableau d’éléments TaskListItemProps. Vous pouvez entièrement personnaliser le contenu de l’étape d’inscription en spécifiant une vue React personnalisée comme enfant direct de <OnboardingView>. Cette méthode vous permet de mettre en œuvre une étape d’inscription personnalisée en fonction des besoins de votre entreprise, tandis que le Dashboard Stripe contrôle l’affichage de la liste des tâches d’inscription.

Propriétés OnboardingView

Propriété	Type
`children`	Obligatoire `React.ReactNode` Composant React qui affiche le contenu de la colonne principale.
`completed`	Obligatoire `boolean` Indique si toutes les tâches d’inscription sont effectuées
`tasks`	Obligatoire `Array<Tasks>` Liste des tâches d’inscription. Types associés : Tasks.
`title`	Obligatoire `string` Titre de l’étape d’inscription.
`description`	Facultatif `string \| undefined` Description de l’étape d’inscription.

Tâches

Propriété	Type
`title`	Obligatoire `string` Le titre affiché de la tâche.
`onPress`	Facultatif `((event: PressEvent) => void) \| undefined` Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche.
`status`	Facultatif `("not-started" \| "in-progress" \| "blocked" \| "complete") \| undefined` L’état actuel de la tâche.
`subTasks`	Facultatif `Array<SubTasks> \| undefined` Liste des sous-tâches qui appartiennent à cette tâche. Types associés : SubTasks.

SubTasks

Propriété Type

title

Obligatoire

string

Le titre affiché de la tâche.

onPress

Facultatif

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

Un gestionnaire d’événements pour quand l’utilisateur clique n’importe où dans la tâche.

status

Facultatif

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

L’état actuel de la tâche.

Basic

L’exemple suivant illustre l’utilisation de base du composant OnboardingView, dans lequel une vue React différente est obtenue pour chaque étape de l’inscription.

Chargement de l'exemple...

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