Stripe Apps + kintoneで 請求業務・顧客サポートを より便利にする方法 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 @hidetaka_dev Sep 2022

今日紹介するもの: KintoneのデータをStripeで利用する 2 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

岡本 秀高 ( @hidetaka_dev ) ● Stripe Developer Advocate (ex-developer in Digitalcube) ● JavaScript / TypeScript developer ● AWS / Next.js / WordPress / etc… ● WordCamp Kyoto 2017 / JP_Stripes Connect 2019 / AWS Samurai 2017 / etc… 3 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 #kintonecafe.jp #JP_Stripes

4 #Stripe #JP_Stripes https://marketplace.stripe.com/

Stripe Apps: Stripeを拡張し、運営を効率化するツール 5 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 運用の効率化 ● 複雑な決済処理フローを簡素化 ● Stripe APIを組み合わせたタスク ● 外部サービスと連携した自動化 ● 独自WF用のPrivateアプリ開発 ツール間のコンテキスト共有 ● Stripeとツールでデータをリンク ● より詳細なビジネス分析 ● CRMでの顧客管理 ● 会計データの自動連携 Why use Stripe Apps? Now available in beta

Stripe Apps活用方法は３種類 A. Privateアプリを開発し、自社で必要なデータ連携や ワークフローの自動化効率化を実現する B. Marketplaceのアプリを組み合わせ、 ノーコードで業務の効率化を実現する C. Marketplaceにアプリを公開し、 自社サービスの顧客獲得を実現する 6 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 #JP_Stripes

機能 Marketplace公開済みアプリの例 会計業務効率化 Xero, Bench マーケティング・CRM・顧客サポート Intercom, Mailchimp, SendOwl コンテンツ・コラボレーション・スケジューリング DocuSign, Dropbox, Nylas 金融業務 Ramp, FundBox 分析 Baremetrics, Chartmogul Climate Persefoni, Climatiq, Vaayu Others (e.g. 税務, データ連携 Exemptax.com, Render Appでできること（例） Stripe Apps 7

機能 Marketplace公開済みアプリの例 会計業務効率化 Xero, Bench マーケティング・CRM・顧客サポート Intercom, Mailchimp, SendOwl コンテンツ・コラボレーション・スケジューリング DocuSign, Dropbox, Nylas 金融業務 Ramp, FundBox 分析 Baremetrics, Chartmogul Climate Persefoni, Climatiq, Vaayu Others (e.g. 税務, データ連携 Exemptax.com, Render Appでできること（例） Stripe Apps 8

9 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 https://kintone.cybozu.co.jp/

Stripe CLIでアプリをセットアップ(IDをメモしておく) 10 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

kintone側でOAuthクライアントを作成 11 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

リダイレクトURLにアプリのIDを含めたURLをセット 12 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

デモ用のアプリを作成 13 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

Stripe Appsとkintoneを接続する 14 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5 GET https://{subdomain}.cybozu.com/oauth2/authorization?client_id=xxx&redirect_uri=xxx&... ● kintoneのOAuth認証画面へのURL ● OAuthクライアントのIDや、Stripe AppsのURLなどを設定する ● Scopeでアクセスしたいリソースを指定しないと、アクセストークンを取得しても APIがHTTP400に POST https://{subdomain}.cybozu.com/oauth2/token ● 認証後にアクセストークン・リフレッシュトークンなどを取得する API URL ● CORSでフロントエンドから呼び出せない様子なので、 ExpressなどでAPIサーバーを用意 ● トークン情報は、 StripeのSecret Store APIで、Stripeアカウント内に保存 *LTなのでコードは割愛 [Stripe SDK] stripe.apps.secrets.find({ name: ‘token’, scope: { type: ‘account’ }, expand: [‘payload’] } ) ● Secret Storeに保存したアクセストークンなどを取得する API ● Scopeをuserにすると、ログインユーザーごとにデータを管理できる ● Stripe Appsで外部サービスと連携するために必須

コードの一部: React / TypeScript 15 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

React(専用UIライブラリ利用)で表示を制御 16 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

完成: 顧客リストデータを、Stripe Dashboardで確認 17 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

Stripe Apps with kintoneの使い所 ● kintoneとStripeのワークフロー統合 ○ Stripeのデータをkintoneに送る ■ 顧客・商品情報をkintone側のアプリに同期 ■ 未払いや返金の記録をkintoneの問い合わせ管理に反映 ○ kintoneのデータをStripeダッシュボードで見る・利用する ■ 返金やプラン変更操作後、 顧客への連絡や対応履歴の記録をStripeダッシュボードでまとめて操作 ■ 案件管理や顧客情報から、 その会社への特別なオファー（見積書・割引クーポン・etc）を作成して送信 18 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

Stripe App MarketPlaceの注意点 ● App MarketPlaceにアプリを公開したり、公開アプリを利用したりできる ● ただしkintone連携アプリは、少し難易度が高そう ○ OAuth2.0 + PKCEでの認証が必須 ○ Stripe Apps側のCORS設定に*（ワイルドカード）が使えない ● 現時点では、個別のクライアントに応じた以下の受託案件化の方が固そう ○ Stripeダッシュボードのカスタマイズ ○ kintoneと連携したワークフローの提案 ○ OAuthやkintone APIを遊ぶ場所 19 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

今後のロードマップ(一部) 20 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5

サンプルコード: https://github.com/stripe/stripe-apps/tree/main/examples ● 開発の参考になるサンプルアプリ群 ○ TODO ○ Webhookインストール ○ OAuth ○ FocusView / SettingsView ○ etc.. ● もしくはQiitaで[ Stripe Apps ]で検索！ https://qiita.com/organizations/stripe 21 kintone Café 名古屋 Vol.8 / JP_Stripes in 名古屋 Vol.5