Subscriptions
How to manage subscriptions with Stripe.
var Component=(()=>{var =Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var I=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var i in e)o(r,i,{get:e[i],enumerable:!0})},c=(r,e,i,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!E.call(r,a)&&a!==i&&o(r,a,{get:()=>e[a],enumerable:!(t=u(e,a))||t.enumerable});return r};var S=(r,e,i)=>(i=r!=null?(y(r)):{},c(e||!r||!r.__esModule?o(i,"default",{value:r,enumerable:!0}):i,r)),f=r=>c(o({},"__esModule",{value:!0}),r);var d=I((N,l)=>{l.exports=_jsx_runtime});var m={};b(m,{default:()=>p,frontmatter:()=>P});var n=S(d()),P={title:"Subscriptions",description:"How to manage subscriptions with Stripe."};function s(r){let e={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",span:"span",strong:"strong",...r.components},{Callout:i,Steps:t}=e;return i||h("Callout",!0),t||h("Steps",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i,{type:"warning",twClass:"mt-0",children:(0,n.jsxs)(e.p,{children:[To complete this guide, you'll need to create an account on ,(0,n.jsx)(e.a,{href:"https://stripe.com/",children:"Stripe"}),"."]})}), ,(0,n.jsxs)(e.h2,{id:"configuration",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#configuration",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Configuration"]}), ,(0,n.jsxs)(t,{children:[(0,n.jsxs)(e.h3,{id:"create-a-project",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#create-a-project",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Create a Project"]}),(0,n.jsx)(e.p,{children:"After logging in, create a project on Stripe."}),(0,n.jsxs)(e.h3,{id:"obtain-stripe-api-key",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#obtain-stripe-api-key",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Obtain Stripe API Key"]}),(0,n.jsx)(e.p,{children:'In "Developer" mode, go to "API Keys" and copy the secret key.'}),(0,n.jsxs)(e.p,{children:["Paste it into your ",(0,n.jsx)(e.code,{children:".env"})," file."]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",rawString:STRIPE_API_KEY = sk_your_secret_key ,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"STRIPE_API_KEY"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" sk_your_secret_key"})]})})})}),(0,n.jsxs)(e.h3,{id:"set-up-stripe-webhook",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#set-up-stripe-webhook",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Set up Stripe Webhook"]}),(0,n.jsx)(e.p,{children:"Create a webhook to manage Stripe events within your app."}),(0,n.jsxs)(e.ol,{children:[ ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Create Webhook Endpoint:"}),' Go to your Stripe dashboard and navigate to "Developers" > "Webhooks". Click on "Add endpoint" to create a new webhook.']}), ]}), ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Configure Webhook:"})," Enter the endpoint URL where Stripe will send events. This URL should point to a route in your application that can handle Stripe webhook events."]}), ]}), ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Select Events:"}),Choose the events you want to receive notifications for. Common events include,(0,n.jsx)(e.code,{children:"checkout.session.completed"}),", ",(0,n.jsx)(e.code,{children:"customer.subscription.updated"}),", ",(0,n.jsx)(e.code,{children:"invoice.payment_succeeded"}),", etc."]}), ]}), ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Obtain Webhook Signing Secret:"})," After setting up the webhook, Stripe will generate a signing secret. Copy this secret and paste it into your ",(0,n.jsx)(e.code,{children:".env"})," file as ",(0,n.jsx)(e.code,{children:"STRIPE_WEBHOOK_SECRET"}),"."]}), ]}), ]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",rawString:STRIPE_WEBHOOK_SECRET = whsec_your_secret_webhook ,children:(0,n.jsx)(e.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"STRIPE_WEBHOOK_SECRET"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" whsec_your_secret_webhook"})]})})})}),(0,n.jsxs)(e.h3,{id:"create-price-cards",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#create-price-cards",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Create Price Cards"]}),(0,n.jsx)(e.p,{children:"Create price cards to obtain price IDs for both monthly and yearly plans."}),(0,n.jsxs)(e.ol,{children:[ ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Navigate to Products:"}),' In your Stripe dashboard, go to "Products" > "Create Product". Enter the details for your subscription product, such as name, description, and pricing.']}), ]}), ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Create Pricing Plans:"}),' Once the product is created, go to the "Pricing" section and click on "Add pricing plan". Set up the details for your pricing plan, including the amount, currency, billing interval (monthly or yearly), and any other relevant information.']}), ]}), ,(0,n.jsxs)(e.li,{children:[ ,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Obtain Price IDs:"})," After creating the pricing plans, Stripe will generate unique price IDs for each plan. These IDs are used to identify the specific pricing plan when creating subscriptions. Copy the price IDs for both the monthly and yearly plans and paste them into your ",(0,n.jsx)(e.code,{children:".env"})," file as follows:"]}), ]}), ]}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{tabIndex:"0","data-language":"js","data-theme":"github-dark",rawString:`NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID = price_FaKeId
NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID = price_FaKeId
NEXT_PUBLIC_STRIPE_BUSINESS_MONTHLY_PLAN_ID = price_FaKeId
NEXT_PUBLIC_STRIPE_BUSINESS_YEARLY_PLAN_ID = price_FaKeId
,children:(0,n.jsxs)(e.code,{"data-language":"js","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PLAN_ID"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" price_FaKeId"})]}),
,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"NEXT_PUBLIC_STRIPE_PRO_YEARLY_PLAN_ID"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" price_FaKeId"})]}),
,(0,n.jsx)(e.span,{"data-line":"",children:" "}),
,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"NEXT_PUBLIC_STRIPE_BUSINESS_MONTHLY_PLAN_ID"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" price_FaKeId"})]}),
,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"NEXT_PUBLIC_STRIPE_BUSINESS_YEARLY_PLAN_ID"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" price_FaKeId"})]})]})})}),(0,n.jsxs)(e.p,{children:["Ensure that you replace ",(0,n.jsx)(e.code,{children:"price_FaKeId"})," with the actual price IDs generated by Stripe for your pricing plans."]}),(0,n.jsx)(i,{type:"warning",children:(0,n.jsxs)(e.p,{children:["Don't forget to change the prices in ",(0,n.jsx)(e.code,{children:"config/subscriptions.ts"}),"."]})})]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(s,{...r})}):s(r)}function h(r,e){throw new Error("Expected "+(e?"component":"object")+" "+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(m);})();
;return Component;