1. の
CheckoutHelper
が超便便利利！！！
って話
@M_̲Ishikawa
2014-07-22
WebPay Meetup #1

2. ペイっ！

3. @M_̲Ishikawa
id:ishikawam
•ボランティアで開発
・えがおの本
・チャリティーサンタ
・その他、福祉、イベントスタッフ、etc...
•しごとで開発
・グリー

5. は
!
のCheckoutHelperを利利⽤用しています

6. https://webpay.jp/docs/checkout

7. 何が便便利利かって⾔言うと

9. ぽちっとするだけで
これ埋め込んで

11. ちょー簡単！！！

12. サーバサイドの実装を（考えられる）
極限まで少なくしてくれてる！！！
<form action="/purchase" method="post">
<script src="https://checkout.webpay.jp/v2/" class="webpay-button" data-key=
"test_public_xxxxxxxxxxxxxxxxxxxx" data-lang="ja"></script>
</form>
<form action="/purchase" method="post">
<script src= https://checkout.webpay.jp/v2/" class="webpay-button" data-key=
"test_public_xxxxxxxxxxxxxxxxxxxx" data-lang="ja" ></script>
<div id= WP_checkoutBox">
<input type="button" value= カードで支払う">
<input type="hidden" name= webpay-token">
</div>
</form>
⾯面倒なトークン発⾏行行とトークンチェック、
カードのエラーチェック等は全部WebPay側でやってくれる！！！
って書いておくだけで
⾃自動でトークン⼊入れてくれる！

13. ⾯面倒な
トークン発⾏行行
トークンチェック
カードのエラーチェック
等は全部WebPay側でやってくれる！！！
!
こちらのサーバを通さずに
クライアントと直接やってくれる！！！

14. つまり今までだと
•ユーザーが(ブラウザで)カード情報⼊入れて送信
•サーバで(トークンとともに)受け取る
・トークンが有効であればサーバからカード情報について決済業者に問い合わせる
・トークンが無効または簡易易バリデーションでアウトならユーザーへエラーを返す
•決済業者からのカード情報をサーバで受け取る
・カードが有効なら課⾦金金処理理を続ける
・カードが無効ならユーザーへその旨返す
•サーバから決済業者へ課⾦金金処理理をリクエスト＆結果を受け取る
・課⾦金金が有効なら課⾦金金処理理を続ける
・課⾦金金が無効ならユーザーへその旨返す
•課⾦金金が成功したのでサーバにて決済ログを記録
•ユーザーへ完了了を通知。課⾦金金サービスを提供して無事完了了

15. でもWebPayなら
•ユーザーが(ブラウザで)カード情報⼊入れて送信
•サーバで(トークンとともに)受け取る
・トークンが有効であればサーバからカード情報について決済業者に問い合わせる
・トークンが無効または簡易易バリデーションでアウトならユーザーへエラーを返す
•決済業者からのカード情報をサーバで受け取る
・カードが有効なら課⾦金金処理理を続ける
・カードが無効ならユーザーへその旨返す
•サーバから決済業者へ課⾦金金処理理をリクエスト＆結果を受け取る
・課⾦金金が有効なら課⾦金金処理理を続ける
・課⾦金金が無効ならユーザーへその旨返す
•課⾦金金が成功したのでサーバにて決済ログを記録
•ユーザーへ完了了を通知。課⾦金金サービスを提供して無事完了了
この部分はサーバ側の実装不不要。
全部WebPayがやってくれる！

16. CheckoutHelperを使えば
⼀一瞬⾜足りともカード番号を
サーバ側で扱わないで済んじゃう！！！
!
カード番号の管理理はWebPay。
サーバはクライアントトークンを扱うだけ。
カード管理理の責任を全部WebPayが負担！！！
なので

17. まじすげー

18. でも...

19. WebPayへの要望
その１

21. ボタンのデザイン
!
変えれないの？

22. ⾃自動で挿⼊入されるボタンのデザイン変えたい。。
CSSで上書きかあ、、そもそもdiv(注：ブロック要素)
<form action="/purchase" method="post">
<script src= https://checkout.webpay.jp/v2/" class="webpay-button" data-key=
"test_public_xxxxxxxxxxxxxxxxxxxx" data-lang="ja" ></script>
<div id= WP_checkoutBox">
<input type="button" value= カードで支払う">
<input type="hidden" name= webpay-token">
</div>
</form>
CSSリセット⾯面倒だな。。。
テキストリンクとかきれいにできないよ。。

23. しかたなく “displey:none;” にしてw
⾒見見えないボタンを押させるwww

24. WebPayへの要望
その２

26. テストの課⾦金金履履歴
消せない...

27. テストの課⾦金金履履歴
消せない...
この件は解決法がありました！！！
＞ユーザ設定からリセットできた
教えてくださったWebPay++

28. WebPayへの要望
その３

29. marginないのが
気になる

30. WebPayの
とてもいいところ

31. ⼟土⽇日というのに質問に
すぐに答えてくれたよ！！！

32. WebPayの
すごくいいところ

34. エンジニアが
わくわくする
モノがある！

35. これからも期待してます！

36. ペイっ！
@M_̲Ishikawa