この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 5日目の記事です。
Stripe AppsアプリのUIは専用フレームワークで構築する
Stripe Appのアプリを構築するには、専用のUIフレームワークを利用する必要があります。
@stripe/ui-extension-sdkのインストール方法
stripe apps createでセットアップしたアプリには、デフォルトでインストールされています。
現状、Stripe CLI以外を利用してアプリを開発することはありませんので、基本的に手動インストールの必要はありません。
[Tips]: Stripe Appsの外で動かすには、@remote-ui/reactを使う
Stripe AppsのUIフレームワークは、内部で@remote-uiを利用しています。
そのため、Apps以外で利用したい場合は、こちらの設定なども必要ですのでご注意ください。
Remote UIの仕組みなどについては、Shopifyのブログにて紹介されています。
実装はReactとTypeScrtriptを利用
このフレームワークは、TypeScriptとReactをベースに作られています。
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が、提供されたコンポーネントを配置するだけで実装できます。
この画像のマークアップは、一部簡略化した形ですが、おおよそこのような書き方をします。
<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タグは利用できません。
エラーになるコードの例
const App = ({ userContext, environment }: ExtensionContextValue) => {
return (
<div>
<h1>Hello</h1>
</div>
)
divやh1は@stripe/ui-extension-sdkで定義された要素を使用していませんので、エラーが発生します。
誤って利用しないように、ESLintのルールも設定されています。
この他の制約事項については、以下のドキュメントをご確認ください。
コンポーネントの分割や、Context / Providerなどは利用可能
Reactをベースにしていますので、コンポーネントの分割もできます。
import { FC } from 'react'
import { Box } from '@stripe/ui-extension-sdk/ui'
const Greeding: FC = () => {
return (
<Box>Hello World</Box>
)
}
また、useStateやcreateContextも利用できます。
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のドキュメントサイトには、要素ごとのプロパティや描画サンプルなどを紹介するページがあります。
記事で紹介されているサンプルコードを動かしながら、使い方などを調べることができます。
方法2: Figmaのデータを利用する [デザイナー向け]
コンポーネントの情報は、Figmaに公開されています。
このデータを利用して、アプリのUIデザインを作成できます。
Stripe Appsひとりアドベントカレンダー 2022
今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。
そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。
ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。