Stripe AppsでアプリUIを構築するための、`@stripe/ui-extension-sdk`入門


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

![スクリーンショット 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 Appのアプリを構築するには、専用のUIフレームワークを利用する必要があります。

https://www.npmjs.com/package/@stripe/ui-extension-sdk

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

### `@stripe/ui-extension-sdk`のインストール方法

`stripe apps create`でセットアップしたアプリには、デフォルトでインストールされています。

現状、Stripe CLI以外を利用してアプリを開発することはありませんので、基本的に手動インストールの必要はありません。

#### [Tips]: Stripe Appsの外で動かすには、`@remote-ui/react`を使う

Stripe AppsのUIフレームワークは、内部で`@remote-ui`を利用しています。

https://github.com/Shopify/remote-ui

そのため、Apps以外で利用したい場合は、こちらの設定なども必要ですのでご注意ください。

Remote UIの仕組みなどについては、Shopifyのブログにて紹介されています。



### 実装はReactとTypeScrtriptを利用

このフレームワークは、TypeScriptとReactをベースに作られています。

```tsx
import { Box } from "@stripe/ui-extension-sdk/ui";

export const Demo = () => (
    <Box>Hello World</Box>
)
```

JavaScriptでも利用できますが、コンポーネントの型情報をIDE内で確認できるTypeScriptをお勧めします。

## `@stripe/ui-extension-sdk`で、「Stripe Dashboardと統一された」UIを構築

このフレームワークを利用するメリットは、「Stripeのダッシュボードに馴染んだUIを簡単に作れる」ことです。

ダッシュボードに埋め込むためのレイアウトや、フォーム・ボタンなどのUIが、提供されたコンポーネントを配置するだけで実装できます。

![スクリーンショット 2022-12-05 11.56.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/56deaaef-e65d-6a2f-349a-94d21f3d407e.png)

この画像のマークアップは、一部簡略化した形ですが、おおよそこのような書き方をします。

```tsx
    <ContextView
      title='Querystring Builder'
      brandColor='#F6F8FA'
      externalLink={{
        label: 'Learn about querystrings',
        href: 'https://stripe.com/docs/payments/payment-links#selling',
      }}
      actions={
        <Box
          css={{
            stack: 'y',
            gap: 'medium',
          }}
        >
          <Button
            type='primary'
            css={{ width: 'fill', alignX: 'center' }}
            onPress={() => isOpen(!open)}
          >
            Generate QR code
          </Button>
        </Box>
      }
    >
...
```

### [注意] `@stripe/ui-extension-sdk`の要素以外（HTML）などは使えません

Sandboxを利用して描画していることなどの理由から、通常のHTMLタグは利用できません。

![extensions-structure.d6d4d0512ef2194eda5c7ffd214e894e.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d50da704-c7d7-00cc-6957-4d6a2ca2365b.jpeg)
https://stripe.com/docs/stripe-apps/how-ui-extensions-work#ui-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B


**エラーになるコードの例**

```tsx
const App = ({ userContext, environment }: ExtensionContextValue) => {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
```

`div`や`h1`は`@stripe/ui-extension-sdk`で定義された要素を使用していませんので、エラーが発生します。

![スクリーンショット 2022-12-05 12.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/54f8568f-8530-7e0a-e80b-b5b235d1d26e.png)

誤って利用しないように、ESLintのルールも設定されています。

![スクリーンショット 2022-12-05 12.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/338db885-db0b-3fa5-42e2-b05dc9fe28db.png)

この他の制約事項については、以下のドキュメントをご確認ください。

https://stripe.com/docs/stripe-apps/how-ui-extensions-work#%E3%82%B5%E3%83%B3%E3%83%89%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E5%88%B6%E9%99%90%E4%BA%8B%E9%A0%85


### コンポーネントの分割や、Context / Providerなどは利用可能

Reactをベースにしていますので、コンポーネントの分割もできます。

```tsx
import { FC } from 'react'
import { Box } from '@stripe/ui-extension-sdk/ui'

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

また、`useState`や`createContext`も利用できます。

```tsx
import { FC, createContext , useState } from 'react'
const ExampleContext = createContext({
  flag: true
})
const ExampleProvider:FC = ({children}) => {
  const [flag, setFlag] = useState(false)
  return (
    <ExampleContext.Provider
      value={{
        flag
      }}
    >
      {children}
    </ExampleContext.Provider>
  )
}

```

## 利用できるコンポーネントを調べる方法

どのようなコンポーネントが利用できるかを調べるには、２つの方法があります。

### 方法1: stripe.com/docsのサイトで調べる [開発者向け]

Stripeのドキュメントサイトには、要素ごとのプロパティや描画サンプルなどを紹介するページがあります。

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

記事で紹介されているサンプルコードを動かしながら、使い方などを調べることができます。

### 方法2: Figmaのデータを利用する [デザイナー向け]

コンポーネントの情報は、Figmaに公開されています。

![スクリーンショット 2022-12-05 12.20.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/cbe34d9a-5b5e-9da1-21c1-72778a290f7b.png)


https://www.figma.com/community/file/1105918844720321397

このデータを利用して、アプリのUIデザインを作成できます。

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

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

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

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

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