$30 off During Our Annual Pro Sale. View Details »

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

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

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

Hidetaka Okamoto
PRO

February 10, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

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