JP_Stripes in サッポロ キックオフ で発表した資料です

1. サイボウズ公認kintoneエバンジェリスト
ラジカルブリッジ 代表 斎藤 栄
JP_Stripes in サッポロ キックオフ
北の大地でキャッシュレスを考える April 10, 2018
Square利用者から見た
Stripe雑感
0

2. 1
自己紹介
• NTTデータ ➡ データクラフト ➡ ラジカルブリッジ
• kintone Café 創始者、運営事務局/札幌支部メンバー
• TwilioJP-UG 札幌コアメンバー
• JP_Stripes 札幌（準備室）
代表 “クラウドおじさん”
サイボウズ公認kintoneエバンジェリスト
斎藤 栄（さいとう さかえ）

3. 2
2017.11：Kintone Connect（サンフランシスコ）で登壇！
クラウドおじさん
Mr. Cloud

4. 3
kintone Caféの創始者ラジカルブリッジ斎藤氏が実践する「俺流」
http://ascii.jp/elem/000/001/498/1498638/
［俺流 斎藤］で検索！
2017年6月20日
ascii.jp - kintone三昧《kintoneな人》
• 大衆居酒屋「俺流」で俺流の生き方を語る
• kintoneの仕事をするようになった経緯
• kintone Café への思い
• 個人事業を続けることのこだわり

5. 4
今日のお話
Square利用者から見た
Stripe雑感
4時間でここまでわかった！

6. サクサク動くからストレスフリー！
に素敵なカレンダー機能をプラスする
全世界対応の定番プラグイン
カレンダーPlus
kintoneプラグイン《カレンダーPlus》
5

7. 6
kintoneプラグイン《カレンダーPlus》
• プラグインファイル自体は当社サイトより無料ダウンロード可
• アクティベーションキーを購入・設定しないと警告が表示される
【デジタル物販】
【買い切り】

8. 7
kintoneプラグイン《カレンダーPlus》
• 銀行振込（前払い）／クレジットカード決済（事前決済）
• カード決済は『Square請求書』を利用中（管理画面を手動操作）
購入者 ラジカルブリッジ
フォームから購入申込み kintone登録/メール受信
Square請求書メール受信
カード決済 メール受信
アクティベーションキー発行
手動メール送信メール受信
アクティベーションキー設定 売上処理など
As-is

9. 8
kintoneプラグイン《カレンダーPlus》
• Stripeを導入した場合のフローイメージ
購入者 ラジカルブリッジ
購入申込み＆カード決済 アクティベーションキー
自動発行
メール受信
アクティベーションキー設定 売上処理など
To-be
メール受信
自動メール送信
kintone登録

10. 9
自己紹介
リトルヘルプ合同会社
CTO 兼 宴会部長
kintoneエバンジェリスト
２人います！右から
船 長 森本伸夫（kintoneエバンジェリスト）
一応代表 松本美佐（お菓子教室主宰）
次長課長 尾井理恵（ヨガ＆料理教室主宰）
お教室マネージャー
『テトコ』tetoco.jp
powered by

11. 10
個人教室向け顧客管理アプリ tetoco on kintone
お教室マネージャー『テトコ』 tetoco.jp
powered by

12. 11
個人教室向け顧客管理アプリ tetoco on kintone
• 30日間無料でお試しできる
• 30日以内に本申込しないとアカウント停止
【クラウドサービス】
【継続課金】

13. 12
個人教室向け顧客管理アプリ tetoco on kintone
• クレジットカード決済（継続課金）
• 『Square請求書（定期送信）』を利用中（管理画面を手動操作）
購入者 リトルヘルプ
試
用
申
込
み
本
申
込
み
フォームから試用申込み kintone登録/メール受信
環境作成/メール通知メール受信
試用開始
メール受信
継続課金手続き
売上処理など
As-is
フォームから本申込み kintone登録/メール受信
Square請求書
メール受信
30日後アカウント停止

14. 購入者 リトルヘルプ
試
用
申
込
み
本
申
込
み
13
個人教室向け顧客管理アプリ tetoco on kintone
• Stripeを導入した場合のフローイメージ
フォームから試用申込み kintone登録/メール受信
環境作成/メール通知メール受信
試用開始
メール受信
売上処理など
本申込み＆継続課金手続き kintone登録
メール受信
To-be
30日後アカウント停止
自動メール送信

15. 14
Square
• 2010年サービス開始、リアル店舗向けのスマホカード決済として始まった
• 一般ユーザーでも管理画面で様々なオペレーションが行える
• スマホカード決済以外にも、Square請求書などネット経由の手段もあり
• Square API（2016/3～、日本では2017/5～）

16. 15
Stripe
• 2011年サービス開始、API提供によるWeb上の決済の簡素化が目標
• デベロッパー・ファースト ➡ APIありきの印象（管理画面はおまけ？）

17. 16
Stripeを理解する
• APIありきっぽいのでまずは開発者ドキュメントを

18. 17
Stripeを理解する
英語！

19. 18
Stripeを理解する
• 全体像を理解してからドキュメントを見た方が理解が早いので、
まずは「多機能性について見る」を読むことをオススメします。

20. 19
Stripeを理解する
• Payments 都度決済
• Subscriptions 継続課金
• Connect 決済インフラ
• Sigma 検索・分析
• Radar 不正使用防止
• Dashboard 管理画面

21. 20
Payments
① Client Side（画面表示）
A) Stripe Checkout
• <form>タグ、<script>タグだけでUI生成
• <form>の送信先は自前のサーバーサイドプログラム→②
B) Stripe Elements（Stripe.js & Elements）
• Checkoutよりもlook&feelの柔軟なカスタマイズが行えるUI部品
C) Mobile SDKs
• iOS, Android用ライブラリ
② Server Side（決済処理）
• 様々なプログラミング言語で、StripeのAPIを呼び出す。
• 送信されてきたstripeTokenを元に決済処理や任意の処理を行う。

22. 21
Payments – Stripe Checkout
<form action="your-server-side-code" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6aK4sfD6sOj06TxrBBMr4PVK"
data-amount="999"
data-name="Demo Site"
data-description="Example charge"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-currency="jpy">
</script>
</form>
以下のパラメータが送信される
• stripeToken
• メールアドレス
• 請求先情報（氏名、住所）
• お届け先情報（氏名、住所）

23. 22
Subscriptions
① Subscriptionプラン作成
• 管理画面 or API
② Client Side（画面表示）
A) Stripe Checkout
B) Stripe Elements（Stripe.js & Elements）
C) Mobile SDKs
③ Server Side（決済処理）
1. Create Customer
2. Subscribe the customer to the plan
3. その他任意の処理

24. 23
Connect
• シェアリングエコノミー、マーケットプレイス、クラウドファンディ
ング等のプラットフォームサービス上で、ユーザー同士のお金のやり
取りをサポートする仕組み

25. 24
Sigma
• 決済データをSQLで抽出・集計
• 有料（1,000円＋月の決済回数による課金）

26. 25
Radar
• 機械学習アルゴリズムによる不正使用検知

27. 26
Dashboard
• 都度決済、継続課金、顧客登録、商品登録など、一通りの操作が行え
る管理画面
• やや技術者向けっぽい？

28. 27
kintoneプラグイン《カレンダーPlus》
• Stripeを導入した場合のフローイメージ
購入者 ラジカルブリッジ
購入申込み＆カード決済 アクティベーションキー
自動発行
メール受信
アクティベーションキー設定 売上処理など
To-be
メール受信
自動メール送信
kintone登録

29. 28
kintoneプラグイン《カレンダーPlus》
• Stripeを導入した場合のフローイメージ
購入者 ラジカルブリッジ
購入申込み＆カード決済 アクティベーションキー
自動発行
メール受信
アクティベーションキー設定 売上処理など
To-be
メール受信
自動メール送信
kintone登録
できそう！

30. 購入者 ラジカルブリッジ
試
用
申
込
み
本
申
込
み
29
個人教室向け顧客管理アプリ tetoco on kintone
• Stripeを導入した場合のフローイメージ
フォームから試用申込み kintone登録/メール受信
環境作成/メール通知メール受信
試用開始
メール受信
売上処理など
本申込み＆継続課金手続き kintone登録
メール受信
To-be
30日後アカウント停止
自動メール送信

31. 購入者 ラジカルブリッジ
試
用
申
込
み
本
申
込
み
30
個人教室向け顧客管理アプリ tetoco on kintone
• Stripeを導入した場合のフローイメージ
フォームから試用申込み kintone登録/メール受信
環境作成/メール通知メール受信
試用開始
メール受信
売上処理など
本申込み＆継続課金手続き kintone登録
メール受信
To-be
30日後アカウント停止
自動メール送信
できそう！

32. 31
Square利用者から見たStripe雑感
• 都度決済タイプの商品も継続課金タイプのサービスも対応可
• 特に継続課金周りが柔軟で、クラウドサービスをイメージしたトライ
アル期間の設定や段階別料金設定、利用状況に基づく請求方式などが
ある。（Squareには無いと思われる）
• 新し目のサービスだけあって技術者的にはクール
• 導入が容易とは言え、一定の開発が必要なので、商品・サービス提供
開始時に、必ずしもWeb決済である必要が無い場合は、Squareなど
の管理画面ベースの決済サービスを選択してしまう可能性がある。
• 尚、微妙に概念が異なるところがあるが、基本的な決済部分は
Square APIも同等の印象（カード決済なので当り前か？）

33. おしまい
32