#JP_Stripes Sapporo Stripeの活用例を色々ご紹介します！

by Kazuki Miura

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の勉強会やります！オンラインで是非！