[2/10 開催] Shifter オンラインミートアップ! https://eventregist.com/e/M1NzTceR9n3d の登壇資料です。
Shopify / StripeͰ੩తαΠτͰΦϯϥΠϯܾࡁɾൢΛ͡ΊΑ͏JP_GetShifterHidetaka Okamoto 2022/2/10 ˌJP_GetShifter
View Slide
Ԭຊलߴ@hide__dev• Stripe Developer Advocate• JS / TS Developer• AWS / Next.js / Serverless /shopify / …• 🐈#JAWS-UG
2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
དྷ݄ͰJP_Stripes̑पʂ
Agenda• ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ• Shopify Buy Button & Stripe Payment Links• EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
Shifter StaticͳΒࡶʹαΠτ͕࡞ΕΔ• ߋ৽ʹϜϥͷ͋Δϒϩά• ์ஔؾຯOSSͷDocsαΠτ• ࠂऩೖૂ͍ͷΞϑΟϦΤΠτ• BillVektorʢٻॻཧʣͳΒ freeϓϥϯͰ͑Δ
WordPressΛΘ͟Θ͟੩తԽ͢Δҙຯ• WordPress͍͍͚ͨͲɺӡ༻อकͨ͘͠ͳ͍• ৽͍͠CMSαʔϏεΛ֮͑ΔͷΊΜͲ͍͘͞• ಠࣗυϝΠϯͰཧ͍ͨ͠• ਖ਼ͦΜͳʹಈతͳॲཧ͕ඞཁͳαΠτ͡Όͳ͍• ʮWPͰͷίϯςϯπཧʯͱʮHTML/JS/CSS + IMGʯ͚ͩ͘Ε
ಈతͳػೳ͋ΔఔׂΓΔ• ϑΥʔϜ: Google FormHubSpot (ແྉ͔Β͑Δ)• ݕࡧ: খ͍͞αΠτͳΒAlgoliaͰ՝ۚͰͳ͍• Ϩίϝϯυ: Tag/Categoryϕʔεͷؔ࿈هࣄදࣔͰे• 💰: GoogleͳͲͷࠂཔΈ• ϝϯόʔγοϓ: ͦ͏͍͏ͷReactͰΒ͍ͤͯͩ͘͞🙇
ӡ༻අͷϖΠΛߟ͑Δͱɺ💰ؤுΓ͍ͨ• ݸਓར༻͚ͩͳΒɺษڧͱͯ͠ܦඅѻ͍Ͱे• ਓʹקΊΔͳΒɺ͏ͪΐͬͱ౿ΈࠐΜͰߟ͍͑ͨ• ʮαʔόʔଆͷॲཧΛΘͣʹɺܾࡁΛߦ͏ํ๏ʯ• ՄೳͳΒɺWooCommerceʹࡌ͍ͤͨ
ൢΔͳΒShopifyhttps://remoneko.life/goods/
Shopify Buy Button• ҰཡͱΧʔτػೳͷSDK• JSͷίʔυεχϖοτΛ HTMLϒϩοΫʹ͍ΕΔ͚ͩ• PrintfulͳͲΛ࿈ܞͤ͞Εɺ ແࡏݿൢചҰԠՄೳ
ShopifyΛࡶʹ͍͍ͨWPϢʔβʔ͚ʁ• ݄ͷίετͦΜͳʹมΘΒͳ͍ʢShifter wayͷํ͕ͪΐͬͱ͍҆ʣ• Shopify Lite + Shifter Static T1 $9 + $16 = $25/mon• Shopify Basic -> $29/mon• αΠτཧΛWPଆ͚ͩʹूͰ͖ΔͷϝϦοτ• ʮ͢Ͱʹ͋ΔWPʹECΛ͍ͨ͠ʯ&ʮ৽͍͜͠ͱ͋·Γ֮͑ͨ͘ͳ͍ʯ
ఆظ՝ۚWooCommerceซ༻ͳΒStripe
Stripe Payment Links• ܾࡁ༻ͷURLΛൃߦͰ͖Δ• ఆظ՝ۚOK• URL͚ͩͳͷͰɺ WooͷߪೖϘλϯʹઃఆͰ͖Δ• ݟͨWooɺܾࡁStripe
Stripeఆظߪೖor εϞʔϧελʔτ͚• StripeݪଇܾࡁखྉͷΈͷ՝ۚʢҰ෦ྫ֎͋Γʣ• ചΕͳ͚Εɺ͓͔͔ۚΒͳ͍ͷͰϦεΫͰ࢝ΊΕΔ• ఆظ՝ۚNoCodeͰରԠͰ͖ΔͷͰɺ ൦ձࡶࢽఆظߪಡͳͲͷఆظߪೖͰར༻Մೳ• σδλϧμϯϩʔυɺZapierͳͲΛ͑ҰԠՄೳ• ʮΧʔτˍࡏݿཧʯ͕Payment Links͚ͩͰ͍͠ΛͲ͏ଊ͑Δ͔
Shopify / Stripeͷڞ௨߲• ͦΕͧΕͷDashboard͔Βܾࡁॲཧܥͷૢ࡞͕Մೳ• WebhookΛͬͯɺจޙͷ࡞ۀΛࣗಈԽͰ͖Δ• ZapierAWS StepFunctionsͰސ٬ͷ࿈བྷͳͲΛࣗಈԽ• HubSpotIntercomͱ࿈ܞ͢ΕCRMMAʹ• ʮ̍ͭͷ͜ͱΛ͏·͘ΔαʔϏεʯΛͲΕ͚ͩͭͳ͛Δ͔
Shopify Buy ButtonͱStripe Payment LinksͰ ڞ௨ͯ͠Ͱ͖ͳ͍͜ͱ• ձһొܥࠓͷॴͳ͍• ήετจͷΈͷडʹͳΔ• ରԠͨ͠ͱͯ͠ɺ੩తWPͰೝূ͕΄΅ແཧ• JSͰΉͳΒ͏Next.jsͳͲΛͬͯJamstack WPʹ͠Α͏• JamstackͳΒɺStripeShopifyͰ͖Δ͜ͱΓͩ͘͞Μ
ͦͷαΠτͰΓ͍ͨ͜ͱԿͩΖ͏ʁ• PoCٕज़ݚᮎͳΒɺΨοπϦઑΖ͏ʢHydrogen / Faust.js / Connectʣ• ૣ࢝͘Ί͍ͨͳΒɺϊʔίʔυɾϩʔίʔυͰ࡞ۀΛऴΘΒͤΑ͏• ʮͦͷಈతػೳɺอकίετΛࢧ͏ʹ͢Δͷ͔ʁʯ• Yes -> αʔόʔʹࢿ͠Α͏ʢϑϧϚωʔδυ IaaS + IaCʣ• No -> ݄ͷอक/ίετͱShifter StaticͳΒͲ͕͍ͬͪ҆ʁ• ʮΓ͍ͨ͜ͱʯʹूதͰ͖ΔαʔϏεʹ͓ۚΛ͔͚Α͏
Thanks• ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ• Shopify Buy Button & Stripe Payment Links• EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔• Twitter: @hide__dev