Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022
Hidetaka Okamoto
PRO
February 10, 2022
Technology
0
230
Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022
[2/10 開催] Shifter オンラインミートアップ!
https://eventregist.com/e/M1NzTceR9n3d
の登壇資料です。
Hidetaka Okamoto
PRO
February 10, 2022
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
PRO
0
56
Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25
hideokamoto
PRO
0
280
Jamstack開発者のための App Runner入門
hideokamoto
PRO
1
110
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
PRO
0
120
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
PRO
2
2.8k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
PRO
1
60
Shifter Headlessと Headless WordPressの紹介
hideokamoto
PRO
0
540
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
PRO
5
1.8k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
PRO
0
110
Other Decks in Technology
See All in Technology
ウォーターフォールとアジャイルと楽楽明細/Waterfall×Agile×Rakurakumeisai
whitefox_73
1
340
MRTK3 - DataBinding and Theming 入門
futo23
0
140
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
0
950
Scrum Fest Osaka 2022 段階的スクラムマスターのススメ
orimomo
0
670
UWBを使ってみた
norioikedo
0
380
JUnit5.7, 5.8の新機能紹介 #jjug_ccc #jjug_ccc_b / junit 5.7, 5.8 new features
kyonmm
PRO
2
400
miisan's career talk
mii3king
0
210
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.4k
2022年度新卒技術研修「Docker」講義
excitejp
PRO
0
340
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
1人目QAエンジニアよもやま話 / QA Test Talk Vol.1
nametake
4
220
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
3
280
Featured
See All Featured
Music & Morning Musume
bryan
35
4.2k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Automating Front-end Workflow
addyosmani
1351
200k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Become a Pro
speakerdeck
PRO
3
830
The Illustrated Children's Guide to Kubernetes
chrisshort
14
36k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
Transcript
Shopify / StripeͰ ੩తαΠτͰ ΦϯϥΠϯܾࡁɾൢΛ͡ΊΑ͏ JP_GetShifter Hidetaka Okamoto 2022/2/10 ˌJP_GetShifter
Ԭຊलߴ @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͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
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ʹࡌ͍ͤͨ
Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment
Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
ൢΔͳΒShopify https://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Ͱ͖Δ͜ͱΓͩ͘͞Μ
Agenda • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment
Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔
ͦͷαΠτͰΓ͍ͨ͜ͱԿͩΖ͏ʁ • PoCٕज़ݚᮎͳΒɺΨοπϦઑΖ͏ʢHydrogen / Faust.js / Connectʣ • ૣ࢝͘Ί͍ͨͳΒɺϊʔίʔυɾϩʔίʔυͰ࡞ۀΛऴΘΒͤΑ͏ •
ʮͦͷಈతػೳɺอकίετΛࢧ͏ʹ͢Δͷ͔ʁʯ • Yes -> αʔόʔʹࢿ͠Α͏ʢϑϧϚωʔδυ IaaS + IaCʣ • No -> ݄ͷอक/ίετͱShifter StaticͳΒͲ͕͍ͬͪ҆ʁ • ʮΓ͍ͨ͜ͱʯʹूதͰ͖ΔαʔϏεʹ͓ۚΛ͔͚Α͏
Thanks • ੩తԽͨ͠WordPressͰͰ͖ͳ͘ͳͬͨ͜ͱ • Shopify Buy Button & Stripe Payment
Links • EC͕ཉ͍͠ͷ͔ɺΦϯϥΠϯͰऩӹΛಘ͍ͨͷ͔ • Twitter: @hide__dev