Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25

Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto
PRO

January 27, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. StripeͰͷ ΦϯϥΠϯܾࡁཧղͨ͠ ΤϯδχΞୡͷʮʓʓ׬શʹཧղͨ͠ʯTalkɹ#25 Hidetaka Okamoto 2022/1/22 #׬શʹཧղͨ͠Talk

  2. ͓༠͍͋Γ͕ͱ͏͍͟͝·͢ʂ https://zenn.dev/hideokamoto/articles/52a6e4280cced5#༨ஊɿొஃػձ͍ͩ͘͞

  3. Ԭຊलߴ @hide__dev • JS / TS Developer • AWS /

    Next.js / Serverless / shopify / WordPress / etc… • 🐈
  4. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠

  5. Qiita্ͰDeveloper Blogߋ৽த

  6. ࠓ೔࿩͍ͨ͜͠ͱ

  7. None
  8. ܾࡁϑΥʔϜ

  9. Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout

    + WebhookͰ΍Γ͍ͨ͜ͱʹूத͠Α͏
  10. Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout

    + WebhookͰ΍Γ͍ͨ͜ͱʹूத͠Α͏
  11. ͳʹ͔Λ࡞Δʹ͸ɺίετ͕͔͔Δ • αʔόʔඅ • ਓ݅අ • Ϣʔβʔαϙʔτ • ։ൃͦͷ΋ͷ •

    ػձඅ༻ • Etc…
  12. Α͘ݟ͔͚Δʢओ؍ʣϚωλΠζख๏ • ޿ࠂܝࡌ • ϖΠ΢Υʔϧʢ༗ྉϝσΟΞʣ • μ΢ϯϩʔυίϯςϯπ • ෺ൢ

  13. ๚໰ऀʹΑΔܾࡁૢ࡞͕ඞཁͳख๏ • ޿ࠂܝࡌ • ϖΠ΢Υʔϧʢ༗ྉϝσΟΞʣ • μ΢ϯϩʔυίϯςϯπ • ෺ൢ

  14. ܾࡁϑΥʔϜ

  15. Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout

    + WebhookͰ΍Γ͍ͨ͜ͱʹूத͠Α͏
  16. ܾࡁϑΥʔϜͷ࣮૷͸΍Δ͜ͱ͕ଟ͍ • ೖྗ͞ΕͨΧʔυ৘ใΛ҆શʹॲཧ͢Δ • ܾࡁ࣌ͷΤϥʔΛਖ਼͘͠Ϣʔβʔʹදࣔ͢Δ • ൪߸ɾ༗ޮظݶɾίʔυΛετϨεͳ͘ೖྗͰ͖ΔΑ͏ʹ͢Δ • ඞཁʹԠͯ͡ॅॴͳͲͷೖྗ΋ड͚෇͚Δ •

    etc…
  17. ࣗࣾͰอ༗͢ΔػثɾωοτϫʔΫʹ͓͍ ͯʮΧʔυ৘ใʯΛʰอଘʱʰॲཧʱʰ௨ աʱ͠ͳ͍͜ͱ վਖ਼ׂොൢച๏

  18. Χʔυ৘ใΛͲ͏ѻ͏͔ʁ 1. ܾࡁձࣾ΍ECϓϥοτϑΥʔϜ͕ఏڙ͢ΔܾࡁϖʔδʹભҠ͢Δ 2. ܾࡁձࣾͳͲ͕༻ҙ͢ΔSDKͰɺΧʔυ৘ใΛτʔΫϯԽ͢Δ 3. ࣗࣾγεςϜͰར༻Ͱ͖ΔΑ͏ʹɺPCI DSSʹ४ڌ͢Δ

  19. ίετ΍खؒΛߟ͑Δͱɺ࣮࣭̎୒ 1. ܾࡁձࣾ΍ECϓϥοτϑΥʔϜ͕ఏڙ͢ΔܾࡁϖʔδʹભҠ͢Δ 2. ܾࡁձࣾͳͲ͕༻ҙ͢ΔSDKͰɺΧʔυ৘ใΛτʔΫϯԽ͢Δ 3. ࣗࣾγεςϜͰར༻Ͱ͖ΔΑ͏ʹɺPCI DSSʹ४ڌ͢Δ

  20. Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout

    + WebhookͰ΍Γ͍ͨ͜ͱʹूத͠Α͏
  21. StripeͷϦϯΫܕܾࡁػೳ: Checkout

  22. αʔόʔଆͰܾࡁͷͨΊͷηογϣϯΛ࡞੒͢Δ

  23. αʔόʔଆͰ࡞੒ͨ͠σʔλΛར༻ͯ͠ભҠ ɹ

  24. Ҏ্

  25. JS / React(CRA) / Next.jsͷΨΠυ෇͖αϯϓϧ https://stripe.com/docs/checkout/quickstart?client=next

  26. ΧελϚΠζͰ͖Δ෦෼ • ഑ૹྉઃఆ • ফඅ੫ࣗಈܭࢉ • ഑ૹઌॅॴೖྗ • ఆظ՝ۚͷܖ໿ •

    ϩΰ΍ΩʔΧϥʔͷΧελϚΠζ
  27. GAͳͲͰͷίϯόʔδϣϯτϥοΩϯάํ๏ https://stripe.com/docs/payments/checkout/analyze-conversion-funnel

  28. Ͱ΋ങ͍෺Χΰػೳ͸ ࣗ࡞͠ͳ͍ͱͰ͠ΐʁ

  29. ΧʔτػೳΛఏڙ͢ΔReact HookϥΠϒϥϦ https://useshoppingcart.com/

  30. Χʔτ΁ͷ௥Ճ΍࡟আɾத਎ͷऔಘͳͲ͕Ͱ͖Δ ɹ

  31. Agenda • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • ʮ୭͔͕͍͍ײ͡ͷϖʔδΛ༻ҙͯ͘͠ΕͨΒͳ͊ʯ • Stripe Checkout

    + WebhookͰ΍Γ͍ͨ͜ͱʹूத͠Α͏
  32. Ͱɺܾࡁͨ͠ޙͷॲཧͲ͏͢Δͷʁ • ܾࡁ׬ྃޙͷURLʹηογϣϯIDͷΫΤϦจࣈྻ͕ͭ͘ • ηογϣϯID͔Βܾࡁ಺༰ΛऔಘͰ͖ΔAPI͕࡞ΕΔ • ஫จޙʹձһొ࿥͍ͤͨ͞৔߹͸ɺ͜ͷIDΛ࢖͏ͱศར • Stripe্ͷΠϕϯτ͸WebhookͰर͑Δ •

    ஫จσʔλΛड͚ͯɺCRM΍഑ૹܥγεςϜʹσʔλΛૹΔͳͲ
  33. typeͰΠϕϯτͷछྨΛ൑ఆͯ͠ɺ data.objectΛར༻͢Δ ɹ

  34. Webhookͷ஫ҙ఺ • REST APIͳͷͰɺURL͕Θ͔Ε͹୭Ͱ΋ݺͼग़ͤΔ • ҙਤ͠ͳ͍ΠϕϯτΛૹΒΕΔͱɺ 
 ࿈ܞ͢ΔαʔϏεʹѱӨڹ͕ͰΔ͔΋͠Εͳ͍ɾɾɾ • stripe.webhooks.constructEventΛ࢖ͬͯɺ

    
 Stripe Webhook͔Βͷݺͼग़͠Ͱ͋Δ͜ͱΛ֬ೝ͠Α͏
  35. ओཁݴޠͰͷ࣮૷ΨΠυ΋͋Γ·͢ https://stripe.com/docs/webhooks/quickstart

  36. ·ͱΊ • αʔϏεΛ࡞ΔͨΊʹɺܾࡁ͸ආ͚ͯ௨Εͳ͍ • ܾࡁϑΥʔϜ͸΍Δ͜ͱ͕͓͓͍ • Stripe CheckoutͰ͍͍ײ͡ͷܾࡁϖʔδΛखʹೖΕΑ͏ • Webhook΍use-shopping-cart͕͋Ε͹ɺ

    
 ௿ίετɾϩʔίʔυͰ௨ൢػೳͷ࣮૷΋ɾɾɾʂ
  37. Qiita্ͰDeveloper Blogߋ৽த

  38. Thanks https://qiita.com/organizations/ stripe https://twitter.com/hide__dev #JP_Stripes