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

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

    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