Stripe AppsのUIデザイン【Stripe Appsで決済ワークフロー自動化2】

Stripe Appsの使い方を理解する上で、公式サイトには複数のサンプルアプリが提供されています。

Stripe Appsサンプルアプリ

ソースはGitHubから取得できるのでサンプルを見ながらStripe Appsの使い方を確認していきます。

この記事で説明すること

• Stripe Appsの開発とカスタマイズ
• Stripe AppsのUI設計

完成形はこのイメージになります。

サンプルアプリを参考にUIをカスタマイズしながら、Stripe AppsでのUIデザインを学びます。

完成形イメージ

Stripe Apps サンプルアプリの準備

サンプルアプリとしておなじみTODOアプリを題材にします。どこの解説にも大体ありますね。

今回はsuper-todoというサンプルを利用します。

このサンプルアプリには、推奨されるデザインパターンや仕組みが包括されています。具体的には下記3点とのことです。

・Stripe API に組み込むフロントエンド専用アプリ

・リスト、タブ、ボタンなどの UI コンポーネント

・アクションボタンや通信状態などの設計パターン

Stripe Appsの開発にはTypeScript、Reactを使用します。これにStripeのSDKとUIツールキットを組み合わせて、ダッシュボートを拡張していきます。

サンプルアプリの環境構築

サンプルアプリをダウンロードしたら、該当ディレクトリに移動しStripe CLIで下記コマンドを実行します。

stripe apps create super-todo

これでStripe Appsに必要なライブラリなどもインストールされます。これを実行しないとエラーが発生します。

（私はこれで2時間くらい無駄にしました）

大事なことなのでもう一度言います。

@stripe/ui-extension-sdk/ui" as external to exclude it from the bundle

こんなエラーが出たらcreate appsから初めてください

super-todoアプリ

ダウンロードした段階でのsuper-todoアプリの画面はこのようなイメージです。

ソースを見る前にまずはStripe Appsのガイドラインを確認します。

Stripe Apps 設計ガイドライン

Stipe Appsでアプリを構築していく上で必要な考え方を解説します。

カスタムスタイル(Custom styling)

UI要素で可能なスタイリングは意図的に制限されています。

これは、コアとなるUI要素やプラットフォーム自体のスタイルと乖離がないよう一貫性を維持してアクセシビリティを確保するためです。

UI要素のカスタムスタイルは意図的に制限されています。 これは、コアUI要素とのプラットフォームの一貫性を維持し、高いアクセシビリティバーを確保するためです。

特に、色のコントラストはアクセシブルなUIの重要な側面であるという理由のため各要素に使用できる色が制限されているようです。

ブランディング要素(Branding elements)

Stripe AppsではUIデザインが制限されていると書きましたが、任意の色が選択できる部分もあります。それがApp indicatorと呼ばれる部分です。

App indicatorは、ユーザがどのアプリを使用しているか識別するための要素です。webサイトのタイトルのようなものですね。

このApp indicator部分は任意の色が指定できロゴも自由に設定できます。ページ冒頭の『完成系イメージ』キャプチャでもロゴを変更しております。

アプリ上部のロゴとカラーバーをブランドに合わせたものに変更することにより、ユーザが利用しているアプリを識別することができます。

UIコンポーネント

Stripe Appsは、複雑なUIを作成するためのUIコンポーネントが提供されています。最新のUIコンポーネントを組み合わせることで効果的にUIを構築することができます。

また、推奨パターンのコンポーネントを利用することでユーザに高品質で一貫したユーザエクスペリエンスを提供することができます。

コンポーネントはFigma libraryを参照ください。

Figma library

アプリのページ構成

アプリは大きく３つのページで構成されます。

HOME

Stripeダッシュボードの最初に表示されるページです。

ユーザにアプリの概要を表示したりダッシュボードとして利用することができます。このアプリで出来る事や情報をまとめて表示しましょう。

Detail pages

詳細ページでは、特定のStripeオブジェクトの詳細をような情報を表示します。例えば、単一の支払い、請求書、サブスクリプション、顧客、または製品の詳細ページで利用します。

アプリはUI拡張機能SDKを使用して現在のオブジェクトに関する情報にアクセスできます。

ただし、情報にアクセスするためにはセキュリティ上の理由から権限設定が必要になります。

詳しくは権限設定の詳細をご覧ください。

List pages

リストページには、その名の通りリストを表示します。たとえば、[顧客]ページにはすべての顧客が一覧表示し、[支払い]ページにはすべての支払いが一覧表示します。

すべてのアプリがリストページを表示する必要があるわけではありません。

特定のオブジェクトに関連しない機能を提供する場合にのみ、リストページ用にビルドしてください。

サンプルアプリのソース解説

アプリページの構成に倣って、サンプルアプリを確認してみましょう。

viewsの中に4つのファイルがあります。

HOMEに該当するのは「HomeOverviewView」です。こちらがダッシュボードにアクセスした際に表示されるアプリページになります。

Detail pagesに該当するのは「CustomerDetailView」です。super-todoサンプルアプリでは、Stripeの顧客情報にアクセスした際に表示される詳細ページになります。

List pagesに該当するのは「CustomerListView」になります。リスト表示するページなどに利用します。

一覧表示などを行いたい場合に使うコンポーネントですね。

UIカスタマイズ

ここでやっとUIデザインのカスタマイズです。

App indicatorロゴの変更

サンプルアプリでは下記のソースにてロゴ表示されています。

src/components/SuperTodoView.tsx

App indicator部分は全ページ共通ですので、このソースを修正すると全ページに反映されます。

こちらのソースは変更後になります。

import { ContextView } from "@stripe/ui-extension-sdk/ui";
import SuperTodoIcon from "../assets/leo.svg";

const SuperTodoView = ({ title = "SuperTodo", ...contextViewProps }) => (
  <ContextView
    title={title}
    brandColor="#F662AD"
    brandIcon={SuperTodoIcon}
    {...contextViewProps}
  ></ContextView>
);

2行目にロゴのパスを定義しています。変更する場合は画像をアップロードしてパスを修正します。

定義した画像ファイルへのパスは8行目で利用されていますね。

header部の修正

こちらはコンテンツの修正のみです。ヘッダ部は各ページで定義されていますので、こちらの修正はhome部分のみに反映されます。

   <SuperTodoView
      title="Get started"
      externalLink={{
        label: "Go to SuperTodo dashboard",
        href: "#",
      }}>
      <Box css={{font: 'heading'}}>
        Welcome {userContext.account.name}
      </Box>
      <Box css={{marginTop: 'small'}}>
        The Supertodo App for Stripe let’s you create todo lists for your team right in the Stripe Dashboard.
      </Box>
      <Box css={{marginTop: 'small'}}>
        To start creating tasks, head to one of the following pages to see your lists.
      </Box>

      <Box css={{
        marginTop: 'xlarge',
        padding: 'medium',
        background: 'container',
        borderRadius: 'medium',
      }}>
        <Box css={{stack: 'x', distribute: 'space-between', alignY: 'center', width: 'fill'}}>
          <Link  href="customers"><Inline>Customers</Inline></Link>
          <Box css={{ color: "info"}}>
            <Icon name="next" />
          </Box>
        </Box>
      </Box>

      <Box css={{
        marginTop: 'medium',
        padding: 'medium',
        background: 'container',
        borderRadius: 'medium',
      }}>
        <Box css={{stack: 'x', distribute: 'space-between', alignY: 'center', width: 'fill'}}>
          <Link  href="payments"><Inline>Payments</Inline></Link>
          <Box css={{ color: "info"}}>
            <Icon name="next" />
          </Box>
        </Box>
      </Box>
    </SuperTodoView>

少し文言を修正します。ページの構造とどの部分がUI要素となっているかが確認できます。

    <SuperTodoView
      title="syunのダッシュボード"
      externalLink={{
        label: "新着メッセージ",
        href: "#",
      }}>
      <Box css={{font: 'heading'}}>
        Welcome {userContext.account.name}
      </Box>
      <Box css={{marginTop: 'small'}}>
        ここがコンテンツだよ
              </Box>
      <Box css={{marginTop: 'small'}}>
        タスク一覧書くよ
      </Box>

      <Box css={{
        marginTop: 'xlarge',
        padding: 'medium',
        background: 'container',
        borderRadius: 'medium',
      }}>
        <Box css={{stack: 'x', distribute: 'space-between', alignY: 'center', width: 'fill'}}>
          <Link  href="customers"><Inline>Customers</Inline></Link>
          <Box css={{ color: "info"}}>
            <Icon name="next" />
          </Box>
        </Box>
      </Box>

      <Box css={{
        marginTop: 'medium',
        padding: 'medium',
        background: 'container',
        borderRadius: 'medium',
      }}>
        <Box css={{stack: 'x', distribute: 'space-between', alignY: 'center', width: 'fill'}}>
          <Link  href="payments"><Inline>Payments</Inline></Link>
          <Box css={{ color: "info"}}>
            <Icon name="next" />
          </Box>
        </Box>
      </Box>
    </SuperTodoView>

こちらがカスタマイズ後のhome部分のページになります。ロゴや各コンテンツが修正後の文言になっていますね。

文言表示とリンクくらいしかしていないですが、ここに今後はStripe APIsを使った情報表示など行っていきます。

ちなみに、仮想サーバを閉じてもStripeダッシュボードにサンプルアプリが表示されたままになります。

本番環境でも表示されてしまい邪魔なので、不要になったら下記の「アプリのプレビューを無効化」を押下しましょう。

ポップアップ表示後にContinueを押してあげれば非表示になります。

まとめ

Stripe Appsでワークフローを構築する上で必要なUIコンポーネントについての解説でした。

ユーザの操作性を維持し全体的なデザイン統一感するために、カスタマイズできる部分はある程度限られます。それでもアプリを構築してワークフローを構成したり3rd partyの情報を表示する分には十分かと思います。

次回はStripe APIを利用して顧客情報をアプリ上に表示したりというカスタマイズを行っていきます。