Stripe Apps の設定のサインイン

設定ページでユーザーのアカウント登録を行う方法をご紹介します。

ページをコピー

Connect 拡張またはバックエンド専用アプリを構築する場合は、設定ページでユーザーのアカウント登録を行います。

はじめに

アプリを作成します。

推奨される使用法

設定ページを使用して、ユーザーをサインインします。
この設計パターンは、ドロワーと同じ方法で適用します。ユーザーのアカウント登録時に役に立たない追加のコンテキストは使用しないでください。以下に例を示します。

ユーザーに追加のコンテキストを表示する必要がある場合は、FocusView コンポーネントを使用して情報を提供します。以下に例を示します。

例

設定ビューに SignInView コンポーネントを追加するには、ユーザーのサインインの状態に応じた条件に従って SettingsView コンポーネントで表示されるようにします。

import {SignInView, SettingsView} from '@stripe/ui-extension-sdk/ui';
import appIcon from './icon.svg';

const AppSettings = () => {
  // Set this variable based on your app's concept of sign in state
  const isUserSignedIn = ...;
  return isUserSignedIn ? (
    <SettingsView>
      {/* Add your settings view content. */}
    </SettingsView>
  ) : (
    <SignInView
      description="Connect your SuperTodo account with Stripe."
      primaryAction={{label: 'Sign in', href: 'https://example.com'}}
      footerContent={
        <>
          Don't have an account? <Link href="https://example.com">Sign up</Link>
        </>
      }
      brandColor="#635bff"
      brandIcon={appIcon}
    />
  );