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

by Hidetaka Okamoto

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

2021/12ʹStripeʹδϣΠϯ͠·ͨ͠

Slide 4

Slide 4 text

དྷ݄ͰJP_Stripes͸̑प೥ʂ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Shopify Buy Button • ঎඼ҰཡͱΧʔτػೳͷSDK • JSͷίʔυεχϖοτΛ   HTMLϒϩοΫʹ͍ΕΔ͚ͩ • PrintfulͳͲΛ࿈ܞͤ͞Ε͹ɺ   ແࡏݿൢച΋ҰԠՄೳ

Slide 14

Slide 14 text

ShopifyΛࡶʹ࢖͍͍ͨWPϢʔβʔ޲͚ʁ • ݄ͷίετ͸ͦΜͳʹมΘΒͳ͍ʢShifter wayͷํ͕ͪΐͬͱ͍҆ʣ • Shopify Lite + Shifter Static T1   $9 + $16 = $25/mon • Shopify Basic -> $29/mon • αΠτ؅ཧΛWPଆ͚ͩʹू໿Ͱ͖Δͷ͸ϝϦοτ • ʮ͢Ͱʹ͋ΔWPʹECΛ଍͍ͨ͠ʯ&ʮ৽͍͜͠ͱ͸͋·Γ֮͑ͨ͘ͳ͍ʯ

Slide 15

Slide 15 text

ఆظ՝ۚ΍WooCommerceซ༻ͳΒStripe

Slide 16

Slide 16 text

Stripe Payment Links • ܾࡁ༻ͷURLΛൃߦͰ͖Δ • ఆظ՝ۚ΋OK • URL͚ͩͳͷͰɺ   WooͷߪೖϘλϯʹઃఆͰ͖Δ • ݟͨ໨͸Wooɺܾࡁ͸Stripe

Slide 17

Slide 17 text

Stripe͸ఆظߪೖ঎඼or εϞʔϧελʔτ޲͚ • Stripe͸ݪଇܾࡁख਺ྉͷΈͷ՝ۚʢҰ෦ྫ֎͋Γʣ • ചΕͳ͚Ε͹ɺ͓ۚ͸͔͔Βͳ͍ͷͰ௿ϦεΫͰ࢝ΊΕΔ • ఆظ՝ۚ΋NoCodeͰରԠͰ͖ΔͷͰɺ   ൦෍ձ΍ࡶࢽఆظߪಡͳͲͷఆظߪೖ঎඼Ͱ΋ར༻Մೳ • σδλϧμ΢ϯϩʔυ΋ɺZapierͳͲΛ࢖͑͹ҰԠՄೳ • ʮΧʔτˍࡏݿ؅ཧʯ͕Payment Links͚ͩͰ͸೉͍͠఺ΛͲ͏ଊ͑Δ͔

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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