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

https://easy2.connpass.com/event/235146/

Transcript

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

   View Slide

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

   View Slide

3. Ԭຊलߴ
   
   
   @hide__dev
   • JS / TS Developer
   
   
   • AWS / Next.js / Serverless /
   shopify / WordPress / etc…
   
   
   • 🐈
   

   View Slide

4. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
   

   View Slide

5. Qiita্ͰDeveloper Blogߋ৽த
   

   View Slide

6. ࠓ೔࿩͍ͨ͜͠ͱ
   

   View Slide

7. View Slide

8. ܾࡁϑΥʔϜ
   

   View Slide

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

   View Slide

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

    View Slide

11. ͳʹ͔Λ࡞Δʹ͸ɺίετ͕͔͔Δ
    • αʔόʔඅ
    
    
    • ਓ݅අ
    
    
    • Ϣʔβʔαϙʔτ
    
    
    • ։ൃͦͷ΋ͷ
    
    
    • ػձඅ༻
    
    
    • Etc…
    

    View Slide

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

    View Slide

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

    View Slide

14. ܾࡁϑΥʔϜ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. StripeͷϦϯΫܕܾࡁػೳ: Checkout
    

    View Slide

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

    View Slide

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

    View Slide

24. Ҏ্
    

    View Slide

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

    View Slide

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

    View Slide

27. GAͳͲͰͷίϯόʔδϣϯτϥοΩϯάํ๏
    https://stripe.com/docs/payments/checkout/analyze-conversion-funnel
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Ͱɺܾࡁͨ͠ޙͷॲཧͲ͏͢Δͷʁ
    • ܾࡁ׬ྃޙͷURLʹηογϣϯIDͷΫΤϦจࣈྻ͕ͭ͘
    
    
    • ηογϣϯID͔Βܾࡁ಺༰ΛऔಘͰ͖ΔAPI͕࡞ΕΔ
    
    
    • ஫จޙʹձһొ࿥͍ͤͨ͞৔߹͸ɺ͜ͷIDΛ࢖͏ͱศར
    
    
    • Stripe্ͷΠϕϯτ͸WebhookͰर͑Δ
    
    
    • ஫จσʔλΛड͚ͯɺCRM΍഑ૹܥγεςϜʹσʔλΛૹΔͳͲ
    

    View Slide

33. typeͰΠϕϯτͷछྨΛ൑ఆͯ͠ɺ
    
    
    data.objectΛར༻͢Δ
    ɹ
    

    View Slide

34. Webhookͷ஫ҙ఺
    • REST APIͳͷͰɺURL͕Θ͔Ε͹୭Ͱ΋ݺͼग़ͤΔ
    
    
    • ҙਤ͠ͳ͍ΠϕϯτΛૹΒΕΔͱɺ
    

    ࿈ܞ͢ΔαʔϏεʹѱӨڹ͕ͰΔ͔΋͠Εͳ͍ɾɾɾ
    
    
    • stripe.webhooks.constructEventΛ࢖ͬͯɺ
    

    Stripe Webhook͔Βͷݺͼग़͠Ͱ͋Δ͜ͱΛ֬ೝ͠Α͏
    

    View Slide

35. ओཁݴޠͰͷ࣮૷ΨΠυ΋͋Γ·͢
    https://stripe.com/docs/webhooks/quickstart
    

    View Slide

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

    ௿ίετɾϩʔίʔυͰ௨ൢػೳͷ࣮૷΋ɾɾɾʂ
    

    View Slide

37. Qiita্ͰDeveloper Blogߋ৽த
    

    View Slide

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

    View Slide