Tweet
Tweet

Slide 1

Slide 1 text

Stripe 活用例を いろいろご紹介します！ ＃JP_Stripes Sapporo vol. 7

Slide 2

Slide 2 text

自己紹介 三浦一樹 北海道テレビ放送株式会社 社内のシステム作ってます スクラムマスターの真似事しながら 企画あげるところから、リリースまで 最近は React/TypeScript でフロント書いてる 方が増えてきたかも。。。

Slide 3

Slide 3 text

この2年くらいで作ったサービス 動画配信 EC ライブコマース

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

この2年くらいで作ったサービス 動画配信 EC ライブコマース

Slide 6

Slide 6 text

Stripe で 使ってみた サービスたち カスタマイズ可能な決済UI サブスクリプションの管理 Elements Billing コンビニ決済も

Slide 7

Slide 7 text

同じ世界観で決済までいきたい！

Slide 8

Slide 8 text

同じ世界観で決済までいきたい！ 動画を見ながら お買い物するのオンラインイベント できれば、 動画を止めずに全ての機能を動作させたい

Slide 9

Slide 9 text

Stripe の決済画面 めっちゃ簡単！ おしゃれが画面に遷移 Stripe さんのドメインに飛ぶ 実装が必要 デザインは自分次第 自分のページにフォーム埋込

Slide 10

Slide 10 text

Stripe の決済画面 めっちゃ簡単！ おしゃれが画面に遷移 Stripe さんのドメインに飛ぶ 実装が必要 デザインは自分次第 自分のページにフォーム埋込

Slide 11

Slide 11 text

配信を止めずに グッズの決済ま で、できました！ スクショが残ってなかった、、、w 動画プレイヤーの上に重ねて 決済画面を作成

Slide 12

Slide 12 text

Stripe の決済時に 使ってきたAPI Order Charge PaymentIntent → → バックエンドの話は長くなるので、ご質問ください！

Slide 13

Slide 13 text

コンビニ決済も実装してみた

Slide 14

Slide 14 text

コンビニ決済！ 動画配信

Slide 15

Slide 15 text

コンビニ決済！ 動画配信 セコマ使える！！

Slide 16

Slide 16 text

詳しくは西山さんのブログを！

Slide 17

Slide 17 text

支払い手順が書かれた ユニークなアドレスが発行される

Slide 18

Slide 18 text

ダッシュボードこんな感じ

Slide 19

Slide 19 text

あれ。。。

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

あれあれ

Slide 22

Slide 22 text

おやおや、、

Slide 23

Slide 23 text

手数料考えてなかった！ 売上の 半分以上 手数料！！

Slide 24

Slide 24 text

リリース前日に気がついて コンビニ決済お蔵入り、、、w

Slide 25

Slide 25 text

仕様はしっかり確認しましょうw

Slide 26

Slide 26 text

ちなみに、コンビニ決済の返金

Slide 27

Slide 27 text

サブスク作りたい！

Slide 28

Slide 28 text

Stripe の決済画面 サブスク 「カスタマーポータル」 マイページみたいなのも 用意されてる 実装が必要 デザインは自分次第 自分のページにフォーム埋込

Slide 29

Slide 29 text

基本的に都度課金 シリーズ毎のまとめ買い 1話毎の購入

Slide 30

Slide 30 text

D陣のコンテンツが見れます 加入日に限らず、 次の月の1日に 1,000円課金

Slide 31

Slide 31 text

次の月の1日に課金 無料トライアルの機能を活用 バックエンド側で申込の度に指定

Slide 32

Slide 32 text

次の月の1日に課金 色々ググってたら、、 月末月初はちょっと気をつけなくてはいけないらしい

Slide 33

Slide 33 text

次の月の1日に課金 月末 月初

Slide 34

Slide 34 text

次の月の1日に課金 UTC = JST - 9h UTC = JST - 9h JST 7月01日 00:00 UTC 6月30日 16:00 申込時に1日にセット UTCで設定される 毎月30日の 16時 OK 次の発動 UTC 7月30日 16:00 JST 7月31日 00:00 JST = UTC + 9h JST = UTC + 9h

Slide 35

Slide 35 text

次の月の1日に課金 UTC = JST - 9h UTC = JST - 9h JST 7月01日 00:00 UTC 6月30日 16:00 申込時に1日にセット UTCで設定される 毎月30日の 16時 OK 次の発動 UTC 7月30日 16:00 JST 7月31日 00:00 JST = UTC + 9h JST = UTC + 9h ずれちゃう！！

Slide 36

Slide 36 text

次の月の1日に課金 時間を00時にしちゃうとこうなるので、 一応10時に設定してやってます

Slide 37

Slide 37 text

ちなみにWebhook 非同期でめっちゃ飛んでくるので、 受け側は気をつけましょう （AWS側で飛ばしてるメールがコケましたw）

Slide 38

Slide 38 text

Stripe で 使ってみた サービスたち カスタマイズ可能な決済UI サブスクリプションの管理 Elements Billing コンビニ決済も checkout で簡単にもできるよ！

Slide 39

Slide 39 text

他の決済サービスとの比較

Slide 40

Slide 40 text

実装した決済サービス V2 GMOさんは一部仕様調べただけ

Slide 41

Slide 41 text

一番実装負荷が低かったのは 動くソースコードが出てくる Stripeが一番実装負荷が低い！ サーバレスと相性最高

Slide 42

Slide 42 text

PR 来週の金曜日 AWSの勉強会やります！ オンラインで是非！