Stripe Apps の OnboardingView コンポーネント

OnboardingView を使用して Stripe アプリのアカウント登録フローを実装する

SDK バージョン

警告

このバージョンの SDK はプレリリースであり、不安定な場合があります。導入に必要でない限り、このバージョンは使用しないでください。

OnboardingView コンポーネントをアプリに追加するには、以下のようにします。

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

OnboardingView コンポーネントは、事前定義された構造を持つアカウント登録ビューを実装するための、標準化された方法を提供します。

アカウント登録タスクのリストを表示する左のサイドバー
特定のアカウント登録ステップのコンテンツを表示するメインコンテンツエリア

アカウント登録タスクのリストは、TaskListItemProps 項目の配列として指定します。カスタムの React ビューを <OnboardingView> の直接の子として指定することで、アカウント登録ステップ自体のコンテンツを全面的にカスタマイズできます。このアプローチを使用すると、Stripe ダッシュボードでアカウント登録タスクのリストの表示方法を制御しながら、ビジネスニーズに基づいてカスタムのアカウント登録ステップを実装できます。

OnboardingView プロパティ

プロパティ	タイプ
`children`	必要 `React.ReactNode` プライマリー列のコンテンツをレンダリングする React コンポーネント。
`completed`	必要 `boolean` すべてのアカウント登録タスクが完了したかどうか
`tasks`	必要 `Array<Tasks>` アカウント登録タスクのリスト。関連型: Tasks。
`title`	必要 `string` アカウント登録ステップのタイトル。
`description`	オプション `string \| undefined` アカウント登録ステップの説明。

タスク

プロパティ	タイプ
`title`	必要 `string` タスクの表示タイトル。
`onPress`	オプション `((event: PressEvent) => void) \| undefined` ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。
`status`	オプション `("not-started" \| "in-progress" \| "blocked" \| "complete") \| undefined` タスクの現在のステータス。
`subTasks`	オプション `Array<SubTasks> \| undefined` このタスクに属するサブタスクのリスト。関連型: SubTasks。

SubTasks

プロパティタイプ

title

必要

string

タスクの表示タイトル。

onPress

オプション

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

ユーザーがタスク上の任意の場所をクリックしたときのイベントハンドラー。

status

オプション

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

タスクの現在のステータス。

基本

以下の例は、OnboardingView コンポーネントの基本的な使用方法を示しています。ここでは、アカウント登録ステップごとに異なる React ビューが表示されます。

サンプルを読み込み中...

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

Stripe Apps の OnboardingView コンポーネント

OnboardingView を使用して Stripe アプリのアカウント登録フローを実装する

警告

OnboardingView プロパティ

タスク

SubTasks

基本

参照情報