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
610
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
360
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
PRO
0
45
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
360
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
PRO
0
350
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
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.2k
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
NgRx Signal Store
rainerhahnekamp
0
120
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
オーナーシップを持つ領域を明確にする
konifar
11
2.6k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
140
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
340
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.9k
Gamification - CAS2011
davidbonilla
76
4.6k
A better future with KSS
kneath
231
16k
Optimizing for Happiness
mojombo
370
69k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
15
2.6k
What's new in Ruby 2.0
geeforr
337
31k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Rails Girls Zürich Keynote
gr2m
91
13k
What the flash - Photography Introduction
edds
64
11k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
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