Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
Hidetaka Okamoto
PRO
September 03, 2021
Programming
5
1.8k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
Hidetaka Okamoto
PRO
September 03, 2021
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
Shopify / Stripeで 静的サイトでも オンライン決済・物販をはじめよう / shifter-meetu-feb-2022
hideokamoto
PRO
0
200
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
PRO
0
48
Stripeでの オンライン決済理解した - エンジニア達の「〇〇完全に理解した」Talk #25
hideokamoto
PRO
0
270
Jamstack開発者のための App Runner入門
hideokamoto
PRO
1
100
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
PRO
0
110
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
PRO
2
2.7k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
PRO
1
58
Shifter Headlessと Headless WordPressの紹介
hideokamoto
PRO
0
480
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
PRO
0
110
Other Decks in Programming
See All in Programming
Oculus Interaction SDK 概説 / xrdnk-caunity-LT4
xrdnk
0
210
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
tfcon2022_Web3Dひとめぐり.pdf
emadurandal
0
1k
アプリのログをチーム外で活用してもらうためにやったこと
shotakashihara
0
190
Better Reliability through Observability (and Experimentation)
ksatirli
PRO
1
280
Get Ready for Jakarta EE 10
ivargrimstad
0
2.6k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.9k
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
140
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
300
microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話
takehitogoto
0
420
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
290
Airflow1=>Airflow2へのupgrade 事例紹介
reizist
0
120
Featured
See All Featured
Debugging Ruby Performance
tmm1
65
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
4
2k
Infographics Made Easy
chrislema
233
17k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
The Language of Interfaces
destraynor
148
20k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Designing for Performance
lara
596
63k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Atom: Resistance is Futile
akmur
255
20k
Scaling GitHub
holman
451
140k
How GitHub (no longer) Works
holman
296
140k
Transcript
Stripe & Next.js + AWS Amplify Ͱձһ + ఆظ՝ۚػೳ JP_Stripes
Online Hidetaka Okamoto #JP_Stripes
H i d e t a k a O k
a m o t o • Digitalcube Co. Ltd. • JavaScript Developer • WordPress 4.7 / 5.0 / 5.3 Core contributor
H i d e t a k a O k
a m o t o • Digitalcube Co. Ltd. • JavaScript Developer • WordPress 4.7 / 5.0 / 5.3 Core contributor https://zenn.dev/hideokamoto/books/e961b4bad92429
Agenda • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes
Agenda • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes
ؾʹͳΔπʔϧ ৽ػೳͰ༡Ϳॴ͕ཉ͍͠
ݸਓαΠτʹ શ෦ϒνࠐΜͩ #JP_Stripes https://wp-kyoto.net Ͱ 9݄தެ։༧ఆ
• AWS Amplify: Authentication • AWS CDK: IaC • Stripe:
Subscription • Algolia: Advanced Search • Next.js: Framework • Ionic: UI library • WordPress: Headless CMS • Capacitor / Sentry / etc… #JP_Stripes ٕज़ελοΫ
༗ྉձһαΠτ։ൃͷγϣʔτΧοτίʔε • ෳࡶͳػೳͯ͢SaaS / FrameworkʹͤΔ • ΞϓϦʮAPIΛΑͼͩ͢ʯʮAPIͷ݁ՌΛදࣔ͢ΔʯʹಛԽ • ʮܾࡁʯͱʮೝূೝՄʯΛͲΕ͚ͩ࠷ڑͰ࡞ΕΔ͔͕伴 •
ೝূೝՄ: Auth0 / Cognito / Firebase / Superbase / etc… • ܾࡁ: Stripe / pay.jp / PayPal / Paidy / etc… #JP_Stripes
Stripeͷ Low codeܥػೳΛ׆༻ #JP_Stripes
#JP_Stripes SpeakerDeck
SaaS APIΛ׆༻ͯ͠ɺίʔυͷྔΛ͑Δ • ܾࡁͱܾࡁཧ΄΅ඞͣඞཁʹͳΔػೳཁ݅ • StripeͰܾࡁ͢Δ߹ɺҎԼͷ2͕Low CodeԽͰ͖Δ • จϑΥʔϜ(Χʔυ /
ߪೖऀใೖྗ) -> Checkout • ఆظ՝ۚใཧ -> Customer Portal • ʮࣗ༝ͱޮʯͲͬͪΛॏࢹ͢Δ͔ͰಓΛબ΅͏ #JP_Stripes
Agenda • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes
Next.js & AWS AmplifyʹStripeΛΈࠐΉ • React AppଆʹStripe JS SDK •
REST APIଆʹStripe Nodejs SDK • CheckoutͱCustomer Portal͚ͩͳΒReact SDKෆཁ • React SDKStripe ElementΛ͏ͨΊͷSDK • APIΩʔͷऔΓѻ͍ʹҙʢޙड़ʣ #JP_Stripes
SSM·ͨSecret Manager͔ΒAPIΩʔΛऔಘ export const createStripeClient = async () => {
const data = await new SSM({ region: “us-east-1"ɹ}) .getParameter({ Name: !!process.env.AWS_LAMBDA_FUNCTION_NAME ? "STRIPE_LIVE_SECRET_KEY": "STRIPE_TEST_SECRET_KEY", WithDecryption: true, }).promise(); const stripe = new Stripe(data.Parameter?.Value;, { apiVersion: "2020-08-27", maxNetworkRetries: 3, }); return stripe; }; #JP_Stripes
Stripe CustomerͱCognito User poolͷ࿈ܞ // Authorization HeaderͳͲͰऔಘͨ͠tokenͰCognito UserΛGet const user
= await cognito.getUser({ AccessToken: req.headers.authorization || “" }).promise() // User attributes͔ΒEmailΛऔಘ const emailAttribute = user.UserAttributes.find((data) => data.Name === "email"); const email = emailAttribute?.Value || “"; // EmailΛ͔ͭͬͯStripe CustomerΛ࡞ const customer = await stripe.customers.create({ email }); #JP_Stripes
Stripe CustomerͱCognito User poolͷ࿈ܞ // ࡞ͨ͠Stripe Customer const customer =
await stripe.customers.create({ email }); // User Attributeʹอଘ͢Δ await cognito .updateUserAttributes({ AccessToken: req.headers.authorization, UserAttributes: [{ Name: "custom:stripeCustomerId", Value: customer.id, }], }).promise(); #JP_Stripes
Customer idΛηοτͯ͠checkout.sessions.create const session = await stripe.checkout.sessions.create({ customer: customerId, allow_promotion_codes:
true, line_items: [{ price: price.id, quantity: 1, }], mode: "subscription", success_url: `${appUrl.replace(/\/$/, "")}/mypages/subscriptions`, cancel_url: `${appUrl.replace(/\/$/, "")}/mypages/plans`, payment_method_types: ["card"], }); res.status(200).json({ session_id: session.id }); #JP_Stripes
Customer PortalCustomer IDΛ͏ // Cognito͔ΒϢʔβʔΛऔಘ const user = await cognito.getUser({
AccessToken: req.headers.authorization }).promise() const attribute = user.UserAttributes.find((data) => { return data.Name === “custom:stripeCustomerId" }); // Customer Poral SessionΛ࡞ const session = await stripe.billingPortal.sessions.create({ customer: attribute?.Value, return_url: `${appUrl.replace(/\/$/, "")}/mypages/subscriptions`, }); res.status(200).json({ url: session.url }); #JP_Stripes
#JP_Stripes ໘ͳ ٻཧܥը໘͕ ͨͬͨ4ߦͰ࡞ΕΔ
APIͰϙʔλϧͷURLΛੜͯ͠ϦμΠϨΫτ const { push } = useRouter(); return (<button onClick={async
() => { const session = await Auth.currentSession(); const token = session.getAccessToken().getJwtToken(); const data = await fetch("/api/portal", { method: "POST", headers: { "Content-Type": "application/json", Authorization: token, }, }).then(data => data.json()); push(data.url); }}>Button</button>) #JP_Stripes
࣮࣌ͷϙΠϯτ 1. StripeͷCustomer IDΛϢʔβʔใͱඥ͚ͮΔඞཁ͋Γ • Customer Portal Linkͷੜαʔόʔଆॲཧ 2. Customer
Portalʹग़͢ίϯςϯπͷ੍ޚݪଇDashboard • API͔ΒͳΒઃఆෳ࡞ΕΔ༷ʢະݕূʣ 3. Stripe Secret APIΩʔͷѻ͍͕ෆ҆ͳΒ੍ݶ͖ΩʔΛ͓͏ #JP_Stripes
Agenda • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes
ར༻نϖʔδͱ ϓϥΠόγʔϙϦγʔϖʔδ ొඞਢ #JP_Stripes
#JP_Stripes AWS Amplify Next.jsΛLambda@edge Ͱ࣮ߦ͢Δ
#JP_Stripes ͍͍ͩͨ ͜Εͩͱࢥͬͯ ѻ͓͏
ΞϓϦ֎ͰStripeͷσʔλ͕มΘΔ͜ͱʹҙ • ϓϥϯมߋɾղɾϢʔβʔใͷมߋͳͲͷૢ࡞ • Customer PortalͰى͖ͨมߋΛγεςϜʹөͤ͞Δඞཁ͕͋Δ • Stripe WebhookͰΠϕϯτΛड͚ͯσʔλΛมߋ͠Α͏ •
Customer PortalʹʮCustomerআʯ͕ݱঢ়ͳ͍ 1. Subscriptions.delete WebhookͰσʔλΛফ͢ 2. CognitoͳͲͷϢʔβʔআ࣌ʹফ͢Α͏ʹγεςϜΛߏங #JP_Stripes
ඞཁͳAPIΛݺͼग़ͯ͠ ػೳΛ։ൃ͢Δ ↓ ඞཁͳWebhookΠϕϯτΛ Subscribeͯ͠։ൃ͢Δ
Agenda • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes
ઃఆ߲ʹʹ૿Ճ͍ͯ͠Δ
Customer Portalͱ ಉͷػೳΛ ࣗલͰ։ൃɾఏڙͰ͖Δ͔ʁ
ίΞϏδωεྖҬ֎ͷػೳΛ୭͕࡞Δ͔ʁ A. ࣗྗ։ൃ͢Δ͜ͱͰɺσβΠϯ༷ͷࣗ༝Λ֬อͰ͖Δ • ػೳ͕૿͑Δͱอकɾӡ༻ͷൣғ૿͑Δ • ͦͷࣗ༝Λ׆༻Ͱ͖Δ͚ͩͷ։ൃϦιʔε͕͋Δ͔൱͔ B. SaaS /
Low Codeʹҕৡͯ͠ɺॏཁͳػೳʹूத͢Δ • ϕϯμʔ͕࠷దͱ͢ΔUIػೳΛৗʹड͚औΕΔ • υϝΠϯσβΠϯɾػೳͷ੍Λڐ༰Ͱ͖Δ͔൱͔ #JP_Stripes
ΠϕϯτۦಈͳγεςϜ͔ͩΒͰ͖Δ͜ͱ #JP_Stripes • Checkout / Customer PortalWebhookͰγεςϜͱ࿈ܞ͢ΔΈ • ϓϥϯมߋͳͲͷΠϕϯτΛड͚ͯಈ࡞͢ΔγεςϜʹͳΔ •
ʮಉ͡ΠϕϯτΛൃՐͰ͖Εʯ͍ͭͰஔ͖͑Ͱ͖Δ • ্ཱͪ͛࣌྆ػೳΛͬͯίΞ։ൃʹϦιʔεΛूத͢Δ • Ҡߦ͢Δ࣌ɺΠϕϯτ୯ҐͰஈ֊తʹΓସ͍͑ͯ͘ • ʮΠϕϯτۦಈΞʔΩςΫνϟʯͷୈҰาʹ
More info
ϝʔϧͰߋ৽ใΛ ͬ͟ͱݟͰ͖Δ Developer Digest #JP_Stripes https://stripe.dev/
https://www.youtube.com/stripedevelopers
Thanks! • ࠷খݶͷ։ൃͰ༗ྉձһϝσΟΞΛ࡞Δ • Next.js / Stripe / AWS AmplifyͰ࣮͢Δ
• ઃܭɾ։ൃ࣌ͷҙ • ʮਖ਼͘͠SaaSʹґଘ͢Δʯ #JP_Stripes