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

Elements とか
コンビニ決済とか
Billing とかのお話

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. コンビニ決済！
    動画配信
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. あれ。。。
    

    View Slide

20. View Slide

21. あれあれ
    

    View Slide

22. おやおや、、
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. サブスク作りたい！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. 次の月の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
    

    View Slide

35. 次の月の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
    ずれちゃう！！
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide