Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebPayのCheckoutHelper が超便利!!! って話
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
M_Ishikawa
July 22, 2014
Programming
140
0
Share
WebPayのCheckoutHelper が超便利!!! って話
M_Ishikawa
July 22, 2014
More Decks by M_Ishikawa
See All by M_Ishikawa
Socialiteのベストプラクティス
ishikawam
0
130
サンタクロースを支えるIT技術 @M_Ishikawa #yapcasia
ishikawam
0
140
IPtalkの使い方
ishikawam
0
560
フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
ishikawam
1
11k
フロントエンド制作向け ビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013
ishikawam
0
240
Other Decks in Programming
See All in Programming
権限チェックの一貫性を型で守る TypeScript による多層防御
mnch
4
1.1k
Claspは野良GASの夢をみるか
takter00
0
160
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.5k
Migrations : C'est une question d'hygiène !
vinceamstoutz
0
2.9k
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
180
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
510
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
160
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
420
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
460
GitHub Copilot CLIのいいところ
htkym
2
1.2k
ビジネスモデルから紐解く、AI+型駆動開発
hirokiomote
2
5.2k
関係性から理解する"同一性"の型用語たち
pvcresin
2
630
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.9k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
350
Technical Leadership for Architectural Decision Making
baasie
3
390
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.5k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
360
We Have a Design System, Now What?
morganepeng
55
8.2k
Music & Morning Musume
bryan
47
7.2k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
210
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.3k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
56k
Evolving SEO for Evolving Search Engines
ryanjones
0
210
Transcript
の CheckoutHelper が超便便利利!!! って話 @M_̲Ishikawa 8FC1BZ.FFUVQ
ペイっ!
@M_̲Ishikawa id:ishikawam •ボランティアで開発 ・えがおの本 ・チャリティーサンタ ・その他、福祉、イベントスタッフ、etc...
•しごとで開発 ・グリー
None
は ! のCheckoutHelperを利利⽤用しています
https://webpay.jp/docs/checkout
何が便便利利かって⾔言うと
None
ぽちっとするだけで これ埋め込んで
None
ちょー簡単!!!
サーバサイドの実装を(考えられる) 極限まで少なくしてくれてる!!! GPSNBDUJPOQVSDIBTFNFUIPEQPTU TDSJQUTSDIUUQTDIFDLPVUXFCQBZKQWDMBTTXFCQBZCVUUPOEBUBLFZ UFTU@QVCMJD@YYYYYYYYYYYYYYYYYYYYEBUBMBOHKBTDSJQU GPSN GPSNBDUJPOQVSDIBTFNFUIPEQPTU TDSJQUTSDlIUUQTDIFDLPVUXFCQBZKQWDMBTTXFCQBZCVUUPOEBUBLFZ UFTU@QVCMJD@YYYYYYYYYYYYYYYYYYYYEBUBMBOHKBTDSJQU
EJWJEl81@DIFDLPVU#PY JOQVUUZQFCVUUPOWBMVFlΧʔυͰࢧ͏ JOQVUUZQFIJEEFOOBNFlXFCQBZUPLFO EJW GPSN ⾯面倒なトークン発⾏行行とトークンチェック、 カードのエラーチェック等は全部WebPay側でやってくれる!!! って書いておくだけで ⾃自動でトークン⼊入れてくれる!
⾯面倒な トークン発⾏行行 トークンチェック カードのエラーチェック 等は全部WebPay側でやってくれる!!!
! こちらのサーバを通さずに クライアントと直接やってくれる!!!
つまり今までだと •ユーザーが(ブラウザで)カード情報⼊入れて送信 •サーバで(トークンとともに)受け取る ・トークンが有効であればサーバからカード情報について決済業者に問い合わせる ・トークンが無効または簡易易バリデーションでアウトならユーザーへエラーを返す •決済業者からのカード情報をサーバで受け取る
・カードが有効なら課⾦金金処理理を続ける ・カードが無効ならユーザーへその旨返す •サーバから決済業者へ課⾦金金処理理をリクエスト&結果を受け取る ・課⾦金金が有効なら課⾦金金処理理を続ける ・課⾦金金が無効ならユーザーへその旨返す •課⾦金金が成功したのでサーバにて決済ログを記録 •ユーザーへ完了了を通知。課⾦金金サービスを提供して無事完了了
でもWebPayなら •ユーザーが(ブラウザで)カード情報⼊入れて送信 •サーバで(トークンとともに)受け取る ・トークンが有効であればサーバからカード情報について決済業者に問い合わせる ・トークンが無効または簡易易バリデーションでアウトならユーザーへエラーを返す •決済業者からのカード情報をサーバで受け取る
・カードが有効なら課⾦金金処理理を続ける ・カードが無効ならユーザーへその旨返す •サーバから決済業者へ課⾦金金処理理をリクエスト&結果を受け取る ・課⾦金金が有効なら課⾦金金処理理を続ける ・課⾦金金が無効ならユーザーへその旨返す •課⾦金金が成功したのでサーバにて決済ログを記録 •ユーザーへ完了了を通知。課⾦金金サービスを提供して無事完了了 この部分はサーバ側の実装不不要。 全部WebPayがやってくれる!
CheckoutHelperを使えば ⼀一瞬⾜足りともカード番号を サーバ側で扱わないで済んじゃう!!! ! カード番号の管理理はWebPay。 サーバはクライアントトークンを扱うだけ。
カード管理理の責任を全部WebPayが負担!!! なので
まじすげー
でも...
WebPayへの要望 その1
None
ボタンのデザイン ! 変えれないの?
⾃自動で挿⼊入されるボタンのデザイン変えたい。。 CSSで上書きかあ、、そもそもdiv(注:ブロック要素) GPSNBDUJPOQVSDIBTFNFUIPEQPTU TDSJQUTSDlIUUQTDIFDLPVUXFCQBZKQWDMBTTXFCQBZCVUUPOEBUBLFZ UFTU@QVCMJD@YYYYYYYYYYYYYYYYYYYYEBUBMBOHKBTDSJQU EJWJEl81@DIFDLPVU#PY JOQVUUZQFCVUUPOWBMVFlΧʔυͰࢧ͏ JOQVUUZQFIJEEFOOBNFlXFCQBZUPLFO EJW
GPSN CSSリセット⾯面倒だな。。。 テキストリンクとかきれいにできないよ。。
しかたなく “displey:none;” にしてw ⾒見見えないボタンを押させるwww
WebPayへの要望 その2
None
テストの課⾦金金履履歴 消せない...
テストの課⾦金金履履歴 消せない... この件は解決法がありました!!! >ユーザ設定からリセットできた 教えてくださったWebPay++
WebPayへの要望 その3
marginないのが 気になる
WebPayの とてもいいところ
⼟土⽇日というのに質問に すぐに答えてくれたよ!!!
WebPayの すごくいいところ
None
エンジニアが わくわくする モノがある!
これからも期待してます!
ペイっ! @M_̲Ishikawa