この記事は、Stripe Apps を25日間紹介し続ける Advent Calendar 2022 4日目の記事です。
Stripe Appsのアプリを開発することで、決済やサブスクリプションに関するデータの流れやワークフローを自由にカスタマイズできます。
とはいえ、「実際にどんなものが作れるか」や「どんなコードを書くことになるのか」は新しい技術や仕組みを触る前に気になる部分です。
今回は、Stripeが公開しているサンプルアプリの紹介と、テストアカウントでの動かし方をいくつか紹介します。
サンプルアプリは、GitHubで公開中
Stripe Appsのサンプルアプリは、GitHubのstripe-appsリポジトリにて公開されています。
examplesディレクトリに移動すると、2022/12月時点で１０種類以上のサンプルあります。
サンプルアプリのコードを、ローカルで動かす方法
サンプルアプリを動かすには、stripe-appsリポジトリをDLしましょう。
$ git clone https://github.com/stripe/stripe-apps.git
DLした後は、試したいサンプルを選んで、npmライブラリをインストールします。
$ cd stripe-apps/examples/super-todo
$ npm i
最後にStripe CLIでアプリを起動しましょう。
$ stripe apps start
[19:13:25] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview SuperTodo in your Stripe account.
🌐 Press Enter to open the Stripe dashboard
これでサンプルアプリの開発プレビュー版がStripe Dashboardに追加されました。
あとはサンプルのコードをチェックしたり、どんな操作ができるかなどを試してみましょう。
公開されているサンプルアプリを一部紹介
それぞれのサンプルで何ができるかは、ディレクトリ内のREADME.mdにてスクリーンショット付きで紹介されています。
商品発送管理アプリ
「購入された商品の発送管理」をテーマに作られたデモアプリが、[Ship.IO]です。
実際の業務でどのように使えるかなどを、ざっくり把握するのに最適なサンプルの1つです。
ディレクトリに移動して、ライブラリを追加しましょう。
$ cd ship-io/
$ npm i
アプリを起動します。
$ stripe apps start
[22:53:45] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview Ship.IO in your Stripe account.
🌐 Press Enter to open the Stripe dashboard
ログイン画面が表示されますが、ダミーです。
Sign in to Ship.ioをクリックするだけでログインできます。
ログイン後は、「発送用ラベルの印刷」・・・のデモUIが表示されます。
実際にラベルを作成することなどはできませんが、ECの決済処理やサブスクリプションの申し込み管理と並行して、同一画面で関連操作する体験ができます。
腕に自信のある方は、ぜひこのサンプルをもとにあなたのShip.ioを実際に構築してみましょう。
Webhookの自動インストールサンプル
データ連携やオートメーション・自動化系のアプリを作る場合、install-webhooksサンプルでWebhookとの連携方法を学べます。
このサンプルは、[backend]と[frontend]２つを起動する必要があります。
Step1: サーバー側のAPIを起動する
まず、[backend]ディレクトリに移動しましょう。
今回はnodeを選びましたが、goやjavaなどの言語でも起動できます。
$ cd install-webhooks/backend/node
$ npm install
続いてStripe CLIでWebhook APIをローカルにproxyします。
$ stripe listen --forward-to http://localhost:8080/webhook
この際、whsec_から始まるキーがCLI画面に表示されますので、コピーしましょう。
そして、環境変数を配置します。
$ cp ../../.env.example ./.env
.envでは、２つの値を設定しましょう。
STRIPE_API_KEY=sk_test_から始まるStripeのシークレットAPIキー
STRIPE_WEBHOOK_SECRET=`whsec_`から始まるWebhookのシークレット
ここまで用意できれば、あとはサーバーを起動するだけです。
$ npm start
> install-webhooks-example-backend@1.0.0 start
> node .
Server started on http://localhost:8080
Step2: Stripe Appsアプリを起動する
サーバー側の用意ができましたので、Appsアプリも起動しましょう。
まずはこちらもライブラリをインストールします。
$ cd ../frontend
$ npm install
そしてアプリを起動しましょう。
$ stripe apps start
[22:44:09] compiled successfully
💻 Running development server on http://localhost:4242 (^C to quit)
✨ You can now preview Webhooks Example App in your Stripe account.
🌐 Press Enter to open the Stripe dashboard
アプリを起動した直後は、何も表示されていません。
Stripe CLIでstripe customers createを実行したり、ダッシュボードで顧客を新しく登録してみましょう。
$ stripe customers create
{
"id": "cus_MuOMMxv6VJwsPk",
"object": "customer",
"address": null,
"balance": 0,
"created": 1669988836,
...
stripe listen --forward-to http://localhost:8080/webhookを実行している画面のログに、[200]が表示されていれば、連携に成功しています。
2022-12-02 22:47:59 <-- [200] POST http://localhost:8080/webhook [evt_xxx]
成功している場合、アプリを再読み込みすると、データが追加されています。
ログに、400が出ている場合は、環境変数が間違っているか、読み込みできていない可能性があります。
環境変数を確認して、npm startを再実行してみましょう。
Stripe Appsをローカルで動かす際の注意点
1: 一度に複数のアプリは起動できない
複数のサンプルを一度に試そうと、stripe apps startを複数同時に実行すると、エラーが発生します。
stripe apps start
error starting dev server: localhost:4242 is already in use
Are you running stripe apps start on another terminal?
😔 Failed to start development server.
🔧 Please fix any errors before re-running the command.
listen tcp 127.0.0.1:4242: bind: address already in use
Stripe CLIを利用して動かすアプリは、「一度に1つ」です。
[Ctrl + C]などで起動中のアプリを一度停止してから次のアプリを起動しましょう。
2: ポート4242を別アプリで利用しない
サーバー側のAPIを用意する際などで、Stripe Appsアプリ以外が4242ポートを利用しないようにしましょう。
すでに利用済みの場合、stripe apps startを実行しても、「アプリが見つからない」エラーが出ることがあります。
Stripe Appsひとりアドベントカレンダー 2022
今年ベータリリースされたばかりのStripe Appsは、まだ日本語の情報が多くありません。
そこでQiita Advent Calendar 2022にて、毎日Stripe Appsについての情報を投稿します。
ノーコードで利用する方法や、開発するためのTipsなども紹介予定ですので、ぜひ購読をお願いします。