Success!!
+
+```
+
+```html
+// pages/cancelled.vue
+
+ Cancelled!!
+
+```
+
+### Stripe Checkout Page
+
+Now, when you're logged in and click a Buy plan button, you should see the Stripe Checkout page open:
+
+
+
+You can fill in the form using Stripe's [test card numbers](https://docs.stripe.com/testing). I typically use their Visa example because it's easy to remember: `4242424242424242`.
+
+When you properly fill in the form and click subscribe you should expect to see a few things:
+1. You should be redirected to your `/success` page.
+2. You should see a new row in your Stripe Transactions located here: https://dashboard.stripe.com/nuxt-stripe/payments
+3. You should **NOT** see `is_subscribed` set to true in your database.
+
+There is still some work to do before the subscription status is reflected in our application, but we are getting close. We now have the transaction taking place and are accepting money through Stripe. We are just missing the step where Stripe tells our server that a successful payment took place. We'll implement this in the next section.
+
+## 07 - Stripe Webhook
+
+We'll receive Stripe events by creating a webhook endpoint that Stripe can communicate through. ([docs](https://docs.stripe.com/webhooks)).
+
+We'll need to populate the `STRIPE_WEBHOOK_SECRET_KEY` environment variable from earlier.
+
+### Ngrok
+
+To do this, we'll need to expose our site to the web so that Stripe can access it.
+
+My go-to for rapidly exposing my endpoints to the web is [ngrok](https://ngrok.com). Download it [here](https://ngrok.com/download) and follow the documentation, get your auth token, and set up ngrok's CLI.
+
+You should be able to run the following command in your terminal:
+
+```bash
+ngrok http 3000
+```
+
+**Note:** Make sure your Nuxt application is running on port 3000 (the default port) before you run the ngrok command
+
+Your terminal should now look like this:
+
+
+
+The `Forwarding` URL is important. I'm highlighting it here so that you see it. We will carry this over into the next section.
+
+### STRIPE_WEBHOOK_SECRET_KEY
+
+With our server online, navigate to https://dashboard.stripe.com/nuxt-stripe/webhooks and click `+ Add endpoint` and add the following:
+
+`Endpoint URL`: Paste the ngrok `Forwarding` url from earlier. Then, add `/api/stripe/webhook` to the end. This endpoint hasn't been created yet, but we will take care of that soon.
+
+`Description` is optional.
+
+`Listen to`: Events on your account
+
+`Select events to listen to`: Click `+ Select events` and search for *subscription*. Toggle on `customer.subscription.created` and `customer.subscription.deleted` and click `Add events`.
+
+Your form should similar to this:
+
+
+
+
+Now submit the form with `Add endpoint`.
+
+This should redirect you to a details page on Stripe for your newly submitted Webhook. Look for `Signing secret` and click `Reveal`. The value that is shown is your `STRIPE_WEBHOOK_SECRET_KEY`. Copy and paste it into your `.env` file.
+
+### Webhook Endpoint
+
+This one may seem a bit meaty, but a good portion of it is simple error handling. I'll try my best to explain the code snippet to you:
+
+```ts
+// server/api/stripe/webhook.ts
+import { PrismaClient } from '@prisma/client'
+import { stripe } from '~/server/utils/stripe'
+
+const prisma = new PrismaClient()
+const runtimeConfig = useRuntimeConfig()
+
+export default eventHandler(async event => {
+ // 1
+ const body = await readRawBody(event, false)
+ let stripeEvent: any = body
+ let subscription
+ let status
+ // 2
+ const signature = getHeader(event, 'stripe-signature')
+
+ if (!body) {
+ return { error: 'Invalid request body' }
+ }
+
+ if (!signature) {
+ return { error: 'Invalid stripe-signature' }
+ }
+
+ try {
+ // 3
+ stripeEvent = stripe.webhooks.constructEvent(
+ body,
+ signature,
+ runtimeConfig.STRIPE_WEBHOOK_SECRET_KEY
+ )
+ } catch (err) {
+ const error = createError({
+ statusCode: 400,
+ statusMessage: `Webhook error: ${err}`,
+ })
+ return sendError(event, error)
+ }
+ // 4
+ switch (stripeEvent.type) {
+ // 5
+ case 'customer.subscription.deleted':
+ subscription = stripeEvent.data.object
+ status = subscription.status
+
+ await prisma.account.update({
+ where: {
+ stripe_customer_id: subscription.customer,
+ },
+ data: {
+ is_subscribed: false,
+ },
+ })
+
+ break
+ // 6
+ case 'customer.subscription.created':
+ subscription = stripeEvent.data.object
+ status = subscription.status
+
+ await prisma.account.update({
+ where: {
+ stripe_customer_id: subscription.customer,
+ },
+ data: {
+ is_subscribed: true,
+ },
+ })
+
+ break
+ default:
+ console.log(`Unhandled event type ${stripeEvent.type}.`)
+ }
+ return { received: true }
+})
+```
+
+> At this point, I assume you are familiar with useRuntimeConfig, Prisma, and Stripe constants.
+
+1. [readRawBody](https://h3.unjs.io/utils/request#readrawbodyevent-encoding) - Stripe requires the raw body when running `stripe.webhooks.constructEvent()`, so we use `readRawBody` here. The second parameter, `false`, returns it as a `Buffer`.
+2. `stripe-signature` - Stripe will send us this header which is passed to the `constructEvent` function.
+3. We pass the `body`, `signature`, and `STRIPE_WEBHOOK_SECRET_KEY` to construct the Webhook that Stripe sent to us.
+4. Now we create a switch statement against the stripe event. I'm only interested in the `customer.subscription.deleted` and `customer.subscription.created` events, but you can extend this to receive any of the events listed during the `STRIPE_WEBHOOK_SECRET_KEY` setup.
+5. On the `customer.subscription.deleted` event, we find the `Account` that contains the `stripe_customer_id` that matches the subscription's customer id. Then we update the `is_subscribed` value to false.
+6. On the `customer.subscription.created` event, we do the same, just this time we update `is_subscribed` value to true.
+
+With this in place, you should be able to go through the Stripe Checkout form and this time, when you successfully submit it, your webhook's detail page should show the `customer.subscription.created` event log:
+
+
+
+> It should be successful, but if it's not, read the logs. 99% of the time, it's an API key issue.
+
+With a successful creation webhook event, you should now see `is_subscribed` is `true` within your Database's Account table.
+
+
+
+With this in place, we have successfully implemented a basic subscription system. In the next few sections we will expand on this further to allow our users to manage their subscriptions in a Stripe Portal, chose between multiple subscription tiers, chose between yearly and monthly with dynamic pricing, and manage site permissions based on the subscription chosen.
+
+## 08 - Stripe Customer Portal
+
+The next step in our Stripe integration is subscription management. We're accepting users money and updating their subscription status in our database to reflect whether they've paid or not.
+
+Now we need to give users the ability to manage their subscription. This includes cancelling it, changing their payment method, and seeing their payment history.
+
+Luckily for us, the majority of this is taken care of within Stripe. Similar to the Checkout experience, we need to create the dashboard session url and redirect our users to it.
+
+### Generate BillingPortal URL
+
+```ts
+// server/api/stripe/create-portal-session.ts
+import { stripe } from '~/server/utils/stripe'
+import { getServerSession } from '#auth'
+import { PrismaClient } from '@prisma/client'
+
+const prisma = new PrismaClient()
+const baseUrl = 'http://localhost:3000'
+
+export default eventHandler(async event => {
+ const session = await getServerSession(event)
+
+ if (!session?.user?.email) {
+ return { error: 'User not authenticated' }
+ }
+
+ const account = await prisma.account.findFirst({
+ where: {
+ user: {
+ email: session.user.email,
+ },
+ },
+ })
+
+ if (!account?.stripe_customer_id) {
+ return { error: 'Stripe customer not found' }
+ }
+ // 1
+ const portalSession = await stripe.billingPortal.sessions.create({
+ customer: account.stripe_customer_id,
+ return_url: baseUrl,
+ })
+
+ return { url: portalSession.url }
+})
+```
+
+I'm assuming most of this is getting repetitive and you understand it. But a quick refresher, we get the auth session to ensure the user is logged in and then get their Account so we have access to `stripe_customer_id`.
+
+1. With `stripe_customer_id`, we call `stripe.billingPortal.sessions.create()` which generates a URL that we can navigate to on the frontend.
+
+### useStripe Composable
+
+Consuming this endpoint and navigating to the billing portal is straight forward and very similar to the checkout experience:
+
+```ts
+const navigateToStripeDashboard = async () => {
+ const res = await $fetch('/api/stripe/create-portal-session', {
+ method: 'POST',
+ })
+
+ if (res && 'url' in res) {
+ await navigateTo(res.url, {
+ external: true,
+ })
+ } else {
+ console.error('Error creating portal session:', res.error)
+ }
+}
+```
+
+But at this stage, our `PricingSection` component is becoming a bit cluttered, so I decided to move the Stripe-specific functions into a [composable](https://vuejs.org/guide/reusability/composables) called `useStripe`.
+
+Create a new directory called `composables` and within it a file called `useStripe`.
+
+Extract the checkout function and the tiers from `PricingSection` and place them along with our new `navigateToStripeDashboard` function into our new file.
+
+```ts
+// composables/useStripe
+export function useStripe() {
+ const checkout = async () => {
+ const PRICE_LOOKUP_KEY = 'tier-freelancer'
+
+ const res = await $fetch('/api/stripe/create-checkout-session', {
+ method: 'POST',
+ body: {
+ lookup_key: PRICE_LOOKUP_KEY,
+ },
+ })
+
+ if (res) {
+ await navigateTo(res.url, {
+ external: true,
+ })
+ }
+ }
+
+ const navigateToStripeDashboard = async () => {
+ const res = await $fetch('/api/stripe/create-portal-session', {
+ method: 'POST',
+ })
+
+ if (res && 'url' in res) {
+ await navigateTo(res.url, {
+ external: true,
+ })
+ } else {
+ console.error('Error creating portal session:', res.error)
+ }
+ }
+
+ const tiers = [
+ {
+ name: 'Freelancer',
+ id: 'tier-freelancer',
+ href: '#',
+ priceMonthly: '$24',
+ description: 'The essentials to provide your best work for clients.',
+ features: [
+ '5 products',
+ 'Up to 1,000 subscribers',
+ 'Basic analytics',
+ '48-hour support response time',
+ ],
+ mostPopular: false,
+ },
+ {
+ name: 'Startup',
+ id: 'tier-startup',
+ href: '#',
+ priceMonthly: '$32',
+ description: 'A plan that scales with your rapidly growing business.',
+ features: [
+ '25 products',
+ 'Up to 10,000 subscribers',
+ 'Advanced analytics',
+ '24-hour support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: true,
+ },
+ {
+ name: 'Enterprise',
+ id: 'tier-enterprise',
+ href: '#',
+ priceMonthly: '$48',
+ description: 'Dedicated support and infrastructure for your company.',
+ features: [
+ 'Unlimited products',
+ 'Unlimited subscribers',
+ 'Advanced analytics',
+ '1-hour, dedicated support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: false,
+ },
+ ]
+
+ return { checkout, navigateToStripeDashboard, tiers }
+}
+```
+
+Now, we can easily re-use these functions throughout our application. You may notice that we've been using a composable this entire time with `useAuth`.
+
+We'll start using it in our `AuthMenu` component. Extract the `navigateToeStripeDashboard` function from the `useStripe` composable:
+
+```ts
+const { navigateToStripeDashboard } = useStripe()
+```
+
+Then update the `solutions` array, replacing the Manage Billing object's function with our newly defined `navigateToStripeDashboard`.
+
+```html
+// components/AuthMenu.vue
+
+
+ ...
+
+```
+
+Now, when you click the `Manage Billing` button within your `AuthMenu` dropdown, it should navigate you to a `billing.stripe.com` url.
+
+
+
+Here you can update or cancel your plan!
+
+### isSubscribed Check
+
+Let's go one step further in this section. I want to check against the `isSubscribed` value we have attached to our user's Account to dynamically render content based on this value.
+
+To do this, we're going to tap into Authjs' [session callback](https://next-auth.js.org/configuration/callbacks#session-callback). The session callback is ran whenever a session is checked.
+
+Navigate to our `api/auth/[...]ts` file and add a `callback` within our `NuxtAuthHandler`:
+
+```ts
+// api/auth/[...].ts
+export default NuxtAuthHandler({
+ ...,
+ callbacks: {
+ // Adding subscription status to default useAuth data object.
+ async session({ session }) {
+ if (session.user?.email) {
+ const accounts = await getAccountsByEmail(session.user.email)
+
+ return {
+ ...session,
+ user: {
+ ...session.user,
+ isSubscribed: accounts[0].is_subscribed,
+ },
+ }
+ }
+
+ return {
+ ...session,
+ user: {
+ ...session.user,
+ isSubscribed: undefined,
+ },
+ }
+ },
+ },
+})
+
+```
+
+```ts
+if (session.user?.email) {
+ const accounts = await getAccountsByEmail(session.user.email)
+
+ return {
+ ...session,
+ user: {
+ ...session.user,
+ isSubscribed: accounts[0].is_subscribed,
+ },
+ }
+}
+```
+
+This is checking if the user is logged in and if it does, it queries for the user's Account. Once we have the Account, we return the `...session`, which is the default returned object, but we go into it's nested `user` object and extend it with `isSubscribed: accounts[0].is_subscribed`.
+
+Here I am using a utility query called `getAccountsByEmail`. Create a file at `server/utils/queries/getAccountsByEmail.ts` and in it, the code:
+
+```ts
+// server/utils/queries/getAccountsByEmail.ts`
+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+
+export const getAccountsByEmail = async (email: string) => {
+ return await prisma.account.findMany({
+ where: {
+ user: {
+ email: email,
+ },
+ },
+ })
+}
+```
+
+It's a basic Prisma query. But I can see myself using this one often so I decided to extract it into its own function.
+
+Now, when we run extract `data` from `useAuth` and navigate through the `data` object to get the `isSubscribed` value::
+
+```ts
+const { data } = useAuth()
+data.value?.user?.isSubscribed
+```
+
+I use this in our `PricingSection` component to adjust the pricing card's text and functionality.
+
+```html
+// components/PricingSection.vue
+
+
+
+...
+
+...
+
+```
+
+I cut away the majority of the html and css here, just to showcase the button's dynamic `handleBuyNow` function and computed `buttonText`.
+
+Now, if the user is subscribed, the button will say "Manage Subscription" and clicking it will navigate the user to the Billing Portal.
+
+If the user is logged in but not subscribed, it will say "Buy Now" and navigate the user to the Checkout Portal.
+
+If the user is not logged in, it will say "Sign in to Buy" and clicking it will log the user in.
+
+### Typescript adjustment
+
+If you're using Typescript, you may see a few red lines yelling at you. This is because we are extending the Auth's User object within the Session Callback, but we are not informing our client side Typescript that this is happening.
+
+To clean this up and make Typescript happy, create a file at `types/next-auth.d.ts` and add the following code:
+
+```ts
+// types/next-auth.d.ts
+mport NextAuth, { DefaultSession } from 'next-auth'
+
+declare module 'next-auth' {
+ /**
+ * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider`
+ */
+ interface Session {
+ user: {
+ /** The user's Stripe subscription status. */
+ isSubscribed: boolean
+ } & DefaultSession['user']
+ }
+}
+```
+
+This overrides the `Session` interface defined by next-auth and extends it with the `user.isSubscribed` field.
+
+## 09 - Multiple Plans
+
+Awhile back I mentioned we would get rid of the hard coded `PRICE_LOOKUP_KEY`. The reason we don't like it is because it's limiting our checkout to a single subscription plan. Our goal is to support multiple prices and plans, so let's make the necessary adjustments.
+
+### Multiple Products
+
+Before digging into the code we need to add additional products in our Stripe dashboard.
+
+Navigate to Stripe's [Product catalog](https://dashboard.stripe.com/nuxt-stripe/products?active=true) and add two additional products. Ensure your product's information matches whatever you have within `composables/useStripe`'s tiers object.
+
+Here is my `tiers` for reference:
+
+```ts
+// composables/useStripe
+const tiers = [
+ {
+ name: 'Freelancer',
+ id: 'tier-freelancer',
+ href: '#',
+ priceMonthly: '$24',
+ description: 'The essentials to provide your best work for clients.',
+ features: [
+ '5 products',
+ 'Up to 1,000 subscribers',
+ 'Basic analytics',
+ '48-hour support response time',
+ ],
+ mostPopular: false,
+ },
+ {
+ name: 'Startup',
+ id: 'tier-startup',
+ href: '#',
+ priceMonthly: '$32',
+ description: 'A plan that scales with your rapidly growing business.',
+ features: [
+ '25 products',
+ 'Up to 10,000 subscribers',
+ 'Advanced analytics',
+ '24-hour support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: true,
+ },
+ {
+ name: 'Enterprise',
+ id: 'tier-enterprise',
+ href: '#',
+ priceMonthly: '$48',
+ description: 'Dedicated support and infrastructure for your company.',
+ features: [
+ 'Unlimited products',
+ 'Unlimited subscribers',
+ 'Advanced analytics',
+ '1-hour, dedicated support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: false,
+ },
+ ]
+```
+
+Ensure the new products you create have a `lookup_key` that matches the `tier` object's `id` field.
+In my case, I have `tier-freelancer`, `tier-startup`, and `tier-enterprise`.
+
+Also ensure the rest of the data matches what you create in Stripe's dashboard i.e. Price, name, etc.
+
+### Code Adjustments
+
+In our `useStripe` composable, adjust `checkout` to take a lookup_key parameter:
+
+```ts
+// composables/useStripe
+export function useStripe() {
+ const checkout = async (lookupKey: string) => {
+ const res = await $fetch('/api/stripe/create-checkout-session', {
+ method: 'POST',
+ body: {
+ lookup_key: lookupKey,
+ },
+ })
+
+ if (res) {
+ await navigateTo(res.url, {
+ external: true,
+ })
+ }
+ }
+ ...
+}
+```
+
+Now let's adjust where we are calling `checkout` in our `PricingSection` component:
+
+```ts
+// components/PricingSection
+const handleBuyNow = async (lookupKey: string) => {
+ if (data.value?.user?.isSubscribed) {
+ await navigateToStripeDashboard()
+ } else if (status.value === 'authenticated') {
+ await checkout(lookupKey)
+ } else {
+ signIn('github')
+ }
+}
+```
+
+We adjust our `handleBuyNow` function to accept a `lookupUp` parameter that we then pass into our `checkout` function.
+
+Then in our template, we can adjust the button that calls the `handleBuyNow` function to take in a parameter:
+
+```html
+// components/PricingSection
+
+...
+
+...
+
+```
+
+We are iterating over each tier earlier in the template code, so we have access to the tier's id which we can then setup in Stripe's dashboard as our Product's lookup keys.
+
+With this in place, you should be able to go through the Checkout flow and see that the plan changes based on which tier's Card you click on. It should match the price, name, and other values you set in Stripe's Product Catalog when creating the new Product(s).
+
+### Plans
+
+There's nothing in our Database that saves this information so we are unable to render things based on which plan the user paid for.
+
+#### Account Table
+
+The solution I take for this problem is to extend my database schema to hold onto this information using a `plan` column in my Account schema:
+
+```ts
+// prisma/schema.prisma
+model Account {
+ id String @id @default(cuid())
+ userId String
+ type String
+ provider String
+ providerAccountId String
+ refresh_token String?
+ access_token String?
+ expires_at Int?
+ token_type String?
+ scope String?
+ id_token String?
+ session_state String?
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+ stripe_customer_id String? @unique
+ is_subscribed Boolean @default(false)
+
+ plan String @default("tier-free")
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+ @@unique([provider, providerAccountId])
+}```
+
+> I set the default value to `tier-free`.
+
+The reason I keep `is_subscribed` as well as `plan` as two separate database columns is because you may want to have logic that recommends users to re-subscribe to their old plan using deals or other methods.
+
+With this updated schema, run our Prisma commands again:
+
+```bash
+npx prisma generate
+npx prisma migrate dev
+```
+
+#### Auth Endpoint
+
+Now update our Auth endpoint's session `callback` to expand on the returned user object, providing the user Account's `plan`.
+
+```ts
+// server/api/auth/[...].ts
+callbacks: {
+ // Adding subscription status to default useAuth data object.
+ async session({ session }) {
+ if (session.user?.email) {
+ const accounts = await getAccountsByEmail(session.user.email)
+
+ return {
+ ...session,
+ user: {
+ ...session.user,
+ isSubscribed: accounts[0].is_subscribed,
+ plan: accounts[0].plan,
+ },
+ }
+ }
+ return {
+ ...session,
+ user: {
+ ...session.user,
+ isSubscribed: false,
+ plan: 'tier-free',
+ },
+ }
+```
+
+#### Webhook Updates
+
+We also have to update our Webhook so that Stripe passes us back the plan information when the subscription is successfully created.
+
+```ts
+// server/api/stripe/webhook.ts
+case 'customer.subscription.created':
+ subscription = stripeEvent.data.object
+ plan = stripeEvent.data.object.items.data[0].price.lookup_key
+
+ await prisma.account.update({
+ where: {
+ stripe_customer_id: subscription.customer,
+ },
+ data: {
+ is_subscribed: true,
+ plan,
+ },
+ })
+```
+
+Now that there are multiple plans, the user will have the ability to modify their plan in the Billing Portal. They can now go from Plan A → Plan B and visa-versa.
+
+In my case, they may start out as a Freelancer, and decide they want additional pro features and sign up for an Enterprise user.
+
+Stripe will send a webhook event called `customer.subscription.updated` when this occurs. So, let's listen for it and update our user's Account accordingly:
+
+```ts
+// server/api/stripe/webhook.ts
+case 'customer.subscription.updated':
+ subscription = stripeEvent.data.object
+ plan = stripeEvent.data.object.items.data[0].price.lookup_key
+
+ await prisma.account.update({
+ where: {
+ stripe_customer_id: subscription.customer,
+ },
+ data: {
+ plan,
+ },
+ })
+```
+
+Be sure to update your Webhook in Stripe's webhook settings so that Stripe sends this additional event.
+
+
+
+#### Typescript Session Interface
+
+Let's quickly extend the Session interface so that Typescript doesn't yell at us when we decide to access this `plan` variable on the client.
+
+```ts
+// types/next-auth.d.ts
+import NextAuth, { DefaultSession } from 'next-auth'
+
+declare module 'next-auth' {
+ /**
+ * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider`
+ */
+ interface Session {
+ user: {
+ /** The user's Stripe subscription status. */
+ isSubscribed: boolean
+ plan: string
+ } & DefaultSession['user']
+ }
+}
+```
+
+## 10 - Yearly Plans
+
+> "Buy 10 months, get two free!"
+
+Site's love to provide a discount with annual billing. So, let me show you how to incorporate it into your application.
+
+I'm sure many of you have seen this toggle:
+
+
+
+Good news is, it's easy! The majority of the work is frontend-related, with a minor bit of Stripe work within their dashboard.
+
+### Additional Product Pricing
+
+Visit each Product's details page on Stripe's Product Catalog page. Right now, we should only have one Price in the Pricing table. Click the `+` button and add a new price. This time, make sure the `Billing period` is yearly, the price reflects this new period, and add a `Lookup key` that's unique to the yearly price.
+
+
+
+### UI
+
+We need to create a Toggle component. I'll call this component `ToggleWithText`.
+
+```html
+// components/ToggleWithText.vue
+
+
+
+
+
+
+```
+
+Now, we need to update our tiers to include the yearly amounts.
+
+Here's an example of one of the yearly tiers:
+
+```ts
+{
+ name: 'Freelancer',
+ id: 'tier-freelancer-yearly',
+ href: '#',
+ price: '$240',
+ description: 'The essentials to provide your best work for clients.',
+ features: [
+ '5 products',
+ 'Up to 1,000 subscribers',
+ 'Basic analytics',
+ '48-hour support response time',
+ ],
+ mostPopular: false,
+ type: 'yearly',
+},
+```
+
+The only difference between this tier and the monthly version is the `id` and `type` field. But, this is up to you. You can adjust this object however you like. The key is `type: 'yearly'` - this is how we will filter the tier.
+
+Here's my entire `tiers` value when updated with the yearly objects:
+
+```ts
+const tiers = [
+ {
+ name: 'Freelancer',
+ id: 'tier-freelancer',
+ href: '#',
+ price: '$24',
+ description: 'The essentials to provide your best work for clients.',
+ features: [
+ '5 products',
+ 'Up to 1,000 subscribers',
+ 'Basic analytics',
+ '48-hour support response time',
+ ],
+ mostPopular: false,
+ type: 'monthly',
+ },
+ {
+ name: 'Startup',
+ id: 'tier-startup',
+ href: '#',
+ price: '$32',
+ description: 'A plan that scales with your rapidly growing business.',
+ features: [
+ '25 products',
+ 'Up to 10,000 subscribers',
+ 'Advanced analytics',
+ '24-hour support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: true,
+ type: 'monthly',
+ },
+ {
+ name: 'Enterprise',
+ id: 'tier-enterprise',
+ href: '#',
+ price: '$48',
+ description: 'Dedicated support and infrastructure for your company.',
+ features: [
+ 'Unlimited products',
+ 'Unlimited subscribers',
+ 'Advanced analytics',
+ '1-hour, dedicated support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: false,
+ type: 'monthly',
+ },
+
+ {
+ name: 'Freelancer',
+ id: 'tier-freelancer-yearly',
+ href: '#',
+ price: '$240',
+ description: 'The essentials to provide your best work for clients.',
+ features: [
+ '5 products',
+ 'Up to 1,000 subscribers',
+ 'Basic analytics',
+ '48-hour support response time',
+ ],
+ mostPopular: false,
+ type: 'yearly',
+ },
+ {
+ name: 'Startup',
+ id: 'tier-startup-yearly',
+ href: '#',
+ price: '$320',
+ description: 'A plan that scales with your rapidly growing business.',
+ features: [
+ '25 products',
+ 'Up to 10,000 subscribers',
+ 'Advanced analytics',
+ '24-hour support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: true,
+ type: 'yearly',
+ },
+ {
+ name: 'Enterprise',
+ id: 'tier-enterprise-yearly',
+ href: '#',
+ price: '$480',
+ description: 'Dedicated support and infrastructure for your company.',
+ features: [
+ 'Unlimited products',
+ 'Unlimited subscribers',
+ 'Advanced analytics',
+ '1-hour, dedicated support response time',
+ 'Marketing automations',
+ ],
+ mostPopular: false,
+ type: 'yearly',
+ },
+]
+```
+
+With these changes in place, you should now see the `plan` value reflected in your database.
+
+## 11 - Permissions
+
+I want to show you how we can easily adjust permissions on our site with our `plan` value.
+
+Our user's `plan` value is being passed to the client in the `data` variable extracted from `useAuth`:
+
+```ts
+const { data } = useAuth()
+// data.user.plan
+```
+
+Let's play with it in our `AuthMenu` component:
+
+```html
+// components/AuthMenu.vue
+
+
+ ...
+
+
+
+
+ + Pricing +
++ Pricing plans for teams of all sizes +
++ Distinctio et nulla eum soluta et neque labore quibusdam. Saepe et quasi + iusto modi velit ut non voluptas in. Explicabo id ut laborum. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + {{ tier.name }} +
++ Most popular +
++ {{ tier.description }} +
++ + {{ tier.price }} + + + {{ yearlyEnabled ? '/year' : '/month' }} + +
+-
+
- + + {{ feature }} + +