Stripeを使った効率的なアプリケーション開発の進め方

JP_Stripes 大阪 Stripeを使った 効率的なアプリケーション開発の進め方 岡本 秀高 ( @hidetaka_dev ) 2024/09

岡本 秀高 Stripe Developer Advocate こんな話できます ● ● ● Stripe入門 Stripe製品・実装Deep Dive / ワークショップ 個人的にStripeを使っている経験談 ○ 請求管理 ○ SaaSへの組み込み ○ ノーコードでチケット販売 こんな相談やお話し募集中 Stripeが好きすぎて中の人になった人 ● ● ● ● JP_Stripes京都の元運営 JP_Stripes Connect 2019の実行委員長 Stripe Apps一人アドベントカレンダー完走 [ 継続中 ] QiitaでStripe記事を累計200本以上更新 ● ● ● ● Stripe導入相談 「Stripe導入したよー」のお知らせ 決済やサブスク請求で悩んでいる人の紹介 JP_Stripes(都市名)やりましょう！ https://hidetaka.dev/ja-JP https://wp-kyoto.net https://x.com/hidetaka_dev

• https://hidetaka.dev/ja-JP
• https://wp-kyoto.net
• https://x.com/hidetaka_dev

自分のブログに Stripeを導入 3

なお、 頼まれて作った Payment Links の方が売上ある 4

システム・サービス開発あるある 開発量と 売上は比例しない

アプリケーション開発における課題 人がいない 時間が足りない 売上が足りない

アプリケーション開発における課題 開発できる 人がいない 開発のための 時間が足りない 作ったものの 売上が足りない ● 単純な人不足 ● 他にやるべきことがある ● 売る仕組みがない ● 必要なスキルの欠如 ● 何を作るべきかが ● 売るためにできる施策が ● 採用のための予算と 面接等のリソース問題 不明確なまま進行している ● 効率的な 作り方がわからない 仕様上多くない ● 費用が高すぎる

短期間での収益化と そのための開発リソースの確保が求められている 開発リソースの確保は経営課題 経営幹部の 61% が、 優秀な開発者の確保は成功にとっ て重要な課題だと回答 短期的な収益性の改善がより重要 73% ● ● 短期的な売り上げの向上 コスト削減と効率化

コスパのよい システム / 開発フローとは？

開発のコスパを高めるポイント ● 開発工数や利用料金を安く抑える ● 固定費用や運用・サポートの手間を最小限にする ● 迅速に最初の売り上げを獲得する 10

開発のコスパを高めるポイント ● 開発工数や利用料金を安く抑える ○ できるだけコードを書かずに実現できないか？ ● 固定費用や運用・サポートの手間を最小限にする ○ 今のコストはいくら？自動化できるタスクはある？ ● 迅速に最初の売り上げを獲得する ○ いつ・誰からどうやって請求するか？ 11

作らず、使う UnsplashのSenが撮影した写真

• https://unsplash.com/ja/写真/a-close-up-of-many-different-colored-legos-rgP93cPsVEc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash
• https://unsplash.com/ja/@sen7?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash

13

決済 / 申し込みはノーコードで作れないか？

システム連携できるなら 手動操作も有効な手段

Q: 決済フローを「全て自作」すべきか？ ● 「システム連携があるので、ノーコードはNG」 → 連携が必要な「つなぎ目」はどこ にある？ ● 連携したいのは決済の「前」か「後」か ○ ユーザー体験？それとも業務システムの都合？ 16

ユーザーの動線と社内 / システムフローの分離 手動操作 決済リンク ( ノーコード ) ダッシュボード設定での 注文通知 リダイレクト型 決済フォーム ( ローコード ) ローコードツールでの 外部SaaSとのデータ連携 埋め込み型 決済フォーム （ API組み込み ） Webhookで 申し込み情報処理の カスタムワークフロー 17

後戻りできない状況を できるだけ作らない → Two-way Door UnsplashのBrendan Churchが撮影した写真

• https://unsplash.com/ja/写真/白と黒の一方通行の道路標識-pKeF6Tt3c08?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash
• https://unsplash.com/ja/@bdchu614?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash

まずは問い合わせベースで ユーザーの動線と社内 手動でサブスク契約を作成しよう/ システムフローの分離 手動操作 決済リンク ( ノーコード ) ダッシュボード設定での 注文通知 リダイレクト型 決済フォーム ( ローコード ) ローコードツールでの 外部SaaSとのデータ連携 埋め込み型 決済フォーム （ API組み込み ） Webhookで 申し込み情報処理の カスタムワークフロー 19

ユーザーの動線と社内 / システムフローの分離 手動操作 決済リンク ( ノーコード ) ダッシュボード設定での 注文通知 リダイレクト型 決済フォーム ( ローコード ) ローコードツールでの 外部SaaSとのデータ連携 そろそろ正式ローンチするので、 埋め込み型 ユーザー側で申し込みできる 決済フォーム フローを簡単に用意しよう （ API組み込み ） Webhookで 申し込み情報処理の カスタムワークフロー 20

商談ベースの個別案件は 引き続きダッシュボードから ユーザーの動線と社内 / システムフローの分離 手動操作 決済リンク ( ノーコード ) ダッシュボード設定での 注文通知 リダイレクト型 決済フォーム ( ローコード ) ローコードツールでの 外部SaaSとのデータ連携 そろそろ正式ローンチするので、 埋め込み型 ユーザー側で申し込みできる 決済フォーム フローを簡単に用意しよう （ API組み込み ） Webhookで 申し込み情報処理の カスタムワークフロー 21

ユーザーの動線と社内 / システムフローの分離 手動操作 決済リンク ( ノーコード ) リダイレクト型 決済フォーム ブランディングのため ( ローコード ) 決済フローのデザインも 自社ドメインで管理しよう 埋め込み型 決済フォーム （ API組み込み ） ダッシュボード設定での 注文通知 ローコードツールでの 外部SaaSとのデータ連携 Webhookで 申し込み情報処理の カスタムワークフロー 22

ユーザーの動線と社内 / システムフローの分離 手動操作 決済リンク ( ノーコード ) ダッシュボード設定での 注文通知 リダイレクト型 決済フォーム ( ローコード ) ローコードツールでの 外部SaaSとのデータ連携 埋め込み型 機能開発リソースが足りないので 決済フォーム リダイレクト型に戻してみよう （ API組み込み ） Webhookで 申し込み情報処理の カスタムワークフロー 23

決済後のフローも AWSでローコードに Amazon EventBridgeとのネイティブ連携 AWSのローコードツールで業務フロー構築 https://docs.stripe.com/event-destinations/eventbridge?locale=ja-JP 24

• https://docs.stripe.com/event-destinations/eventbridge?locale=ja-JP

オートメーションで業務フローを自動化 ワークフローのトリガーを指定 社内通知や Webhook連携をカスタマイズ 25

ノーコード / ローコードツール導入時のポイント ● そのツールに要件や業務を合わせる ことができるか？ ● データやイベントをシステムと連携できる か？ ● いつまでツールの仕様に追従 すべきか？ A: 標準化のコアとして使い続ける B: API組み込みへの移行を模索する 26

ノーコード / ローコードツール導入時のポイント ● そのツールに要件や業務を合わせる ことができるか？ ● データやイベントをシステムと連携できる か？ ● いつまでツールの仕様に追従 すべきか？ A: 標準化のコアとして使い続ける B: API組み込みへの移行を模索する C: ノーコードでも APIでも使えるサービスを使う 27

DEV UPDATE 2024 [New] Stripe ConnectのUIをアプリケーションへ埋め込み Embedded Component アカウント作成や入金管理など 出店者が確認・操作したいUIをiframeで CheckoutやElementライクな実装方法 プラットフォーム UXの グラデーション化を実現 リダイレクトUIで素早くローンチ 埋め込みUIでUXをアプリ内に統合 必要に応じて独自のUI要素を開発 https://sizu.me/terms?tab=privacy

• https://sizu.me/terms?tab=privacy

環境の変化に 素早く対応する UnsplashのNOAAが撮影した写真

• https://unsplash.com/ja/写真/昼間の青空に白と黒の建物-Zus94oboIsM?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash
• https://unsplash.com/ja/@noaa?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash

DEV UPDATE 2024 [New] 海外からの支払いをその国の通貨で請求する Adaptive Pricing 機能 海外ユーザーが実際に支払う金額を表示 Stripeが為替レートの計算などを行う 買い手のIPアドレスで提案通貨を判定 Webhookの計算だけ注意 UI側の追加対応は不要( Checkout など ) Webhookでは両方の通貨で取得できる →「どちらの通貨で処理するか」に注意 https://sizu.me/terms?tab=privacy

• https://sizu.me/terms?tab=privacy

DEV UPDATE 2024 [Preview] カスタマーポータルでプランのダウングレード時期をカスタム

DEV UPDATE 2024 生成AIでスタートアップの成長速度がさらに加速 https://sizu.me/terms?tab=privacy https://prtimes.jp/main/html/rd/p/0000000 80.000077879.html

• https://sizu.me/terms?tab=privacy
• https://prtimes.jp/main/html/rd/p/0000000

複雑な料金モデルもシンプルな実装で実現できる

DEV UPDATE 2024 [New] プランごとのアクセス権管理も、 Stripe上で完結 Entitlements ( エンタイトルメント ) 商品ごとに機能リストを登録する サブスクリプションを作成すると、 自動的にcustomerに機能が割り当てられる プランごとのアクセス権管理が 1つのAPIコールで実現 customer_idをAPIに渡すと、 利用できる機能リストが取得できる。 リストにキーがあるかを見て、 表示非表示の制御が可能 https://sizu.me/terms?tab=privacy

• https://sizu.me/terms?tab=privacy

DEV UPDATE 2024 [Preview] アカウント作成時などに、ユーザーへクレジットを付与

DEV UPDATE 2024 [Preview] 使いすぎ防止の利用量アラート機能 / API

https://speakerdeck.com/hideki_ojima/jp-stripes-osaka8?slide=18

• https://speakerdeck.com/hideki_ojima/jp-stripes-osaka8?slide=18

自動化によるコスト削減と、付加価値要素への集中 ● 競合との差別化につながる業務 にリソースを集中 ● そうでない業務を「標準化」 することで効率化 ○ 決済請求管理・認証認可・社内フローなど ● まずは差し込みタスクや並走PJに困っている 開発チームのブロッカーを解除 するところから 38

開発者にとっての RevOps導入ジャーニー ● 課題解決のための決済 SaaS導入 ○ 決済の複雑さや変化への対応コストを外部化する ● 仕組み（ Ops）化でデータ駆動な意思決定へ ○ 顧客や収益性の分析と自動化によるチームの最適化 ● RevOpsとして、全社プロジェクト化 ○ 営業やマーケとの連携によるデータ利活用 39

DEV UPDATE 「決済を知る」ことで、ビジネスの成長に貢献しよう https://stripe.com/jp/customers/awa 40

• https://stripe.com/jp/customers/awa