サブスク課金に銀行振込を追加してみた。その①/20220713_JPStripes

Slide 1

Slide 1 text

サブスク課金に銀行振込を追加してみた。その① 2022.7.13 JP_Stripesオンライン connectome.design inc.　伊藤明裕 Fusic Co., Ltd.　山路友也

Slide 2

Slide 2 text

自己紹介＆会社紹介

Slide 3

Slide 3 text

$ cat ./me.json { “name”: “伊藤明裕”, “資格”: { “IPA”: “情報処理安全確保支援士 No.7287”, “JDLA”: [“G検定2017”, “E資格2018”], “データサイエンティスト協会 ”: “DS検定” }, “job”: { “belong_to”: “connectome.design株式会社”, “main_role”: “Product Manager” }, “community”: { “AI”: “CDLEコアメンバー”, “SaaS”: “JP_Stripes 名古屋”, “Car”: “https://tocj.jp 運営” }, “開発座右の銘”: “間違っているのはいつも自分 ” } $ cat ./COD.json { “name”: “コネクトームデザイン株式会社 ”, “URL”: “https://connectome.design”, “domain”: “AI導入・開発コンサルティング ”, “office”: “フルリモートワーク”, “product”: { “name”: “metabase”, “type”: “SaaS”, “URL”: “https://metabase.jp”, “service”: “AIナレッジ共有&コラボレーション開発プラットフォーム” } } LinkedIn: https://www.linkedin.com/in/akit37 SlideShare: https://www.slideshare.net/AkihiroIto1/presentations

Slide 4

Slide 4 text

metabase®について

Slide 5

Slide 5 text

最近、メタバースとよく間違われます。 MetabaseというBIツールもあります。

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

metabaseの開発に利用しているサービス

Slide 10

Slide 10 text

AWS Auth0 / CircleCI / Stripe Backlog Adobe XD Github kintone Slack Zoom

Slide 11

Slide 11 text

AWS Auth0 / CircleCI / Stripe Backlog Adobe XD Github kintone Slack Zoom Go_SaaS 三種の神器！

Slide 12

Slide 12 text

Auth0 / CircleCI / Stripe をなぜ利用することにしたのか？

Slide 13

Slide 13 text

楽をしたいから。この時点で今回の登壇は決まっていた …😆

Slide 14

Slide 14 text

● アカウント管理も当然ながら、課金処理の実装なんてやりたくない。 →　無駄な苦労はせず専門家に任せる。 →　テストする範囲は狭いほどよい。 →　結果、安上がり。エンジニアにとって、“面倒くさがること”は大事。 Simple, Easy & Beautiful.

Slide 15

Slide 15 text

Stripeの銀行振込対応について「銀行振込に対応します」と聞いてからリリースまでかなりの期間。「なんでそんなに時間かかるの？」

Slide 16

Slide 16 text

Stripeの銀行振込対応について「銀行振込に対応します」と聞いてからリリースまでかなりの期間。「なんでそんなに時間かかるの？」リリース間近になって知ったこと。「振込確認の消し込み処理までStripeが行います。」日本の銀行とそんな調整ができるとは！！

Slide 17

Slide 17 text

福岡へ飛びます。と驚きながら、リリースと同時に実装開始。あっという間に組み込み完了。ひょっとして、最速？

Slide 18

Slide 18 text

ようこそ福岡へ。

Slide 19

Slide 19 text

紹介します

Slide 20

Slide 20 text

名前: 株式会社Fusic 事業: Webシステム/スマートフォンアプリ開発 AI・機械学習/IoTシステム開発クラウドインフラ(AWS) プロダクト事業コンサルティングオフィス: 福岡 “Why we do.”: 『人に多様な道を　世の中に爪跡を』

Slide 21

Slide 21 text

名前: 山路友也仕事: Rubyを用いたWeb開発スキル: Ruby(Rails)・React(Next.js)・AWS・Auth0… アイコン: 自作決済: はじめて登壇: はじめて

Slide 22

Slide 22 text

あなたにとって「決済」とは？

Slide 23

Slide 23 text

→よくわからんけど大変に違いない！ 🤯 あなたにとって「決済」とは？

Slide 24

Slide 24 text

銀行振込による決済は？ →想像も及ばないが、決済の中でも特に難易度が高いものに違いない！！！ 🤯🤯🤯

Slide 25

Slide 25 text

何はともあれ触ってみるしかない

Slide 26

Slide 26 text

Stripe Dashboard上で銀行振込を構築してみる

Slide 27

Slide 27 text

Stripe Invoicing オンライン請求書を作成できるサービス

Slide 28

Slide 28 text

流れ https://stripe.com/docs/payments/bank-transfers/accept-a-payment

Slide 29

Slide 29 text

Stripe Dashboard上から、ぽちぽちで請求書を作成

Slide 30

Slide 30 text

「支払いオプション」というものがある👀

Slide 31

Slide 31 text

支払いオプションを「銀行振込」のみに設定

Slide 32

Slide 32 text

あれ？

Slide 33

Slide 33 text

お、終わった😮

Slide 34

Slide 34 text

これをAPIでやるぞ！

Slide 35

Slide 35 text

Stripe APIで請求書 + 銀行振込を構築してみる

Slide 36

Slide 36 text

Stripe Docs ・ここを見るだけで十分・言語ごとの参考実装もある・https://stripe.com/docs/invoicing/integration

Slide 37

Slide 37 text

Stripe API Docs ・必要な情報が端的かつ簡潔にまとまっている・言語ごとの参考実装もある・https://stripe.com/docs/api

Slide 38

Slide 38 text

APIを用いた請求書作成の流れ 1. 「顧客」を作る（POST /v1/customers ） 1. 「インボイスアイテム」を作る（POST /v1/invoiceitems ） 1. 「インボイス」を作る（POST /v1/invoices ） 1. インボイスを「確定」させる（POST /v1/invoices/:id/finalize ） ※ 2、3の手順に注意

Slide 39

Slide 39 text

銀行振込を指定するパラメーター payment_settings.payment_method_types ・card(カード払い) ・konbini(コンビニ払い) ・customer_balance(銀行振込) ・etc… Dashboard上で請求書を作成する際の「支払いオプション」に対応 POST /v1/invoices

Slide 40

Slide 40 text

Ruby SDKで書くならこんな感じ実質３行！！！

Slide 41

Slide 41 text

とっても簡単ですね😆

Slide 42

Slide 42 text

テストどうするんだ🤔

Slide 43

Slide 43 text

顧客詳細から現金残高の追加が可能 = 銀行振込をシミュレート

Slide 44

Slide 44 text

支払い済みになりました🎉

Slide 45

Slide 45 text

まとめ・決済未経験者でも調査から構築までものの１日〜２日程度🎉 ・ドキュメントを読むだけで十分🙌 ・「決済はこわくない！」と思えた🥳

Slide 46

Slide 46 text

ありがとうございました🌻