初めてのstripeを触る上で、baserCMSプラグイン化を題材としました。フォームの表示や決済で詰まった点や、それを元にした処理フローの明示をしています。 これからstripeを触って見たいって方にオススメしたいスライドです。

1. JP_Stripes (Stripe ユーザーグループ）福岡 Vol.4
baserCMSのStripeプラグインをつくった話
株式会社キャッチアップ/baserCMSユーザー会 内場 龍彦

2. 自己紹介
内 場 龍 彦 （ハイパークマさん）
株式会社キャッチアップ マネージャー／ディレクター／プログラマー
baserCMSユーザー会
■仕事内容：
・開発チームのマネジメント（本業）
・システムプランニング
・みんながしにそうな時にだけ動くプログラマー
・baserCMSを盛り上げる活動
■使う言語：
php / javascript / htmlとかsassなどなど...
Twitter: @ichi280

3. 「baserCMSのStripeプラグインをつくった話」
なのですが
さっそく

4. baserCMSって聞いたことあるけど・・・

5. 何ができるの？
？
？
？
？
？
？
？
？

6. baserCMSってなにができるの？
CakePHP製のCMSなので、ラーニングコストが低い
CMS用のプラグイン／ライブラリが豊富
ログイン／ファイルアップロード等のコンポーネントや
管理画面用Viewファイルが豊富に揃っているため、
アプリケーションのスピード開発が可能

7. baserCMSってなにができるの？
かんたんインストールもできる

8. baserCMSのStripeプラグインをつくった話

9. １：APIを使って決済画面を表示させた
２：簡単に完成したと思ったらハマった
３：処理の流れを書いてみる
４：こんな感じで実装してみました
今日のアジェンダ

10. 今回使ったAPI

11. 今回使ったAPI
Checkout
JavaScript を 1 行追加するだけで、
洗練された決済フォームを Web サイトに
表示できます。

12. 実際使ってみた

13. 実際使ってみた
ユーザー登録 APIキー取得

14. 実際使ってみた
ボタン表示された！
決済画面でた！！

15. 決済フォームできた！！！
超簡単！！！

16. 実際使ってみた
決済が完了した！

17. (ᵔᴥᵔ) 安心 (ᵔᴥᵔ)
実際使ってみた

18. 「うん、楽勝だったね。」
「決済画面見てみよっかな〜〜フフフーん」
実際使ってみた

19. 実際使ってみた
おや・・・

20. 原因を考察

21. Checkout
JavaScript を 1 行追加するだけで、
洗練された決済フォームを Web サイトに
表示できます。
原因を考察
決済できるとは謳ってない

22. 原因を考察

23. 原因を考察

24. 原因を考察
Once you’ve securely collected and tokenized your customer’s credit card using Checkout
or Elements, you can charge the card immediately or save it for later. Unlike tokenization,
which occurs in the browser, charge attempts are made from your server, normally using
one of our client libraries. If you haven’t already, install the library for your favorite language
now.
CheckoutまたはElementsを使用して顧客のクレジットカードを安全に収集してトークン
化したら、カードをすぐに請求するか、後で保存することができます。 ブラウザで行わ
れるトークン化とは異なり、通常はクライアントライブラリの1つを使用してサーバーか
ら料金請求が試行されます。 まだインストールしていない場合は、好きな言語のライブ
ラリをインストールしてください。

25. 原因を考察
Once you’ve securely collected and tokenized your customer’s credit card using Checkout
or Elements, you can charge the card immediately or save it for later. Unlike tokenization,
which occurs in the browser, charge attempts are made from your server, normally using
one of our client libraries. If you haven’t already, install the library for your favorite language
now.
CheckoutまたはElementsを使用して顧客のクレジットカードを安全に収集してトークン
化したら、カードをすぐに請求するか、後で保存することができます。 ブラウザで行わ
れるトークン化とは異なり、通常はクライアントライブラリの1つを使用してサーバーか
ら料金請求が試行されます。 まだインストールしていない場合は、好きな言語のライブ
ラリをインストールしてください。
フォームから送信した内容はstripeで預かり、トークンを返却する。
そのトークンを使用してアプリケーション側から決済を確定させる。
決済データを一時的にstripeに預けることにより、
セキュアな取引が可能

26. 処理の流れ
１：フォームから決済情報送付
４：トークンを完了URLにPOST
５：トークンをバインドして
ChargeAPIコール

27. 処理の流れ

28. こんな感じで実装してみました

29. stripe_configs
実装の流れ
stripe_orders
stripe_payments
APIキー／Secretキー／決済時の入力項目等、
全体的な設定を格納
stripe決済情報=注文情報を格納
各ページ単位での価格情報や、
決済オンオフフラグを格納
DB設計

30. stripe設定画面
実装の流れ
画面設計：管理画面
ページ編集画面
cakePHPのイベント処理で
フォーム項目を追加

31. ページ
実装の流れ
画面設計：フロント画面
決済完了画面
cakePHPのイベント処理で
ボタンのスクリプトを埋込
完了時にstripeから受け取った
決済データをDBに保存

32. 注文情報一覧画面
実装の流れ
画面設計：管理画面
stripe
クリックでstripeの決済詳細に
ジャンプ

33. まとめ

34. １：stripeを使うとカート画面・会員登録画面
等のデザインデータが不要
２：トークンにより、安全に決済ができる
３：baserCMSのプラグインは簡単に作れる
まとめ

35. ご静聴ありがとうございました