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

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

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

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

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

Yoshiteru Iwasaki

September 28, 2022
Tweet

More Decks by Yoshiteru Iwasaki

Other Decks in Technology

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