Stripe Appsの概要【Stripe Appsで決済ワークフロー自動化1】

Stripe Session2022で発表のあったStripeAppについて、導入方法や実現できるワークフローを解説していきます。

Stripe Appとは

まずはおさらい。Atripa Appsとは、『Stripeダッシュボードに自社システムやStripeパートナー企業のアプリケーションを連携させ統合管理する』システムです。

顧客が契約に署名すると請求フローを自動的に開始したり、顧客詳細画面にパートナー企業から取得した情報を表示したりすることができます。

Stripe Appsの解説

Stripe CLIのインストール

まだの場合はこちらから

Stripr CLIを使ってみる

CLIをインストールしたディレクトリに環境変数のパスを通すのを忘れないようにしましょう。

Stripe Apps CLI プラグインをインストール

Stripe AppsはCLIベースで開発を行っていく必要があるため、まずは環境を準備します。

下記コマンドを実行することで必要なプラグインがインストールされます。

stripe plugin install apps

Stripe Appsを作成する

それではまずはテスト用アプリとして「helloworld」アプリを作成します。

stripe apps create helloworld

同意するとアプリの構築が始まります。

しばらくするとコマンドが更新されます。

しばらくするとアプリの構築が完了します。

アプリ構築後には「ここにディレクトリを作成したよ」と教えてくれていますね。

青字で書いてあるものは主要なコマンドの説明になります。

stripe apps start

開発サーバを立ち上げて、ローカル環境でアプリを動作させることができます

stripe apps add views

新しいviewファイルを追加することができます

stripe apps upload

編集したファイルを本番用にアップロードします

コマンドを実行していたディレクトリに新たにアプリ名のディレクトリが作成されます。この中にアプリに必要なファイルが生成されています。

Stripe Appsを動かしてみる

アプリを動かすにはまず、作成したアプリのディレクトリに移動します。

その後にアプリ実行のコマンドを発行します。

cd helloworld
stripe apps start

プレビューの承認待ちになります。Enterを押してブラウザを開きます。

ブラウザにて承認を行えば、アプリのプレビューが完了しStripeダッシュボードにアプリが読み込まれます。

Stripe Appsサンプル

テストで作成したStripe Appsがどのように表示されるかをStripeダッシュボードで確認します。

きちんと表示されていますね。

Appビューは顧客詳細ページでのみ有効になっています。

Stripe Appsカスタマイズ

アプリをカスタマイズするためには、アプリ構築時に生成されたファイルを編集していきます。

まずはタイトルの「Hello World」を変更しましょう

変更するのは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ファイルを編集した内容がすぐに反映されます。

これでviewファイルの編集方法もわかりましたね。

まとめ

Stripe Appsは決済に関連する業務を自動化できるなど、多くの可能性を秘めています。

今回はStripe Appsに慣れるためにテストアプリの構築まで行いましたが、今後は本格的にワークフローの構築などを行っていきます。