ノーコードでStripeのCustomer Portal を使う

JP_Stripes Online Vol.6 ～ローコード・ノーコードで課金・集金をカンタンに！
https://jpstripes.connpass.com/event/260443/

で発表したスライドです。

Transcript

1. I
   2022/9/28
   #JP_Stripes
   ؠ࡚ ળޫʢ@neeton_iwasakiʣ
   ϊʔίʔυͰ
   Stripeͷ
   Customer
   Portal
   Λ࢖͏
   

   View Slide

2. TOWNגࣜձࣾ
   ϓϩμΫτϚωʔδϟʔ
   @neeton_iwasaki
   ؠ࡚ ળޫ
   ͍Θ͖͞ Αͯ͠Δ
   

   View Slide

3. https://aipo.com
   toB޲͚
   εέδϡʔϧ؅ཧSaaS
   Aipo
   

   View Slide

4. ● αϒεΫϏδωεͰStripeྺ 6೥
   ● ಋೖ࣌ʹ͕ͬͭΓ࣮૷
   ● ϏδωεͷมԽʹ߹Θͤͯ౎౓վम
   ● Customer Portalྺ ൒೥
   ຊ೔ͷཱ৔
   Customer Portal ͍͍ͧ
   

   View Slide

5. ● Customer Portal ొ৔લ
   ● Customer Portal ͱ͸
   ● αϒεΫͰ Customer Portal Λ࢖͏
   ● Customer Portal ϊʔίʔυରԠલ
   ● Customer Portal ϊʔίʔυରԠޙ
   ຊ೔͓࿩͢Δ͜ͱ
   

   View Slide

6. Customer
   Portal
   ొ৔લ
   

   View Slide

7. ● ॆ࣮ͨ͠APIˍSDK
   ● Θ͔Γ΍͍͢APIϦϑΝϨϯε
   ● μογϡϘʔυ೔ຊޠԽະରԠʢ౰࣌ʣ
   ● બ୒ࢶͱͯ͠ϑϧεΫϥονͷΈ
   Stripeಋೖ౰࣌ͷҹ৅
   ΤϯδχΞϑϨϯυϦʔ
   

   View Slide

8. αʔϏεಠࣗͷ
   ੥ٻϧʔϧͳͲ
   ࡉ͔ͳ࡞ΓࠐΈ͕Մೳ
   ϑϧεΫϥονͷϝϦοτ
   

   View Slide

9. ྉۚମܥͷݟ௚࣌͠ͳͲ
   γεςϜվमʹ
   ΤϯδχΞͷ޻਺͕͔͔Δ
   ϑϧεΫϥονͷσϝϦοτᶃ
   

   View Slide

10. StripeͷਐԽ
    Ϋʔϙϯ
    ΫϨδοτϊʔτ
    ରԠʹ
    ΤϯδχΞͷ޻਺͕͔͔Δ
    ϑϧεΫϥονͷσϝϦοτᶄ
    

    View Slide

11. ೥
    Customer Portal
    ϦϦʔε
    

    View Slide

12. Customer
    Portal
    ͱ͸
    

    View Slide

13. ● ΤϯυϢʔβʔ޲͚ʹ੥ٻ؅ཧػೳΛఏڙ
    ● Ұ࣌తͳURLΛൃߦ
    Customer Portalͱ͸
    

    View Slide

14. Customer PortalͰͰ͖Δ͜ͱ
    ● ఆظܾࡁͷϓϥϯมߋ
    ● ࢧ෷͍ཤྺͷ֬ೝ
    ● ࢧ෷͍ํ๏ͷมߋ
    ● ੥ٻઌ৘ใͷมߋ
    ● Ϋʔϙϯద༻
    

    View Slide

15. Customer Portalઃఆ߲໨ᶃ
    

    View Slide

16. Customer Portalઃఆ߲໨ᶄ
    

    View Slide

17. Customer Portalઃఆ߲໨ᶅ
    

    View Slide

18. Customer Portalઃఆ߲໨ᶆ
    

    View Slide

19. αϒεΫͰ
    Customer
    PortalΛ࢖͏
    

    View Slide

20. 1. ৽نܖ໿ਃ͠ࠐΈɺΫϨΧొ࿥
    2. ܖ໿ϓϥϯͷมߋ
    3. ࢧ෷ཤྺͷ֬ೝ
    4. ΫϨΧ৘ใͷมߋ
    5. ੥ٻઌ৘ใͷมߋ
    αϒεΫͷܾࡁ·ΘΓͰඞཁͳػೳ
    

    View Slide

21. αϒεΫͷܾࡁ·ΘΓͰඞཁͳػೳͱͦͷ࣮૷
    ػೳ ϑϧεΫϥον Customer Portal
    ৽نܖ໿ਃ͠ࠐΈ Checkout ඇରԠ
    ࢧ෷ཤྺͷ֬ೝ ཁ࣮૷ ରԠࡁ
    ΫϨΧ৘ใͷมߋ Checkout ରԠࡁ
    ܖ໿಺༰ͷมߋ ཁ࣮૷ ରԠࡁ
    ੥ٻઌ৘ใͷมߋ ཁ࣮૷ ରԠࡁ
    

    View Slide

22. ϊʔίʔυ
    ରԠલ
    

    View Slide

23. Customer PortalͷURLʹΞΫηε͢ΔྲྀΕ
    ϦϯΫΛΫϦοΫͯ͠Customer PortalʹϦμΠϨΫτ
    

    View Slide

24. Customer PortalͷURLʹΞΫηε͢ΔྲྀΕ
    ϦϯΫ
    Customer Portal
    URLੜ੒
    Stripe API Customer Portal
    ༗ޮظݶͷ͋ΔURLΛදࣔ
    ϦϯΫΛΫϦοΫ
    URLੜ੒ʹAPI͕ඞཁ
    

    View Slide

25. ϊʔίʔυ
    ରԠޙ
    

    View Slide

26. Customer PortalϦϯΫͷੜ੒
    

    View Slide

27. ϦϯΫ͔ΒCustomer PortalʹΞΫηε͢ΔྲྀΕᶃ
    ϝʔϧΞυϨεͷೖྗ
    

    View Slide

28. ϦϯΫ͔ΒCustomer PortalʹΞΫηε͢ΔྲྀΕᶄ
    ֬ೝίʔυͷೖྗ
    ϝʔϧͰಧ͍ͨίʔυΛೖྗ
    

    View Slide

29. ϦϯΫ͔ΒCustomer PortalʹΞΫηε͢ΔྲྀΕᶅ
    Customer Portalදࣔ
    

    View Slide

30. ● ϝʔϧΞυϨεͷߋ৽͸Ͱ͖ͳ͍
    ● ಉ͡ϝʔϧΞυϨε͕ෳ਺͋Δ৔߹
    ○ ΞΫςΟϒͳαϒεΫϦϓγϣϯ͕͋Δ
    ○ ࠷ۙ࡞੒͞Εͨސ٬
    Λදࣔ
    Customer Portal ϦϯΫڞ༗ͷ஫ҙ఺
    

    View Slide

31. Customer PortalͷURLʹΞΫηε͢ΔྲྀΕ
    ϦϯΫઌURLͷݻఆԽ
    

    View Slide

32. Customer PortalͷURLʹΞΫηε͢ΔྲྀΕ
    API͕ෆཁ
    ϦϯΫΛΫϦοΫ
    ϦϯΫ
    ༗ޮظݶͷ͋ΔURLΛදࣔ
    Customer
    Portal
    

    View Slide

33. Customer Portal ϦϯΫڞ༗ͷར༻γʔϯ
    νϟοτͰͷ໰͍߹Θͤ
    URLΛ௚઀఻͑Δ͜ͱ͕Մೳʹ
    ϝʔϧͰͷ໰͍߹Θͤ
    αʔϏεར༻ऀ≠ܾࡁ୲౰ऀ
    ΤϯυϢʔβʔ≠࠶ൢύʔτφʔ
    

    View Slide

34. ● Stripeಋೖ࣌ʹ։ൃෆཁ
    ● StripeͷAPIมߋ΍ػೳ௥Ճ͕͋ͬͯ΋։ൃෆཁ
    ϊʔίʔυͷϝϦοτ
    ΤϯδχΞͷྗΛआΓͣʹStripeͷಋೖɾӡ༻͕Ͱ͖Δ
    

    View Slide

35. ҎԼͷૢ࡞ͷΈʹݶఆ
    ● Webhook ͷड͚औΓ
    ● Checkout ͷURLੜ੒
    ● Customer Portal ͷURLੜ੒
    มԽͷଟ͍SaaSͰͷΦεεϝStripe APIར༻ํ਑
    StripeͷΞοϓσʔτͷԸܙΛड͚΍͍͢
    

    View Slide

36. ͦΕͰ΋
    "1*͸ඞཁ͔ɻɻ
    

    View Slide

37. ͍͍͑
    

    View Slide

38. ͕͍ͪ·͢
    

    View Slide

39. ϊʔίʔυ
    Customer Portal
    ຊ౰ͷڧΈ͸
    

    View Slide

40. ׬શϊʔίʔυͰ
    ӡ༻Մ
    

    View Slide

41. ৽نܖ໿ਃ͠ࠐΈ࣌
    μογϡϘʔυ͔ΒαϒεΫϦϓγϣϯ࡞੒ͰCheckoutෆཁ
    

    View Slide

42. Χʔυ৘ใͷೖྗ
    ϊʔίʔυͷCustomer PortalͰ׬݁
    

    View Slide

43. μογϡϘʔυͱ
    $VTUPNFS1PSUBMͰ
    ׬શϊʔίʔυӡ༻
    

    View Slide

44. $VTUPNFS1PSUBMΛ࢖ͬͯ
    ϏδωεͷมԽʹڧ͍
    ܾࡁΛ
    

    View Slide