Stripeではじめての決済
by
acomagu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Stripe で はじめての決済 191008 #JP_Stripes in 会津 株式会社デザイニウム 伊藤勇希 @acomagu ● なぜ Stripe を採用したの? ● サポートの充実度 ● Stripe + Auth0 でデータベースレスア プリケーション ● 多重決済の防止 - Agenda -
Slide 2
Slide 2 text
自己紹介 - 伊藤勇希 @acomagu (あこまぐ) - 会津大学 学部4年 - 最近の趣味: 音ゲー / VTuber - 最近好きな技術: Go / TypeScript / Linux
Slide 3
Slide 3 text
実装期間
Slide 4
Slide 4 text
実装期間
Slide 5
Slide 5 text
調査(1日)で何をしたか ほしい物 - 既存のアプリに支払いを組み込みたい - Payment Request API を使ってみたい 結果 - Payment Request API の PG(PSP) として Stripe を採用
Slide 6
Slide 6 text
なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...?
Slide 7
Slide 7 text
なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも: Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい
Slide 8
Slide 8 text
なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも: Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい じゃあ: なぜ GMOPG が使われてる? - 2018 年まで JCB が使えなかったからでは...?
Slide 9
Slide 9 text
なぜ Stripe なのか? - 日本の会社だとどうやら GMOPG が多い模様 - とりあえずデファクトに乗っておくのが小規模アプリの基本...? でも: Stripe で特に困らなそう - Developer Friendly - 小規模ビジネスにコスト面で優しい じゃあ: なぜ GMOPG が使われてる? - 2018 年まで JCB が使えなかったからでは...? →採用
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
https://stripe-payments-demo.appspot.com/
Slide 12
Slide 12 text
プロトタイプで何をしたか とりあえず動くものは数時間でできた! あとの6日間なにしてたの...?
Slide 13
Slide 13 text
プロトタイプで何をしたか とりあえず動くものは数時間でできた! あとの6日間なにしてたの...? - iPhone X(iOS 13) のみで Apple Pay ができ ないという問題が発覚 - サポートに連絡 - まずチャットで連絡→すぐ返信あり - よくわからないというのでメールで再送 - 「公式のデモページが iPhone X で動か ない」
Slide 14
Slide 14 text
結果... 「v2 のリファレンスサイトが動かない場合はこちらで調査できます」とのこと → v2 のライブラリを使うと問題なく動くことが発覚 → (とりあえず) v2 と v3 のライブラリを併用することに決定 プロトタイプで何をしたか
Slide 15
Slide 15 text
結果... 「v2 のリファレンスサイトが動かない場合はこちらで調査できます」とのこと → v2 のライブラリを使うと問題なく動くことが発覚 → (とりあえず) v2 と v3 のライブラリを併用することに決定 その他: - メールサポートは英語でも日本語でもいいらしい - IRC の人は「英語のほうが早く帰ってくると思うよ」と言ってたが自分たちの場合は あまり変わりなかった プロトタイプで何をしたか
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
アプリケーション実装のとき何をしたか - Stripe Elements(v3) と Apple Pay Button(v2) のインターフェースを統一 - 既存の Vue アプリケーションに組み込み - Wrapper Components という考え方に従う - サーバーの書き換え
Slide 18
Slide 18 text
要件をもういちど - バスチケット(定期券)管理アプリケーション - ユーザーはチケットを購入することができる - 購入したチケットは有効期限がある - 有効期限内のチケットには「使用する」のボタンが表示され、押してバスの運転手に 見せることで何度でも使うことができる
Slide 19
Slide 19 text
サーバーの書き換え - AWS Lambda + API Gateway - Authorizer で Auth0 のユーザーを認証(JWT) - AWS CDK でリソース管理 - TypeScript - Stripe SDK の型が定義されていて良い - テストを書く - Stripe 公式の REST Mock は使用せず、独自にモックを用意
Slide 20
Slide 20 text
DB? 今回は「データベースを利用しない」ことを設計の段階で決定 理由: 自分たちのデータベースと Stripe のログの一貫性を保つのがとても大変なため (分散トランザクション... 結果整合性... うっ頭が) Stripe ならこういう設計が可能そう... と予想しやってみた
Slide 21
Slide 21 text
データベースを用意しないチケット管理 App チケットを購入: Metadata に Auth0 のユーザーIDを入れて決済(Create Charge)する チケットが利用期間内か?: 該当のユーザーの決済履歴(Charges)を取得し、有効期限を逆算して期限内かどうか を返す
Slide 22
Slide 22 text
データベースを用意しないチケット管理 App チケットを購入: Metadata に Auth0 のユーザーIDを入れて決済(Create Charge)する => 83 LOC チケットが利用期間内か?: 該当のユーザーの決済履歴(Charges)を取得し、有効期限を逆算して期限内かどうか を返す => 101 LOC
Slide 23
Slide 23 text
できた!! (旧デザイン)
Slide 24
Slide 24 text
今後やっていきたいこと
Slide 25
Slide 25 text
Customer の利用 - 現在決済履歴を取得するとき、ユーザーID でクエリすることが出来ない - Stripe の「ユーザーモデル」である Customer を利用することで、「誰が決 済したのか」というのを Stripe 上で明確にすることができ、決済履歴のクエ リも可能になる
Slide 26
Slide 26 text
多重決済防止 - 「ボタンを押せなくする」だけじゃ不十分...! - レスポンスが失敗したら...? - Idempotency Key を利用したべき等性の確保が 必須 Strype では: Payment Intents を利用した統合的な Idempotency Key の利用 Request Retry…? Response
Slide 27
Slide 27 text
Payment Intents…?
Slide 28
Slide 28 text
↓ここで Idempotency Key を作成 フロントに渡しておく Payment Intents…?
Slide 29
Slide 29 text
↓ここで Idempotency Key を作成 フロントに渡しておく Payment Intents…?
Slide 30
Slide 30 text
Stripeのいいところ: 便利な機能がたくさんあるので 段階的にシステム化していける (リリース初期は運用でカバーしていくこともできる)
Slide 31
Slide 31 text
まとめ - Stripe はプロトタイプがまじで速攻でできる - いろいろとスタートアップに優しい - 手数料安い - 開発者に優しい - 段階的にいい感じにできる(運用でカバーからシステムでカバーへ) - チャットサポート便利! - データベース使わなくても意外と...? - Payment Intents でべき等な API へ
Slide 32
Slide 32 text
❤ Stripe ❤ ありがとうございました!