この記事は、「JP_Stripes Advent Calendar 2022」22日目参加の記事です。よろしくお願いします。

Stripeにkintoneを組み合わせられるか

僕は普段の業務でcybozu社のkintoneを利用した業務システムの提案、構築を行っています。

Stripeを業務で開発利用したことはないです。けど、kintoneのCRMをうまく統合できたら面白いんじゃないかと妄想していました。

だいたいこんな利点があると思うんです。
１）顧客情報を収集してメール送付やマーケティング活動。
２）クレーム管理や決済失敗のフォロー管理など、顧客ごとの問題管理に。
３）ECサイトの運用に関するバックオフィス業務の支援。

kintoneは複数の作業者が1つのデータをもとに協奏する業務が得意なので、Stripeとうまく組み合わせることで運用を潤滑にして、顧客の利用体験の改善にもつながるのではないかと、餅の絵をかいてみました。

認証。あるいはいかにして顧客を見つけられるようになるか。

さあ、お客様に対しての活動を行いたい場合、その「お客様」を特定する必要があります。そう、認証ですね！　Webで活動し、商品購入を行ったユーザーと、支払い義務のある人物を紐づける必要があります。

こんな感じでできるのでは？

インフラには・・・Auth0を利用したい。
うわさはかねがね聞いていましたのでね。
それから僕はReact者なので、中間はNext.jsを利用したいと思います。

Auth0もStripeもユーザーを一意に識別できるキーを持っています。それをkintoneに紐づけ登録します。

正直StripeとAuth0だけであればStripe側にmetadataを持たせればいいのですが、kintone側に持ち出してユーザーへの支援を行いたい狙いがあります。例えば、「サインアップだけできたけど、顧客登録はまだ」というユーザーに対して、メールなどで支援することができますよね。

Nextを利用する場合、認証はサーバー側の戦略になるので、@auth0/nextjs-auth0パッケージが必要になります。UserProvidarで包んで・・・。

import { useUser } from '@auth0/nextjs-auth0/client';

サーバーサイドへの顧客情報の提出はWebAPIで受けます。Next.jsはWebAPIがフロントエンドのReactページと統合管理されているので、もはやAPIをおやつ感覚で書けますね。AWS-AmplifyやFirebaseでNextを使わずに書くときは、明確に別機構のソース管理を受けますからね。

＊ソースコード、だいぶサボってます。命名とか型宣言とか許してね。

カスタマーポータルを提供する

せっかく顧客ごとに認証して識別できるようになったので、顧客にカスタマーポータルを提供したいと思いました。

カスタマーポータルは時間制限があるので、ポータルはアクセス前に作ってあげる必要がありますね。WebAPI側に一度リクエストし、URLを作って提供してみます。StripeSDKめっちゃ優秀ですね！

ボタンを押下したら、WebAPI経由でstripe.billingPortal.session.createでカスタマーポータルを作成し、URL先に飛んでいきます。

kintoneにもリンクを仕込みまくる

kintone側には、Stripe顧客を素早く見つけられるようにしてみます。
Stripeは下記のようなURLパス設計になっていますね
https://dashboard.stripe.com/{{test}}/customers/{{customer.id}}

これはkintoneで簡単に作れそうです！

さあ、これでStripeの顧客とkintoneのレコードがつながりました。

Stripeはパス設計が素晴らしいので、ProductやSubscriptionも同じやり方でkintoneでリンクできちゃうのがいいですね！

Vercelでの公開

さあ、Next.jsプロジェクトが完成したので、Vercelで公開してみます。

Githubでprivateリポジトリ（2020年から無料だって！）を作って、Pushしたら、Vercelから呼び出します。

結果は・・・うーん。なんだか簡単にできてしまって拍子抜け。でした。
いや、いいことなんですが。

公開以降はmasterブランチとの継続的デプロイが入るので、管理も楽々ですね。

ここからどうするか・・・。

構想としては、kintone側にデータを同期して、支払いに問題がある請求の管理や、顧客への販促メール対応など、kintoneが得意なバックヤード業務への支援を充実させたいですね。

Stripeとのデータ同期はNext.js+Vercelだけでは難しいので、データ連携用のバッチを置く必要があるかもしれません。

いろいろ妄想が広がりますが、今回はここまで。

感想をつらつらと

StripeSDKはとっても質感がいい！

PaymentLinksは細かい料金体系が対応していなかったり、数量設定に制限があったり、顧客がチェックアウトごとに作られたり、けっこう面倒くさい。

StripeにGraphQLなげたい。Subscription＞Product＞Pricingなど、IDつながりで紐づるで取得したいのに、クエリをばらばらにしなければならなかったから。

StripeのWebhookにSubscriptionの変更に対応するものがなくて、ちょっと不便だった。（定期のポーリングするしかなさそう・・・。）

Next.jsはAPIが簡単に書けるし、CORS対応もできる。ただし、バッチ処理やスケジュール実行はやっちゃいけない。

Vercelのログがめちゃくちゃフラッシュされるので、ログ機構は別で用意する必要がある。

（正直VercelよりAmplifyのほうが安くて環境のコピーもできて、良かったかなぁ・・・。cloudwatchあるし。）

Vercelのいいところもっと知りたい。

kintoneは相変わらずええな！

という結論でした。

おわり

この記事はStripe初心者がkintone連携妄想を実現する試みでした。
お楽しみいただけましたでしょうか？

お読みいただき、ありがとうございました。