この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 3日目の記事です。
Stripe Appsを利用したアプリを開発する場合、Stripe CLIを利用してプロジェクトを立ち上げます。
今回はStripe CLIでStripe Appをセットアップする方法と、環境や設定のカスタマイズ方法を紹介します。
Stripe CLIでStripe Appsアプリをセットアップする方法
Stripe CLIをインストール・アップグレードする
Stripe CLIはMacOSの場合、Homebrewでインストールできます。
$ brew install stripe/stripe-cli/stripe
WindowsやDockerで利用する方法は、ドキュメントをご覧ください。
stripe versionコマンドで、1.8.11よりも古いバージョンが表示された場合は、次のドキュメントを参考にCLIをアップグレードしましょう。
Stripe CLIで、アプリをテストするStripeアカウントにログインする
Stripe CLIを利用するには、Stripeアカウントとの連携が必要です。
stripe loginで、連携させたいStripeアカウントにログインしましょう。
% stripe login
Your pairing code is: amuse-revive-timely-sturdy
This pairing code verifies your authentication with Stripe.
Press Enter to open the browser (^C to quit)
Stripe Appsプラグインをインストールする
Stripe CLIには、Stripe Apps用のプラグインが用意されています。
$ stripe plugin install apps
インストールに成功した場合、apps --helpでコマンドの説明が表示されます。
$ stripe apps --help
Commands for building Stripe apps
Usage:
stripe apps [command]
Available Commands:
add Add a building block for developing your app
create Create a new Stripe app
grant Grant configuration access to your app
help Help about any command
remove Remove a building block from your stripe-app json
revoke Revoke configuration access to your app
start Start a development server for viewing your app in the Stripe dashboard
upload Upload your app to be submitted for review
Stripe CLIでStripe Appsをセットアップする
いよいよアプリをセットアップします。
stripe apps create <アプリのディレクトリ名>を実行しましょう。
$ stripe apps create first-stripe-app
🖊️ Enter details of your new Stripe app (these can be changed later)と、アプリ設定の質問が表示されます。
アプリIDを入力する
1つ目はアプリのIDです。デフォルトでは、「com.example.apps create <ここに入力した値>」が入力されています。
✔ App ID: com.example.first-stripe-app█
このIDは、グローバルで１つしか選べません。
iOSアプリなどのように、<サービスのドメイン>.<アプリ名>で命名すると、重複などが発生しにくくなります。
アプリの表示名を設定する
続いてアプリの表示名を入力します。
✔ Display name: First Stripe App█
こちらも、CLIで設定した値をベースにデフォルト値が設定されますので、デモや動作確認ではこのまま利用しましょう。
ファイルの配置やライブラリインストール
項目を入力し終わると、ファイルの配置やnpmからのライブラリインストールなどが行われます。
Display name: First Stripe App
✔ Created skeleton files
✔ Created default view
✔ Wrote package.json
...
npm installが実行されるため、ネットワーク環境が安定しない場合や、転送量制限が近い環境ではご注意ください。
完了メッセージの例
セットアップに完了すると、以下のようなメッセージが表示されます。
Inside that directory, you can run several commands:
$ stripe apps start
Start a development server locally for viewing your app in the Stripe dashboard
$ stripe apps add view
Add a new view to your app
$ stripe apps upload
Upload your app to be submitted for review
To get started, try starting the development server from the app directory:
$ cd first-stripe-app
$ stripe apps start
作成したアプリをテスト環境で実行する
セットアップしたアプリを起動するには、アプリのディレクトリ内でstripe apps startを実行します。
実行すると、localhost:4242などにアプリが起動し、Stripeダッシュボードが開きます。
[16:16:18] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview First Stripe App in your Stripe account.
🌐 Press Enter to open the Stripe dashboard
Stripeアカウントで初めてアプリを開発する場合は、まず利用規約への同意が求められます。
その後、アプリのプレビューモードを有効にする画面が開きますので、[続行]を選びましょう。
ダッシュボード右側にウィジェットのような画面が表示されれば、セットアップ完了です。
Stripe Appsでのアプリ開発で利用する言語やフレームワークとTips
2022/11時点で、Stripe Appsでのアプリ開発には以下の知識が必要です。
- React (v17)
- TypeScript
- [リントツール] ESLint
- [テストツール] Jest
Stripe AppsでJavaScriptを利用する
デフォルトではTypeScript(TSX)でファイルが作成されますが、JavaScriptでコンポーネントを定義することも可能です。
import { Box } from "@stripe/ui-extension-sdk/ui";
export const JSDemo = () => (
<Box>Demo jsx file</Box>
)
ただし、UI Extensionライブラリのパラメータ定義などの確認や、静的な型検証によるバグの予防効果などを失うことになりますので、推奨はしていません。
TypeScriptの設定をカスタマイズする
2022/11時点では、プロジェクトの型定義は次のようになっています。
{
"$schema": "https://json.schemastore.org/tsconfig",
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"jsx": "react-jsx",
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"moduleResolution": "node",
"noEmit": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"strict": true
},
"exclude": ["node_modules", ".build"]
}
tsconfig.jsonを編集することで、プロジェクトのルールに合わせたカスタマイズができます。
{
- "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension"
+ "extends": "@stripe/ui-extension-tools/tsconfig.ui-extension",
+ "compilerOptions": {
+ "allowJs": false,
+ "noUnusedParameters": true
+ }
}
アプリのIDや名称を変更する方法
stripe apps createで設定したIDや表示名は、stripe-app.jsonに保存されています。
{
"id": "com.example.first-stripe-app",
"version": "0.0.1",
"name": "First Stripe App",
"icon": "",
...
アプリのアップロード・マーケットプレイスへの公開前であれば、変更するリスクはあまりありません。
もし開発の中で名称を変更する必要が出た場合などでは、stripe-app.jsonを変更しましょう。
Stripe Appsひとりアドベントカレンダー 2022
今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。
そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。
ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。