Stripeではじめての決済

Embed

Start on current slide

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

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 ❤ ありがとうございました!