Stripe UI拡張機能入門: 要素の見た目をカスタマイズする方法



この記事は、[Stripe Apps を25日間紹介し続ける Advent Calendar 2022](https://qiita.com/advent-calendar/2022/stripe-apps) 6日目の記事です。

![スクリーンショット 2022-11-24 17.56.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/e0261865-0418-daa2-423a-5f4d70558b1b.png)

Stripe AppsのUIフレームワーク(`@stripe/ui-extension-sdk`)を利用することで、Stripe Dashboardに馴染みやすいUIを簡単に構築できます。

![スクリーンショット 2022-12-05 11.56.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/96013439-d194-eae3-734b-6a2bc0765490.png)

しかし画面要件によっては、CSSで見た目を調整したい場合も出てきます。

その場合、Stripe Appsでは、`Box`と`Inline`の２要素と、`css`プロパティを利用して調整を行います。

## `Box`と`Inline`の使い分け

`Box`と`Inline`はそれぞれ`div`と`span`に相当する要素です。

```tsx
const Example: FC = () => {
  return (
    <>
      <Box>Hello World</Box>
      <Inline>Hello World</Inline>
    </>
  )
}
```

このコンポーネントを表示すると、ブラウザ上では次のようになります。

```html
<div>Hello World</div>
<span>Hello World</span>
```

`span`のようなインライン系の要素では`Inline`を、そうでない場合は`Box`を利用してマークアップしましょう。

## スタイルはCSS in JS形式で実装

`Box`と`Inline`それぞれへのCSS設定は、`css`プロパティで行います。

```tsx
      <Box
        css={{
          margin: 'small',
          padding: 'xxlarge',
          color: 'primary',
          background: 'container',
        }}
      >Hello World</Box>
```

実行すると、次のような要素ができあがります。

![スクリーンショット 2022-12-05 13.52.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0a38503e-afa3-0456-925c-2c962d489361.png)

### プロパティはドキュメントまたはTypeScriptの型定義でチェック

スタイルを設定する場合の注意点としては、`24px`や`10vw`・`#fefefe`のように個別に値を設定することができない点です。

基本的にほぼ全ての値が、**Stripeとライブラリが提供するプロパティのみ**許可しています。

そのため、色は`primary`, `secondary`, `success`などのToken形式で指定します。

![スクリーンショット 2022-12-05 13.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d5fb5c1e-44ab-4cba-3019-be32d903afed.png)

フォントやmargin / paddingについても、`heading`や`small`などの形式で指定する必要があります。

![スクリーンショット 2022-12-05 13.59.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/30cf55d0-d4c9-04dc-04b9-80a993f4d871.png)

## 「どのようなスタイルが設定できるか」を確認する方法

Stripeとライブラリによる制限が強い分、プロパティごとの見た目などについてはドキュメントで網羅されています。

https://stripe.com/docs/stripe-apps/style

Gridレイアウト系のサポート・サンプルが強力ですので、アプリを実装する際にはぜひご活用ください。

```tsx
<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>
```

![スクリーンショット 2022-12-05 14.02.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cf97d7de-6525-c01b-d0b7-b184504dd27f.png)

## `Box`と`Inline`以外の要素でCSSを設定する

基本的に、`Box`と`Inline`以外の要素では、CSSを設定できません。

そのため、`Box`でラップしてレイアウトを調整するなどの対応が必要です。

```tsx

<Box
  css={{
    stack: 'x',
    gap: 'medium',
    alignX: 'start',
  }}
>
  <Img
    src="https://stripe.com/margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
  <Img
    src="https://stripe.com/margin.svg"
    width="484"
    height="207"
    alt="Gross margin"
  />
</Box>
```

`Icon`のカラーなど、一部コンポーネントで特定のパラメータが利用できます。

```tsx
<Icon
  name="cancelCircle"
  css={{fill: 'critical'}}
/>
```



## Stripe Appsひとりアドベントカレンダー 2022

今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。

そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。

https://qiita.com/advent-calendar/2022/stripe-apps

ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。