Stripe Appsの概要【Stripe Appsで決済ワークフロー自動化1】
Stripe Session2022で発表のあったStripeAppについて、導入方法や実現できるワークフローを解説していきます。
Stripe Appとは
まずはおさらい。Atripa Appsとは、『Stripeダッシュボードに自社システムやStripeパートナー企業のアプリケーションを連携させ統合管理する』システムです。
顧客が契約に署名すると請求フローを自動的に開始したり、顧客詳細画面にパートナー企業から取得した情報を表示したりすることができます。
Stripe CLIのインストール
まだの場合はこちらから
CLIをインストールしたディレクトリに環境変数のパスを通すのを忘れないようにしましょう。
Stripe Apps CLI プラグインをインストール
Stripe AppsはCLIベースで開発を行っていく必要があるため、まずは環境を準備します。
下記コマンドを実行することで必要なプラグインがインストールされます。
stripe plugin install apps
Stripe Appsを作成する
それではまずはテスト用アプリとして「helloworld」アプリを作成します。
stripe apps create helloworld
![Stripe Apps利用規約](https://syuntech.net/wp-content/uploads/2022/06/6e514083e4cb4a8f6946eeadbb6241e6.png)
同意するとアプリの構築が始まります。
しばらくするとコマンドが更新されます。
![Stripe Appsアプリ構築後のコマンドライン](https://syuntech.net/wp-content/uploads/2022/06/31d38d2764cb6dd81fad5e914c20bd88-1024x318.png)
しばらくするとアプリの構築が完了します。
![Stripe Appsアプリ構築完了](https://syuntech.net/wp-content/uploads/2022/06/e5a044770136ec3f346b528f5a170e5b-1024x285.png)
アプリ構築後には「ここにディレクトリを作成したよ」と教えてくれていますね。
青字で書いてあるものは主要なコマンドの説明になります。
stripe apps start
開発サーバを立ち上げて、ローカル環境でアプリを動作させることができます
stripe apps add views
新しいviewファイルを追加することができます
stripe apps upload
編集したファイルを本番用にアップロードします
コマンドを実行していたディレクトリに新たにアプリ名のディレクトリが作成されます。この中にアプリに必要なファイルが生成されています。
![Stripe Appsアプリ構築後のディレクトリ構成](https://syuntech.net/wp-content/uploads/2022/06/eef996b5ed7a0d0d5f176e468a925c70.png)
Stripe Appsを動かしてみる
アプリを動かすにはまず、作成したアプリのディレクトリに移動します。
その後にアプリ実行のコマンドを発行します。
cd helloworld stripe apps start
![Stripe Apps 開発サーバ実行](https://syuntech.net/wp-content/uploads/2022/06/5e652bf993aa21a2477719bab88adf5f.png)
プレビューの承認待ちになります。Enterを押してブラウザを開きます。
ブラウザにて承認を行えば、アプリのプレビューが完了しStripeダッシュボードにアプリが読み込まれます。
![Stripe Appsアプリのプレビュー画面](https://syuntech.net/wp-content/uploads/2022/06/6e1b27c13aba334f1b074b46782618b2.png)
Stripe Appsサンプル
テストで作成したStripe Appsがどのように表示されるかをStripeダッシュボードで確認します。
![Stripe Apps ダッシュボード画面](https://syuntech.net/wp-content/uploads/2022/06/e9e3fc46d696c100e2a54c5be82dd23b-1024x678.png)
きちんと表示されていますね。
Appビューは顧客詳細ページでのみ有効になっています。
Stripe Appsカスタマイズ
アプリをカスタマイズするためには、アプリ構築時に生成されたファイルを編集していきます。
まずはタイトルの「Hello World」を変更しましょう
![Stripe Apps 編集前画面](https://syuntech.net/wp-content/uploads/2022/06/d876e5276ef413c83be96ab0c4b7e1ff-1024x774.png)
変更するのはApp.tsxです
変更前
const App = ({ userContext, environment }: ExtensionContextValue) => { return ( <ContextView title="Hello world" brandColor="#F6F8FA" // replace this with your brand color brandIcon={BrandIcon} // replace this with your brand icon externalLink={{ label: "View docs", href: "https://stripe.com/docs/stripe-apps" }} >
変更後
const App = ({ userContext, environment }: ExtensionContextValue) => { return ( <ContextView title="my dashboard" brandColor="#F6F8FA" // replace this with your brand color brandIcon={BrandIcon} // replace this with your brand icon externalLink={{ label: "View docs", href: "https://stripe.com/docs/stripe-apps" }} >
開発サーバを実行した状態であればApp.tsxファイルを編集した内容がすぐに反映されます。
![Stripe Apps 編集後画面](https://syuntech.net/wp-content/uploads/2022/06/fe86cece116b9788612ce632f1aee435-1024x774.png)
これでviewファイルの編集方法もわかりましたね。
まとめ
Stripe Appsは決済に関連する業務を自動化できるなど、多くの可能性を秘めています。
今回はStripe Appsに慣れるためにテストアプリの構築まで行いましたが、今後は本格的にワークフローの構築などを行っていきます。