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
Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25
Search
Hidetaka Okamoto
PRO
January 27, 2022
Technology
0
590
Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25
https://easy2.connpass.com/event/235146/
Hidetaka Okamoto
PRO
January 27, 2022
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
PRO
0
350
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
PRO
0
44
Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022
hideokamoto
PRO
0
680
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
PRO
0
200
Jamstack開発者のための App Runner入門
hideokamoto
PRO
1
350
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
PRO
0
330
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
PRO
2
3.8k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
PRO
1
150
Shifter Headlessと Headless WordPressの紹介
hideokamoto
PRO
0
1.4k
Other Decks in Technology
See All in Technology
皆がすなるカオスエンジアリングといふものを、ネットワークオペレーションでもしてみむとてするなり
tjmtrhs
0
120
The Twelve-Factor App とクラウドアプリケーションのコスト
ny7760
3
260
「わたしたちのコード」を安定させるためにフレームワークとの距離を保つ / phperkaigi2024
blue_goheimochi
5
800
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
34k
Server-Side Kotlin + Spring Boot + Exposedでやったこと
ikefukurou777
0
110
EKSの認証認可の仕組みとEKS APIを用いた認可制御について
daitak
0
260
Uniting Rust Servers and Clients through OpenAPI
ahl
0
430
layerx-0-to-1-product-development-in-compound-startups
shnjtk
1
520
マイクロサービスを横断したGoのコードレビュー
yuyu_hf
PRO
1
120
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
1.8k
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
We Fear Change, for DevOpsDays LA 2024
cote
PRO
0
130
Featured
See All Featured
Become a Pro
speakerdeck
PRO
8
4.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
930
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Docker and Python
trallard
33
2.6k
Clear Off the Table
cherdarchuk
82
310k
The Mythical Team-Month
searls
214
42k
BBQ
matthewcrist
78
8.7k
Transcript
StripeͰͷ ΦϯϥΠϯܾࡁཧղͨ͠ ΤϯδχΞୡͷʮʓʓશʹཧղͨ͠ʯTalkɹ#25 Hidetaka Okamoto 2022/1/22 #શʹཧղͨ͠Talk
͓༠͍͋Γ͕ͱ͏͍͟͝·͢ʂ https://zenn.dev/hideokamoto/articles/52a6e4280cced5#༨ஊɿొஃػձ͍ͩ͘͞
Ԭຊलߴ @hide__dev • JS / TS Developer • AWS /
Next.js / Serverless / shopify / WordPress / etc… • 🐈
2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
Qiita্ͰDeveloper Blogߋ৽த
ࠓ͍ͨ͜͠ͱ
None
ܾࡁϑΥʔϜ
Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout
+ WebhookͰΓ͍ͨ͜ͱʹूத͠Α͏
Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout
+ WebhookͰΓ͍ͨ͜ͱʹूத͠Α͏
ͳʹ͔Λ࡞Δʹɺίετ͕͔͔Δ • αʔόʔඅ • ਓ݅අ • Ϣʔβʔαϙʔτ • ։ൃͦͷͷ •
ػձඅ༻ • Etc…
Α͘ݟ͔͚Δʢओ؍ʣϚωλΠζख๏ • ࠂܝࡌ • ϖΠΥʔϧʢ༗ྉϝσΟΞʣ • μϯϩʔυίϯςϯπ • ൢ
๚ऀʹΑΔܾࡁૢ࡞͕ඞཁͳख๏ • ࠂܝࡌ • ϖΠΥʔϧʢ༗ྉϝσΟΞʣ • μϯϩʔυίϯςϯπ • ൢ
ܾࡁϑΥʔϜ
Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout
+ WebhookͰΓ͍ͨ͜ͱʹूத͠Α͏
ܾࡁϑΥʔϜͷ࣮Δ͜ͱ͕ଟ͍ • ೖྗ͞ΕͨΧʔυใΛ҆શʹॲཧ͢Δ • ܾࡁ࣌ͷΤϥʔΛਖ਼͘͠Ϣʔβʔʹදࣔ͢Δ • ൪߸ɾ༗ޮظݶɾίʔυΛετϨεͳ͘ೖྗͰ͖ΔΑ͏ʹ͢Δ • ඞཁʹԠͯ͡ॅॴͳͲͷೖྗड͚͚Δ •
etc…
ࣗࣾͰอ༗͢ΔػثɾωοτϫʔΫʹ͓͍ ͯʮΧʔυใʯΛʰอଘʱʰॲཧʱʰ௨ աʱ͠ͳ͍͜ͱ վਖ਼ׂොൢച๏
ΧʔυใΛͲ͏ѻ͏͔ʁ 1. ܾࡁձࣾECϓϥοτϑΥʔϜ͕ఏڙ͢ΔܾࡁϖʔδʹભҠ͢Δ 2. ܾࡁձࣾͳͲ͕༻ҙ͢ΔSDKͰɺΧʔυใΛτʔΫϯԽ͢Δ 3. ࣗࣾγεςϜͰར༻Ͱ͖ΔΑ͏ʹɺPCI DSSʹ४ڌ͢Δ
ίετखؒΛߟ͑Δͱɺ࣮࣭̎ 1. ܾࡁձࣾECϓϥοτϑΥʔϜ͕ఏڙ͢ΔܾࡁϖʔδʹભҠ͢Δ 2. ܾࡁձࣾͳͲ͕༻ҙ͢ΔSDKͰɺΧʔυใΛτʔΫϯԽ͢Δ 3. ࣗࣾγεςϜͰར༻Ͱ͖ΔΑ͏ʹɺPCI DSSʹ४ڌ͢Δ
Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout
+ WebhookͰΓ͍ͨ͜ͱʹूத͠Α͏
StripeͷϦϯΫܕܾࡁػೳ: Checkout
αʔόʔଆͰܾࡁͷͨΊͷηογϣϯΛ࡞͢Δ
αʔόʔଆͰ࡞ͨ͠σʔλΛར༻ͯ͠ભҠ ɹ
Ҏ্
JS / React(CRA) / Next.jsͷΨΠυ͖αϯϓϧ https://stripe.com/docs/checkout/quickstart?client=next
ΧελϚΠζͰ͖Δ෦ • ૹྉઃఆ • ফඅ੫ࣗಈܭࢉ • ૹઌॅॴೖྗ • ఆظ՝ۚͷܖ •
ϩΰΩʔΧϥʔͷΧελϚΠζ
GAͳͲͰͷίϯόʔδϣϯτϥοΩϯάํ๏ https://stripe.com/docs/payments/checkout/analyze-conversion-funnel
Ͱങ͍Χΰػೳ ࣗ࡞͠ͳ͍ͱͰ͠ΐʁ
ΧʔτػೳΛఏڙ͢ΔReact HookϥΠϒϥϦ https://useshoppingcart.com/
ΧʔτͷՃআɾதͷऔಘͳͲ͕Ͱ͖Δ ɹ
Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout
+ WebhookͰΓ͍ͨ͜ͱʹूத͠Α͏
Ͱɺܾࡁͨ͠ޙͷॲཧͲ͏͢Δͷʁ • ܾࡁྃޙͷURLʹηογϣϯIDͷΫΤϦจࣈྻ͕ͭ͘ • ηογϣϯID͔Βܾࡁ༰ΛऔಘͰ͖ΔAPI͕࡞ΕΔ • จޙʹձһొ͍ͤͨ͞߹ɺ͜ͷIDΛ͏ͱศར • Stripe্ͷΠϕϯτWebhookͰर͑Δ •
จσʔλΛड͚ͯɺCRMૹܥγεςϜʹσʔλΛૹΔͳͲ
typeͰΠϕϯτͷछྨΛఆͯ͠ɺ data.objectΛར༻͢Δ ɹ
Webhookͷҙ • REST APIͳͷͰɺURL͕Θ͔Ε୭Ͱݺͼग़ͤΔ • ҙਤ͠ͳ͍ΠϕϯτΛૹΒΕΔͱɺ ࿈ܞ͢ΔαʔϏεʹѱӨڹ͕ͰΔ͔͠Εͳ͍ɾɾɾ • stripe.webhooks.constructEventΛͬͯɺ
Stripe Webhook͔Βͷݺͼग़͠Ͱ͋Δ͜ͱΛ֬ೝ͠Α͏
ओཁݴޠͰͷ࣮ΨΠυ͋Γ·͢ https://stripe.com/docs/webhooks/quickstart
·ͱΊ • αʔϏεΛ࡞ΔͨΊʹɺܾࡁආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜΔ͜ͱ͕͓͓͍ • Stripe CheckoutͰ͍͍ײ͡ͷܾࡁϖʔδΛखʹೖΕΑ͏ • Webhookuse-shopping-cart͕͋Εɺ
ίετɾϩʔίʔυͰ௨ൢػೳͷ࣮ɾɾɾʂ
Qiita্ͰDeveloper Blogߋ৽த
Thanks https://qiita.com/organizations/ stripe https://twitter.com/hide__dev #JP_Stripes