Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022

[2/10 開催] Shifter オンラインミートアップ！ https://eventregist.com/e/M1NzTceR9n3d
の登壇資料です。

Transcript

1. Shopify / StripeͰ
   
   
   ੩తαΠτͰ΋
   
   
   ΦϯϥΠϯܾࡁɾ෺ൢΛ͸͡ΊΑ͏
   JP_GetShifter
   Hidetaka Okamoto 2022/2/10 ˌJP_GetShifter
   

   View Slide

2. Ԭຊलߴ
   
   
   @hide__dev
   • Stripe Developer Advocate
   
   
   • JS / TS Developer
   
   
   • AWS / Next.js / Serverless /
   shopify / …
   
   
   • 🐈
   #JAWS-UG
   

   View Slide

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

   View Slide

4. དྷ݄ͰJP_Stripes͸̑प೥ʂ
   

   View Slide

5. Agenda
   • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ
   
   
   • Shopify Buy Button & Stripe Payment Links
   
   
   • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
   

   View Slide

6. Agenda
   • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ
   
   
   • Shopify Buy Button & Stripe Payment Links
   
   
   • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
   

   View Slide

7. Shifter StaticͳΒ
   
   
   ࡶʹαΠτ͕࡞ΕΔ
   • ߋ৽ʹϜϥͷ͋Δϒϩά
   
   
   • ์ஔؾຯOSSͷDocsαΠτ
   
   
   • ޿ࠂऩೖૂ͍ͷΞϑΟϦΤΠτ
   
   
   • BillVektorʢ੥ٻॻ؅ཧʣͳΒ
   

   freeϓϥϯͰ࢖͑Δ
   

   View Slide

8. WordPressΛΘ͟Θ͟੩తԽ͢Δҙຯ
   • WordPress͸࢖͍͍͚ͨͲɺӡ༻อक͸ͨ͘͠ͳ͍
   
   
   • ৽͍͠CMS΍αʔϏεΛ֮͑Δͷ͸ΊΜͲ͍͘͞
   
   
   • ಠࣗυϝΠϯͰ؅ཧ͍ͨ͠
   
   
   • ਖ਼௚ͦΜͳʹಈతͳॲཧ͕ඞཁͳαΠτ͡Όͳ͍
   
   
   • ʮWPͰͷίϯςϯπ؅ཧʯͱʮHTML/JS/CSS + IMGʯ͚ͩ͘Ε
   

   View Slide

9. ಈతͳػೳ͸͋Δఔ౓ׂΓ੾Δ
   • ϑΥʔϜ: Google Form΍HubSpot (ແྉ͔Β࢖͑Δ)
   
   
   • ݕࡧ: খ͍͞αΠτͳΒAlgoliaͰ΋՝ۚͰͳ͍
   
   
   • Ϩίϝϯυ: Tag/Categoryϕʔεͷؔ࿈هࣄදࣔͰे෼
   
   
   • 💰: GoogleͳͲͷ޿ࠂཔΈ
   
   
   • ϝϯόʔγοϓ: ͦ͏͍͏ͷ͸ReactͰ΍Β͍ͤͯͩ͘͞🙇
   

   View Slide

10. ӡ༻අͷϖΠΛߟ͑Δͱɺ💰͸ؤுΓ͍ͨ
    • ݸਓར༻͚ͩͳΒɺษڧ୅ͱͯ͠ܦඅѻ͍Ͱे෼
    
    
    • ਓʹקΊΔͳΒɺ΋͏ͪΐͬͱ౿ΈࠐΜͰߟ͍͑ͨ
    
    
    • ʮαʔόʔଆͷॲཧΛ࢖ΘͣʹɺܾࡁΛߦ͏ํ๏ʯ
    
    
    • ՄೳͳΒ͹ɺWooCommerceʹࡌ͍ͤͨ
    

    View Slide

11. Agenda
    • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ
    
    
    • Shopify Buy Button & Stripe Payment Links
    
    
    • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
    

    View Slide

12. ෺ൢ΍ΔͳΒShopify
    https://remoneko.life/goods/
    

    View Slide

13. Shopify Buy Button
    • ঎඼ҰཡͱΧʔτػೳͷSDK
    
    
    • JSͷίʔυεχϖοτΛ
    

    HTMLϒϩοΫʹ͍ΕΔ͚ͩ
    
    
    • PrintfulͳͲΛ࿈ܞͤ͞Ε͹ɺ
    

    ແࡏݿൢച΋ҰԠՄೳ
    

    View Slide

14. ShopifyΛࡶʹ࢖͍͍ͨWPϢʔβʔ޲͚ʁ
    • ݄ͷίετ͸ͦΜͳʹมΘΒͳ͍ʢShifter wayͷํ͕ͪΐͬͱ͍҆ʣ
    
    
    • Shopify Lite + Shifter Static T1
    

    $9 + $16 = $25/mon
    
    
    • Shopify Basic -> $29/mon
    
    
    • αΠτ؅ཧΛWPଆ͚ͩʹू໿Ͱ͖Δͷ͸ϝϦοτ
    
    
    • ʮ͢Ͱʹ͋ΔWPʹECΛ଍͍ͨ͠ʯ&ʮ৽͍͜͠ͱ͸͋·Γ֮͑ͨ͘ͳ͍ʯ
    

    View Slide

15. ఆظ՝ۚ΍WooCommerceซ༻ͳΒStripe
    

    View Slide

16. Stripe Payment Links
    • ܾࡁ༻ͷURLΛൃߦͰ͖Δ
    
    
    • ఆظ՝ۚ΋OK
    
    
    • URL͚ͩͳͷͰɺ
    

    WooͷߪೖϘλϯʹઃఆͰ͖Δ
    
    
    • ݟͨ໨͸Wooɺܾࡁ͸Stripe
    

    View Slide

17. Stripe͸ఆظߪೖ঎඼or εϞʔϧελʔτ޲͚
    • Stripe͸ݪଇܾࡁख਺ྉͷΈͷ՝ۚʢҰ෦ྫ֎͋Γʣ
    
    
    • ചΕͳ͚Ε͹ɺ͓ۚ͸͔͔Βͳ͍ͷͰ௿ϦεΫͰ࢝ΊΕΔ
    
    
    • ఆظ՝ۚ΋NoCodeͰରԠͰ͖ΔͷͰɺ
    

    ൦෍ձ΍ࡶࢽఆظߪಡͳͲͷఆظߪೖ঎඼Ͱ΋ར༻Մೳ
    
    
    • σδλϧμ΢ϯϩʔυ΋ɺZapierͳͲΛ࢖͑͹ҰԠՄೳ
    
    
    • ʮΧʔτˍࡏݿ؅ཧʯ͕Payment Links͚ͩͰ͸೉͍͠఺ΛͲ͏ଊ͑Δ͔
    

    View Slide

18. Shopify / Stripeͷڞ௨߲
    • ͦΕͧΕͷDashboard͔Βܾࡁॲཧܥͷૢ࡞͕Մೳ
    
    
    • WebhookΛ࢖ͬͯɺ஫จޙͷ࡞ۀΛࣗಈԽͰ͖Δ
    
    
    • Zapier΍AWS StepFunctionsͰސ٬΁ͷ࿈བྷͳͲΛࣗಈԽ
    
    
    • HubSpot΍Intercomͱ࿈ܞ͢Ε͹CRM΍MAʹ΋
    
    
    • ʮ̍ͭͷ͜ͱΛ͏·͘΍ΔαʔϏεʯΛͲΕ͚ͩͭͳ͛Δ͔
    

    View Slide

19. Shopify Buy ButtonͱStripe Payment LinksͰ
    

    ڞ௨ͯ͠Ͱ͖ͳ͍͜ͱ
    • ձһొ࿥ܥ͸ࠓͷॴͳ͍
    
    
    • ήετ஫จͷΈͷड෇ʹͳΔ
    
    
    • ରԠͨ͠ͱͯ͠΋ɺ੩తWPͰ͸ೝূ͕΄΅ແཧ
    
    
    • JSͰ૊ΉͳΒ΋͏Next.jsͳͲΛ࢖ͬͯJamstack WPʹ͠Α͏
    
    
    • JamstackͳΒɺStripe΋Shopify΋Ͱ͖Δ͜ͱ͸੝Γͩ͘͞Μ
    

    View Slide

20. Agenda
    • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ
    
    
    • Shopify Buy Button & Stripe Payment Links
    
    
    • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
    

    View Slide

21. ͦͷαΠτͰ΍Γ͍ͨ͜ͱ͸ԿͩΖ͏ʁ
    • PoC΍ٕज़ݚᮎͳΒɺΨοπϦઑΖ͏ʢHydrogen / Faust.js / Connectʣ
    
    
    • ૣ࢝͘Ί͍ͨͳΒɺϊʔίʔυɾϩʔίʔυͰ࡞ۀΛऴΘΒͤΑ͏
    
    
    • ʮͦͷಈతػೳ͸ɺอकίετΛࢧ෷͏ʹ஋͢Δͷ͔ʁʯ
    
    
    • Yes -> αʔόʔʹ౤ࢿ͠Α͏ʢϑϧϚωʔδυ ΍ IaaS + IaCʣ
    
    
    • No -> ݄ͷอक޻਺/ίετͱShifter StaticͳΒͲ͕͍ͬͪ҆ʁ
    
    
    • ʮ΍Γ͍ͨ͜ͱʯʹूதͰ͖ΔαʔϏεʹ͓ۚΛ͔͚Α͏
    

    View Slide

22. Thanks
    • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ
    
    
    • Shopify Buy Button & Stripe Payment Links
    
    
    • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
    
    
    • Twitter: @hide__dev
    

    View Slide