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
2. Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS Developer • AWS / Next.js / Serverless / shopify / … • 🐈 #JAWS-UG
3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
4. དྷ݄ͰJP_Stripes͸̑प೥ʂ
5. Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
6. Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
7. Shifter StaticͳΒ ࡶʹαΠτ͕࡞ΕΔ • ߋ৽ʹϜϥͷ͋Δϒϩά • ์ஔؾຯOSSͷDocsαΠτ • ޿ࠂऩೖૂ͍ͷΞϑΟϦΤΠτ • BillVektorʢ੥ٻॻ؅ཧʣͳΒ 
 freeϓϥϯͰ࢖͑Δ
8. WordPressΛΘ͟Θ͟੩తԽ͢Δҙຯ • WordPress͸࢖͍͍͚ͨͲɺӡ༻อक͸ͨ͘͠ͳ͍ • ৽͍͠CMS΍αʔϏεΛ֮͑Δͷ͸ΊΜͲ͍͘͞ • ಠࣗυϝΠϯͰ؅ཧ͍ͨ͠ • ਖ਼௚ͦΜͳʹಈతͳॲཧ͕ඞཁͳαΠτ͡Όͳ͍ • ʮWPͰͷίϯςϯπ؅ཧʯͱʮHTML/JS/CSS + IMGʯ͚ͩ͘Ε
9. ಈతͳػೳ͸͋Δఔ౓ׂΓ੾Δ • ϑΥʔϜ: Google Form΍HubSpot (ແྉ͔Β࢖͑Δ) • ݕࡧ: খ͍͞αΠτͳΒAlgoliaͰ΋՝ۚͰͳ͍ • Ϩίϝϯυ: Tag/Categoryϕʔεͷؔ࿈هࣄදࣔͰे෼ • 💰: GoogleͳͲͷ޿ࠂཔΈ • ϝϯόʔγοϓ: ͦ͏͍͏ͷ͸ReactͰ΍Β͍ͤͯͩ͘͞🙇
10. ӡ༻අͷϖΠΛߟ͑Δͱɺ💰͸ؤுΓ͍ͨ • ݸਓར༻͚ͩͳΒɺษڧ୅ͱͯ͠ܦඅѻ͍Ͱे෼ • ਓʹקΊΔͳΒɺ΋͏ͪΐͬͱ౿ΈࠐΜͰߟ͍͑ͨ • ʮαʔόʔଆͷॲཧΛ࢖ΘͣʹɺܾࡁΛߦ͏ํ๏ʯ • ՄೳͳΒ͹ɺWooCommerceʹࡌ͍ͤͨ
11. Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
12. ෺ൢ΍ΔͳΒShopify https://remoneko.life/goods/
13. Shopify Buy Button • ঎඼ҰཡͱΧʔτػೳͷSDK • JSͷίʔυεχϖοτΛ 
 HTMLϒϩοΫʹ͍ΕΔ͚ͩ • PrintfulͳͲΛ࿈ܞͤ͞Ε͹ɺ 
 ແࡏݿൢച΋ҰԠՄೳ
14. ShopifyΛࡶʹ࢖͍͍ͨWPϢʔβʔ޲͚ʁ • ݄ͷίετ͸ͦΜͳʹมΘΒͳ͍ʢShifter wayͷํ͕ͪΐͬͱ͍҆ʣ • Shopify Lite + Shifter Static T1 
 $9 + $16 = $25/mon • Shopify Basic -> $29/mon • αΠτ؅ཧΛWPଆ͚ͩʹू໿Ͱ͖Δͷ͸ϝϦοτ • ʮ͢Ͱʹ͋ΔWPʹECΛ଍͍ͨ͠ʯ&ʮ৽͍͜͠ͱ͸͋·Γ֮͑ͨ͘ͳ͍ʯ
15. ఆظ՝ۚ΍WooCommerceซ༻ͳΒStripe
16. Stripe Payment Links • ܾࡁ༻ͷURLΛൃߦͰ͖Δ • ఆظ՝ۚ΋OK • URL͚ͩͳͷͰɺ 
 WooͷߪೖϘλϯʹઃఆͰ͖Δ • ݟͨ໨͸Wooɺܾࡁ͸Stripe
17. Stripe͸ఆظߪೖ঎඼or εϞʔϧελʔτ޲͚ • Stripe͸ݪଇܾࡁख਺ྉͷΈͷ՝ۚʢҰ෦ྫ֎͋Γʣ • ചΕͳ͚Ε͹ɺ͓ۚ͸͔͔Βͳ͍ͷͰ௿ϦεΫͰ࢝ΊΕΔ • ఆظ՝ۚ΋NoCodeͰରԠͰ͖ΔͷͰɺ 
 ൦෍ձ΍ࡶࢽఆظߪಡͳͲͷఆظߪೖ঎඼Ͱ΋ར༻Մೳ • σδλϧμ΢ϯϩʔυ΋ɺZapierͳͲΛ࢖͑͹ҰԠՄೳ • ʮΧʔτˍࡏݿ؅ཧʯ͕Payment Links͚ͩͰ͸೉͍͠఺ΛͲ͏ଊ͑Δ͔
18. Shopify / Stripeͷڞ௨߲ • ͦΕͧΕͷDashboard͔Βܾࡁॲཧܥͷૢ࡞͕Մೳ • WebhookΛ࢖ͬͯɺ஫จޙͷ࡞ۀΛࣗಈԽͰ͖Δ • Zapier΍AWS StepFunctionsͰސ٬΁ͷ࿈བྷͳͲΛࣗಈԽ • HubSpot΍Intercomͱ࿈ܞ͢Ε͹CRM΍MAʹ΋ • ʮ̍ͭͷ͜ͱΛ͏·͘΍ΔαʔϏεʯΛͲΕ͚ͩͭͳ͛Δ͔
19. Shopify Buy ButtonͱStripe Payment LinksͰ 
 ڞ௨ͯ͠Ͱ͖ͳ͍͜ͱ • ձһొ࿥ܥ͸ࠓͷॴͳ͍ • ήετ஫จͷΈͷड෇ʹͳΔ • ରԠͨ͠ͱͯ͠΋ɺ੩తWPͰ͸ೝূ͕΄΅ແཧ • JSͰ૊ΉͳΒ΋͏Next.jsͳͲΛ࢖ͬͯJamstack WPʹ͠Α͏ • JamstackͳΒɺStripe΋Shopify΋Ͱ͖Δ͜ͱ͸੝Γͩ͘͞Μ
20. Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
21. ͦͷαΠτͰ΍Γ͍ͨ͜ͱ͸ԿͩΖ͏ʁ • PoC΍ٕज़ݚᮎͳΒɺΨοπϦઑΖ͏ʢHydrogen / Faust.js / Connectʣ • ૣ࢝͘Ί͍ͨͳΒɺϊʔίʔυɾϩʔίʔυͰ࡞ۀΛऴΘΒͤΑ͏ • ʮͦͷಈతػೳ͸ɺอकίετΛࢧ෷͏ʹ஋͢Δͷ͔ʁʯ • Yes -> αʔόʔʹ౤ࢿ͠Α͏ʢϑϧϚωʔδυ ΍ IaaS + IaCʣ • No -> ݄ͷอक޻਺/ίετͱShifter StaticͳΒͲ͕͍ͬͪ҆ʁ • ʮ΍Γ͍ͨ͜ͱʯʹूதͰ͖ΔαʔϏεʹ͓ۚΛ͔͚Α͏
22. Thanks • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔ • Twitter: @hide__dev