4.9K Views
December 05, 23
スライド概要
決済フロー全体像から学ぶ 決済サービス活用実践LT
Stripe Developer Advocate
決済フロー全体像から学ぶ 決済サービス活用実践 LT Stripeの開発者向け機能による 決済フロー開発・保守の効率化 @hidetaka_dev Updated Apr 2023
👋 Hello! Hidetaka Okamoto(岡本秀高) Developer Advocate @ Stripe 💬 @hidetaka_dev ✉ https://hidetaka.dev AWS Samurai 2017 AWS Community Builder Alexa Champions
Increasing The GDP Of the Internet https://bfcm.stripe.dev/
What is the main reason why businesses want to adopt prebuilt solutions? *岡本訳:構築済みの製品(SaaS / FaaSなど)を採用する理由はなにですか? コスト削減や 市場への投入速度に 関心が高まっている https://stripe.com/lp/state-of-subscription-and-billing
State of payments 運用を開始してから見えてくる「様々な決済コスト」 手数料率 開発生産性 組み込みとメンテナンス 予定外の機能停止 コンプライアンスの維持 不正使用とチャージバック グローバル展開 データ侵害 会計上のオーバーヘッド 技術的負債 柔軟性のないシステム 5
開発時間の41%は、 バグ対応や保守・技術負債に費やされている https://youtu.be/5aqwPlMHFM8
開発時間を どのようにして 効率化するか?
決済フロー全体像から学ぶ 決済サービス活用実践 LT Stripeを利用した「開発効率化」 ● ノーコード・ローコード製品で、 「開発せずに要件を満たす」 ● 開発者向け機能やツールを活用して、 「開発の手間を減らす」 ● LLMなどを用いた 「新しい開発者体験」 8
コードを書かずに、 申し込みフォームや マイページを実装 https://stripe.com/docs/no-code/get-started
“ユーザー向けの画面も用意さ れているので、自社のロゴを入 れるだけで新たに開発する必 要がありません。1週間という "爆速" で実装することができ ました” https://stripe.com/jp/customers/oh-my-teeth
スムーズな請求と回収 メール認証ベースの ノーコード版カスタマーポータル New
ローコードなマイページ組み込み Stripeによる、「段階的な独自UI化」 Payment Links / ダッシュボード ノーコードで素早く開始 ・メールアドレスまたはリンク ・単発・サブスクリプション ・システム連携はWebhook カスタマーポータル メール認証式マイページ ・請求情報の表示 ・決済情報の変更 ・プラン変更・解約など 12
ローコードなマイページ組み込み Stripeによる、「段階的な独自UI化」 Payment Links / ダッシュボード Checkout / 料金表 ノーコードで素早く開始 段階的な「埋め込み化」 ・メールアドレスまたはリンク ・単発・サブスクリプション ・システム連携はWebhook ・リダイレクト型申し込みページ ・APIでシステムと顧客情報を連携 ・後ろの連携は、 ノーコード時代のシステムを活用 カスタマーポータル カスタマーポータル(ディープリンク) メール認証式マイページ 段階的な「埋め込み化」 ・請求情報の表示 ・決済情報の変更 ・プラン変更・解約など ・マイページTOPを独自UIに ・必要な「操作」を、 ディープリンクにて実現 13
ローコードなマイページ組み込み Stripeによる、「段階的な独自UI化」 Payment Links / ダッシュボード Checkout / 料金表 Elements ( JS / iOS / Android ) ノーコードで素早く開始 段階的な「埋め込み化」 独自UIで「ホワイトラベル化」 ・メールアドレスまたはリンク ・単発・サブスクリプション ・システム連携はWebhook ・リダイレクト型申し込みページ ・APIでシステムと顧客情報を連携 ・後ろの連携は、 ノーコード時代のシステムを活用 ・埋め込み型決済フォーム ・より柔軟な決済シナリオ ・Appearance APIによるカスタマイズ カスタマーポータル カスタマーポータル(ディープリンク) APIを利用した独自UI メール認証式マイページ 段階的な「埋め込み化」 独自UIで「ホワイトラベル化」 ・請求情報の表示 ・決済情報の変更 ・プラン変更・解約など ・マイページTOPを独自UIに ・必要な「操作」を、 ディープリンクにて実現 ・Stripe APIをシステムに組み込み ・準備できた機能から順に ディープリンクより移行する 14
ダッシュボードで デバッグの手間を 効率化
Stripe APIの 呼び出し履歴 https://stripe.com/docs/no-code/get-started
Stripe APIの 呼び出し履歴 https://stripe.com/docs/no-code/get-started
ダッシュボードを使ったデバッグの効率化 期間やAPI・メソッド・エラーの種類でフィルタ
ダッシュボードを使ったデバッグの効率化 Webhookに送信したデータとレスポンスは 詳細画面から確認可能
ダッシュボードを使ったデバッグの効率化
error.request_log_urlをSlackやSentryに送信する
{
"error": {
"message": "Finalized invoices can't be updated in this way",
"param": "custom_fields",
"request_log_url": "https://dashboard.stripe.com/test/logs/req_xxxx",
"type": "invalid_request_error"
}
}
ダッシュボードを使ったデバッグの効率化 Webhookイベントの再送信も可能
Next Generation Developer eXperience
必要なデータを 必要なときに 今いるタブで 確認したい
Stripe Workbench ( Private Bata )
ダッシュボード 下部に常駐
Next Generation Developer Experience 直近に発生したAPIエラーの分析とデバッグ
Next Generation Developer Experience APIログやWebhook / イベント履歴もすぐに表示できる APIログ イベント・Webhook履歴 https://stripe.com/sessions 28
Next Generation Developer Experience Stripe Shell: ブラウザから、Stripe APIをそのままテスト
Next Generation Developer Experience API Explorer: テストしたAPIリクエストを 言語別にコード出力
Next Generation Developer Experience システムの「異常」をダッシュボードでお知らせ 頻発しているAPIエラーの通知 直近のAPIエラー数 https://stripe.com/sessions 31
Stripe Workbench (Preview) https://workbench.stripe.dev/workbench
LLMを 活用する https://stripe.com/jp/newsroom/news/stripe-and-openai
開発中 Sigma アシスタント LLMを利用して データ分析用SQLを テキストから生成
開発中 Radarアシスタント LLMを利用して 不正利用対策の ルールを作成
State of payments 表面化しにくいコストを、Stripeで効率化 手数料率 開発生産性 組み込みとメンテナンス 予定外の機能停止 コンプライアンスの維持 不正使用とチャージバック グローバル展開 データ侵害 会計上のオーバーヘッド 技術的負債 柔軟性のないシステム 36
ビジネスのコア機能に 集中する仕組みを 安全かつ効率的に
Next Generation Developer Experience Stripeとダッシュボードを、開発効率化にも活用しよう ノーコード・ローコード製品の段階的活用 Stripe Workbench https://stripe.com/sessions 38
Thanks! 今年もアドベントカレンダーやります! https://adventar.org/calendars/9070 https://stripe.com/sessions 39