トラパンツ代行アプリでStripeを使ってみた こうなった

1. トラパンツ代行アプリで
Stripeを使ってみた
こうなった
株式会社トラパンツ
三浦 幸一

2. 自己紹介
 名前：三浦 幸一（みうら こういち）
 出身：秋田県秋田市
 年齢：26歳（1991.10.15）
 経歴：高校卒業後、コンピュータとプログラムを学びに静岡の大学へ進学。
東京に２年勤めた後、色々あり秋田に戻ることを決意。
Aターンシステムでたまたま募集があったトラパンツに縁あって入社。
アプリケーションの開発をメインに担当し、現在に至る。
 業務内容：運転代行配車アプリ「DAIKO」の開発
ECサイトの構築

3. 代行アプリとは？

4. 代行アプリとは？
 基本機能
 代行ドライバーをマッチングして、電話することなく代行
を呼べる
 現在地や目的地もスマホで教える
 呼ぶ前に料金がわかる

5. • アプリの開発経験が無く（スマホを持ったのが社会人になってから）
• サーバーサイドの開発経験が無く（元は組み込みプログラマ）
• クレジットカードなんてほとんど使わない（Amazonはネットバンク振込）
• お酒が１滴も飲めない（代行を使う必要がない）
当時のワタシ

6. 代行アプリとは？
 独自機能

8. ここからは
大した知識もない開発者による、
アプリでのキャッシュレス決済を行った、
ドキュメンタリーである。
題して

9. ペイ

10. 北の国から
’16.09 調査
• オンライン決済サービスのうち、
Stripeにした経緯とは？
’17.01 開発
• テスト用のAPIキーで実際に
使ってみた
’17.08 適用
• 本番用のAPIキーにしてみたら
こうなった
’17.12 運用
• 感動の初回決済
• ピンチを救ってくれたStripe管理画面
ペイ
’18.04 遺言
• まとめ

11. ’16.09 調査
オンライン決済サービスのうち、
Stripeにした経緯とは？

12. オンライン決済サービスを決めよう
決めるにあたっての条件
 カード情報を、こちらのDBやファイルに保持しない
 API方式で利用できる
 払い戻し等の事務処理がカンタンにできる
 決済手数料はなるべく控えめで

13. オンライン決済サービスを決めよう
見つけてきたよ！
先輩

14. WebPay
 カード情報を、こちらのDBやファイルに保持しない
→トークンでやり取りできる
 API方式で利用できる
→当たり前のようにできる
 払い戻し等の事務処理がカンタンにできる
→管理画面からサクっとできそう
 決済手数料はなるべく控えめで
→3.4%+30円

15. ところが…

16. WebPayがなくなってしまったので
もうちょっと探してみよう！
先輩

17. 比較
 カード情報を、こちらのDBやファイルに保持しない
→みんな大丈夫
 API方式で利用できる
→PayPalはめんどくさそう
 払い戻し等の事務処理がカンタンにできる
→どれもできるんじゃないの
 決済手数料はなるべく控えめで
→どれも誤差みたいな範囲 結論
どれでもいい

18. どれにしよう
にしたよ！
先輩
どうしてですか？

19. 決め手
電話したら担当の人が良い人だったから！
先輩
理由：担当者の人柄
に決定！

20. ’17.01 開発
テスト用のAPIキーで実際に使ってみた

21. カードまわりの操作に必要なもの
 APIキー
 Stripeのアカウントを発行したときにもらえる。
 カードの登録・決済に必要。
 こんな感じの文字列
 カスタマーID
 カード情報を登録したときにもらえる。
 決済に必要。
 こんな感じの文字列

22. 使い方① 〜カード情報登録〜
カード情報
カード情報
カスタマーID
カスタマーID

23. もうちょっと詳しく①
入力内容を
ハンドリングする
jsが用意されている
HTML
画面

24. もうちょっと詳しく②
Submitを掴む
HTML画面
トークンを生成
トークンをPOSTにのせる

25. もうちょっと詳しく③
さっきのトークンを取得
トークンを使って
カスタマーIDを生成
できたカスタマーIDを
自前のDBに保存
PHP

26. 使い方② 〜決済編〜
ユーザーから
決済要求
カスタマーIDと
決済金額
決済結果
ユーザーID カスタマーID
決済完了通知
決済処理

27. もうちょっと詳しく
例外が発生しなければ
決済成功
例外が発生したら
決済失敗
ex）パラメータが不正
登録したカードがアカン
電波が悪い
必要なパラメータを入れて
決済開始
PHP

28. ’17.08 適用
本番用のAPIキーにしてみたらこうなった

29. 本番に切り替えよう
といってもやることは
これを

30. 本番に切り替えよう
といってもやることは
こうするだけ

31. ほんまになってるんかいな
ということで自分のカードで登録してみました

32. 管理画面から見てみる
入力したカード情報が
管理画面に登録されている

33. ちなみに
これの加工前の画像は、
ワタシのGoogleドライブの
中に格納されています

34. 本番決済してみよう
ユーザーから
決済要求
カスタマーIDと
決済金額
決済結果
ユーザーID カスタマーID(本番)
決済完了通知

35. 管理画面からみた決済結果
見事に成功しました。

36. ’17.12 運用
感動の初回決済
ピンチを救ってくれたStripe管理画面

37. いよいよ運用開始
2017年12月7日から一般ユーザー向けに
運用を開始しました。
果たして…

38. いよいよ運用開始
入金を確認！

39. ところが…
決済確認ボタンの挙動がいまいちで、
ボタンを何回も押す人が続出
その結果…
ひとつのトランザクションで、
決済が多重に発生してしまう事態が発生

40. 返金処理をするには？①
じつは管理画面の決済ごとに
こんなボタンが

41. 返金処理をするには？②
それっぽいボタンを押すだけで
あっさり返金処理が可能
管理画面のおかげで
ピンチ脱出！

42. ’18.04 遺言
まとめ

43. まとめ
 開発
 APIキーとカスタマーIDのセットでカード登録・決済ができる
 リファレンスのドキュメントは英語であるものの、
サンプルや例が豊富
 適用
 テスト環境と本番環境をAPIキーでカンタンに区別
 運用
 管理画面でワンタッチ返金

44. への遺言
 API形式ではJCBカードが使えないので、
対応してくれると超うれしいです。

45. 北の国から
ペイ
トラパンツ代行アプリで
Stripeを使ってみた
こうなった
おわり