Stripeノーコード挑戦記 決済画面構築の山あり谷あり

【connpass】
https://jpstripes.connpass.com/event/288270/

Transcript

1. Stripeノーコード挑戦記 決済画⾯構築の⼭あり⾕あり JP_Stripes 福岡Vol.10 – ノーコード・ローコードとビジネスの成⻑ ⼭路 直⼈
2. • Fusic CO.LTD • 技術創造部⾨ エンジニア • Ruby • Stripe初案件完了 ⼭路 直⼈ ( やまじ なおと ) @NaotoCoding @NaotoCoding ⾃⼰紹介
3. 3 1. ノーコードでの実装を選択した経緯 2. 困ったこと＆あったら嬉しい機能 3. 実装する上で学んだこと 4. Stripeですごい︕と思ったこと 5. まとめ、伝えたいこと ⽬次
4. 1ノーコードでの実装を選択した経緯
5. ノーコードでの実装を選択した経緯 • サブスクリプションの契約画⾯作成 • 売上データ等のCSVエクスポート • 1ヶ⽉間でミニマムでリリースしたい (︕︖) まずStripeで何をしたかったの︖
6. ノーコードでの実装を選択した経緯 短期間でのリリース、どうすれば、、、 • 0からのアプリ構築だとリリースに間に合わない ◦ StripeのAPIを使⽤ ◦ インフラ構築 ◦ 拡張性を考えながらのコーディング
7. ノーコードでの実装を選択した経緯 の使⽤で間に合うかも︖ • ノーコードで決済画⾯の構築が可能︕ • デザインや⼀部機能のカスタマイズもノーコードで︕
8. 2 困ったこと＆あったら嬉しい機能
9. 前提 ＋ ウォーターサーバー(⽉次請求) 初回契約⼿数料(⼀括請求) 今回の商品の実装例
10. 困ったこと① 契約画⾯での商品表⽰順序
11. 達成したかったこと • お客様が利⽤しやすい画⾯ • 安⼼して契約できる画⾯ 困ったこと① 契約画⾯で商品表⽰順序
12. 困ったこと① 契約画⾯で商品表⽰順序 PCの場合 • 綺麗︕ • シンプルで分かりやすい︕
13. 困ったこと① 契約画⾯で商品表⽰順序 スマホの場合 • ⼿数料がメインみたい • 詳細⾒てやっと安⼼
14. 困ったこと① 契約画⾯で商品表⽰順序 理由はシンプル • ⼀括⽀払いの商品が優先して表⽰される︕ • 現在のStripeではこの変更はできない
15. 困ったこと① 契約画⾯で商品表⽰順序 あったら嬉しい︕ • 商品表⽰順序を⾃由に変更できる機能︕ • ⼀括⽀払い、継続⽀払いに関わらず、、、
16. 困ったこと② 購⼊個数を合わせたい︕
17. 困ったこと② 購⼊個数を合わせたい︕ 商品別に購⼊個数を選択可能 を使うと
18. 困ったこと② 購⼊個数を合わせたい︕ 達成したかったこと • ウォーターサーバーの複数台契約 • 初回契約⼿数料の契約台数分請求 ×３ ×３ ＋
19. 困ったこと② 購⼊個数を合わせたい︕ ２つの商品の購⼊個数を⾃動で⼀致させることは不可能 • 本来なら ◦ 2000 × 2 ＋ 3000 × 2 ◦ ￥10000請求したい︕
20. 困ったこと② 購⼊個数を合わせたい︕ 今回の実装では、複数購⼊機能⾃体をストップした
21. あったら嬉しい︕ • 購⼊個数を⾃動で⼀致させる機能 • 絶対需要あり︕ 困ったこと② 購⼊個数を合わせたい︕
22. 困ったこと③ 無料トライアル期間の罠
23. 困ったこと③ 無料トライアル期間の罠 契約画⾯にカスタムフィールドを設置可能
24. 困ったこと③ 無料トライアル期間の罠 ⼊⼒された内容は「⽀払い詳細」画⾯にて確認可能
25. 達成したかったこと (初期段階で達成していたこと) • 「⽀払い詳細」画⾯で ◦ カスタムフィールドへの⼊⼒内容確認 ◦ 配送先の住所をCSVエクスポート 困ったこと③ 無料トライアル期間の罠
26. ある⽇ • お客様「無料トライアル期間を設けたい︕」 • 僕「はーい、できますよ〜」 困ったこと③ 無料トライアル期間の罠
27. 困ったこと③ 無料トライアル期間の罠 無料トライアル期間を設置可能
28. 無料トライアルまでノーコードで凄い︕けど • 期間中お⾦が動かない • ⽀払い詳細画⾯が、作られない︕︕ • ⼊⼒内容と住所が確認できない︕︕ 困ったこと③ 無料トライアル期間の罠
29. 困ったこと③ 無料トライアル期間の罠 APIログや顧客の詳細画⾯から個別に⾒てもらうことに 僕の、Stripeの仕様理解の⽢さの結果
30. • お客様が⼊⼒された内容を確認できる画⾯ • CSVエクスポートできるとさらに嬉しい︕ 困ったこと③ 無料トライアル期間の罠 あったら嬉しい︕
31. 困ったこと④ カスタマーポータルの仕様
32. 困ったこと④ カスタマーポータルの仕様 達成したかったこと • カスタマーポータルで ◦ 購⼊情報を確認 ◦ お客様情報の更新 ▪ クレジットカード ▪ 名前
33. 困ったこと④ カスタマーポータルの仕様 まず、「顧客」について 太郎さんが契約すると、「顧客」として登録される
34. 困ったこと④ カスタマーポータルの仕様 後⽇、、、 太郎さん別商品を契約すると、「顧客」が新しく登録される 「顧客」はメールアドレスの重複を許す仕様
35. 困ったこと④ カスタマーポータルの仕様 ⼀⽅、カスタマーポータルは、、、 • メールアドレスでのログイン • そのメールアドレスを持つ最新の 顧客の画⾯が表⽰される
36. 困ったこと④ カスタマーポータルの仕様 つまり、、、 カスタマーポータルで確認できるのは下の顧客情報のみ︕ 古い契約情報を確認できない︕
37. 困ったこと④ カスタマーポータルの仕様 実装時に考えていた対応策 • ポータルURLを発⾏する機能 • 電話⼝でお客様情報を確認して適 切なURLを送ってあげれば、、、
38. 困ったこと④ カスタマーポータルの仕様 URL発⾏は、テスト環境でのみ可能な機能だった、、、 対応策が不発、、、 Stripeの理解が強ければ最初から違う提案ができたはず
39. 困ったこと④ カスタマーポータルの仕様 無念、、、 お客様と話し合い、カスタマーポータルの導⼊を断念 (もちろん、ローコードでの解決は可能です︕︕︕)
40. • 顧客のメールアドレスの重複を許さないようにする設定 • 新しい契約は既存の顧客に紐付け︕ あったら嬉しい︕( 難しそう、、、) ＝ 同⼀⼈物とみなす 困ったこと④ カスタマーポータルの仕様
41. • テストと本番の区別がはっきりわかるデザイン︕ • テスト環境のみの機能はボタンの⾊を⼤きく変える あったら嬉しい︕ 困ったこと④ カスタマーポータルの仕様 分かりやすい︕︕︕
42. 困ったこと⑤ Stripeの理解がとても⽢い
43. 困ったこと⑤ Stripeの理解がとても⽢い 達成したかったこと • ⾒積もりの期間内での納品 • ⼯数をノーコードで削減する • スムーズなお客様とのやりとり
44. 困ったこと⑤ Stripeの理解がとても⽢い 特に時間がかかったこと① • 「〜できますか︖」「〜の部分はどうなっていますか︖」への回答 ◦ 想像以上の質問量
45. 困ったこと⑤ Stripeの理解がとても⽢い 特に時間がかかったこと② • 情報整理 ◦ 商品 ◦ プラン ◦ キャンペーン ◦ 解約料 ◦ 送料
46. 困ったこと⑤ Stripeの理解がとても⽢い Stripeをもっと知っていれば、、、 • ⼀つ⼀つの質問への回答に困らなく、時間も削減 • 情報整理の⽅法、お客様からの必要情報の聞き出し⽅
47. 3 実装する上で学んだこと
48. 学んだこと① 影響範囲を理解する
49. 実装する上で学んだこと① 影響範囲を理解する 影響範囲を理解する • 今回は無料トライアル期間 ◦ ⽀払いのCSVエクスポートができなくなる︕︕
50. 学んだこと② 環境を常に意識する
51. 実装する上で学んだこと② 環境を常に意識する テスト環境でしかできないことは何個かある︕ • テストでできるから本番でもできる︕は罠 ◦ 特定顧客へのカスタマーポータルのURL発⾏ ◦ カスタマーポータルでのメールアドレスを表⽰、編集
52. 学んだこと③ すぐに実装しない
53. 学んだこと③ すぐに実装しない ノーコードでは、以下の順序での⾏動がオススメ (注意) 完了してから次のステップに進むこと︕
54. 1. 業務フローを全て理解 • 5W1Hで理解し、まとめておく • お客様の経理部署で必要な情報 も確認 実装する上で学んだこと③ すぐに実装しない
55. 2. お⾦の動く部分、条件をリストアップ • ⼿数料など、商材でなくても • ⾦額に条件がある場合、条件も リストアップ 実装する上で学んだこと③ すぐに実装しない 実装する上で学んだこと③ すぐに実装しない
56. 困ったこと① 契約画⾯で商品表⽰順序 3. できることリストとソリューションをお客様に提⽰ • あらかじめリストは作成しておく • テスト⽤アカウントでデモを提⽰するのが吉 • 要件を固める
57. 4. 商品の情報を提供してもらう • 商品情報は商品登録に必要な情報 ◦ 商品名 ◦ 説明 ◦ 画像 ◦ ⾦額 ◦ ⾦額の条件 実装する上で学んだこと③ すぐに実装しない 実装する上で学んだこと③ すぐに実装しない
58. 5. 迅速に実装 • 今までの情報をもとに実装 • 迅速に︕ • ダブルチェックは忘れずに︕ 実装する上で学んだこと③ すぐに実装しない 実装する上で学んだこと③ すぐに実装しない
59. 6. お客様に確認してもらう • 実装完了から確認のお願いまで 素早く • デモを⾒せているので仕様変更 はかなり減っている(はず) 実装する上で学んだこと③ すぐに実装しない 実装する上で学んだこと③ すぐに実装しない
60. 4 Stripeですごい︕と思ったこと
61. すごいと思ったこと① ノーコードでの実装
62. • 決済システムの構築は⼤変(らしい) • インフラ整備も必要なし︕ • 本番実装までできる コーディング不要というオプション すごいと思ったこと① ノーコードでの実装
63. すごいと思ったこと② ドキュメントの⾒やすさ
64. • 統⼀されたデザイン ドキュメントがシンプル すごいと思ったこと② ドキュメントの⾒やすさ
65. • ページ⾃体とても軽くて速い • 積み重ねで⼯数削減につながる ドキュメントが軽い すごいと思ったこと② ドキュメントの⾒やすさ
66. ドキュメントの検索が便利 すごいと思ったこと② ドキュメントの⾒やすさ • 検索がとにかく早い • サジェストが便利
67. すごいと思ったこと③ カスタマーサポートの充実
68. レスポンススピード早すぎて素晴らしい すごいと思ったこと③ カスタマーサポートの充実 • チャット対応 • 電話対応
69. すごいと思ったこと③ カスタマーサポートの充実 • 担当範囲を把握している ◦ その場で答えられないものは担当者に確認してくれる ◦ 担当者間の連絡がとてもスムーズ サポートの⽅の丁寧な対応
70. すごいと思ったこと③ カスタマーサポートの充実 • 何で困っているのか画⾯の動きで説明できる ◦ 単語の誤解が減る ◦ 状況を伝えやすい ⾃分のアカウントでサポートの⽅もログインできる
71. 5 まとめ、伝えたいこと
72. まとめ、伝えたいこと Stripeを学ばずに、ノーコードに踏み込むのは危ない︕ ちゃんと学べば強⼒な武器になります
73. ご清聴ありがとうございました。