Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stripeではじめての決済

8843d0fb02a3688513a890bd23a5fa3c?s=47 acomagu
November 08, 2019

 Stripeではじめての決済

- なぜ Stripe を採用したの?
- サポートの充実度
- Stripe + Auth0 でデータベースレスアプリケーション
- 多重決済の防止
etc.

191008 #JP_Stripes in 会津
株式会社デザイニウム
伊藤勇希 @acomagu

8843d0fb02a3688513a890bd23a5fa3c?s=128

acomagu

November 08, 2019
Tweet

Transcript

  1. Stripe で はじめての決済 191008 #JP_Stripes in 会津 株式会社デザイニウム 伊藤勇希 @acomagu

    • なぜ Stripe を採用したの? • サポートの充実度 • Stripe + Auth0 でデータベースレスア プリケーション • 多重決済の防止 - Agenda -
  2. 自己紹介 - 伊藤勇希 @acomagu (あこまぐ) - 会津大学 学部4年 - 最近の趣味:

    音ゲー / VTuber - 最近好きな技術: Go / TypeScript / Linux
  3. 実装期間

  4. 実装期間

  5. 調査(1日)で何をしたか ほしい物 - 既存のアプリに支払いを組み込みたい - Payment Request API を使ってみたい 結果

    - Payment Request API の PG(PSP) として Stripe を採用
  6. なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...?

  7. なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも:

    Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい
  8. なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも:

    Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい じゃあ: なぜ GMOPG が使われてる? - 2018 年まで JCB が使えなかったからでは...?
  9. なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも:

    Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい じゃあ: なぜ GMOPG が使われてる? - 2018 年まで JCB が使えなかったからでは...? →採用
  10. None
  11. https://stripe-payments-demo.appspot.com/

  12. プロトタイプで何をしたか とりあえず動くものは数時間でできた! あとの6日間なにしてたの...?

  13. プロトタイプで何をしたか とりあえず動くものは数時間でできた! あとの6日間なにしてたの...? - iPhone X(iOS 13) のみで Apple Pay

    ができ ないという問題が発覚 - サポートに連絡 - まずチャットで連絡→すぐ返信あり - よくわからないというのでメールで再送 - 「公式のデモページが iPhone X で動か ない」
  14. 結果... 「v2 のリファレンスサイトが動かない場合はこちらで調査できます」とのこと → v2 のライブラリを使うと問題なく動くことが発覚 → (とりあえず) v2 と

    v3 のライブラリを併用することに決定 プロトタイプで何をしたか
  15. 結果... 「v2 のリファレンスサイトが動かない場合はこちらで調査できます」とのこと → v2 のライブラリを使うと問題なく動くことが発覚 → (とりあえず) v2 と

    v3 のライブラリを併用することに決定 その他: - メールサポートは英語でも日本語でもいいらしい - IRC の人は「英語のほうが早く帰ってくると思うよ」と言ってたが自分たちの場合は あまり変わりなかった プロトタイプで何をしたか
  16. None
  17. アプリケーション実装のとき何をしたか - Stripe Elements(v3) と Apple Pay Button(v2) のインターフェースを統一 -

    既存の Vue アプリケーションに組み込み - Wrapper Components という考え方に従う - サーバーの書き換え
  18. 要件をもういちど - バスチケット(定期券)管理アプリケーション - ユーザーはチケットを購入することができる - 購入したチケットは有効期限がある - 有効期限内のチケットには「使用する」のボタンが表示され、押してバスの運転手に 見せることで何度でも使うことができる

  19. サーバーの書き換え - AWS Lambda + API Gateway - Authorizer で

    Auth0 のユーザーを認証(JWT) - AWS CDK でリソース管理 - TypeScript - Stripe SDK の型が定義されていて良い - テストを書く - Stripe 公式の REST Mock は使用せず、独自にモックを用意
  20. DB? 今回は「データベースを利用しない」ことを設計の段階で決定 理由: 自分たちのデータベースと Stripe のログの一貫性を保つのがとても大変なため (分散トランザクション... 結果整合性... うっ頭が) Stripe

    ならこういう設計が可能そう... と予想しやってみた
  21. データベースを用意しないチケット管理 App チケットを購入: Metadata に Auth0 のユーザーIDを入れて決済(Create Charge)する チケットが利用期間内か?: 該当のユーザーの決済履歴(Charges)を取得し、有効期限を逆算して期限内かどうか

    を返す
  22. データベースを用意しないチケット管理 App チケットを購入: Metadata に Auth0 のユーザーIDを入れて決済(Create Charge)する => 83

    LOC チケットが利用期間内か?: 該当のユーザーの決済履歴(Charges)を取得し、有効期限を逆算して期限内かどうか を返す => 101 LOC
  23. できた!! (旧デザイン)

  24. 今後やっていきたいこと

  25. Customer の利用 - 現在決済履歴を取得するとき、ユーザーID でクエリすることが出来ない - Stripe の「ユーザーモデル」である Customer を利用することで、「誰が決

    済したのか」というのを Stripe 上で明確にすることができ、決済履歴のクエ リも可能になる
  26. 多重決済防止 - 「ボタンを押せなくする」だけじゃ不十分...! - レスポンスが失敗したら...? - Idempotency Key を利用したべき等性の確保が 必須

    Strype では: Payment Intents を利用した統合的な Idempotency Key の利用 Request Retry…? Response
  27. Payment Intents…?

  28. ↓ここで Idempotency Key を作成 フロントに渡しておく Payment Intents…?

  29. ↓ここで Idempotency Key を作成 フロントに渡しておく Payment Intents…?

  30. Stripeのいいところ: 便利な機能がたくさんあるので 段階的にシステム化していける (リリース初期は運用でカバーしていくこともできる)

  31. まとめ - Stripe はプロトタイプがまじで速攻でできる - いろいろとスタートアップに優しい - 手数料安い - 開発者に優しい

    - 段階的にいい感じにできる(運用でカバーからシステムでカバーへ) - チャットサポート便利! - データベース使わなくても意外と...? - Payment Intents でべき等な API へ
  32. ❤ Stripe ❤ ありがとうございました!