Tutorials > Payments 💰
Payments
The steps are the same for both one-time and recurring payments! 💸Let's start creating a Stripe or LemonSqueezy Checkout to set up subscriptions, just let our webhook do its thing to manage the details and give users access! 💳
You need to have Stripe or LemonSqueezy and a database set up to be able to follow the steps below.
Stripe Setup
1. In your Stripe account dashboard, click on [More +] > [Product Catalog] > [+ Add Product]. Pick a catchy name and decide on a monthly price (or adjust it to suit your business model). Finally, hit [Save Product] to ship the deal! 💻
2. In the [Pricing] section, Find the product price ID (it starts with price_) and put it into the first plan. in the stripe.plans array in the config.ts file.
3. In config.ts, change paymentProvider to stripe
4. In /pages/dashboard/index.vue file, paste the code below: (we need the user to get authenticated so that is why we are using dashboard as an example)
1<template>
2 <ButtonAccount />
3
4 <h1 className="text-3xl font-extrabold md:text-4xl">
5 Get <YOUR_PRODUCT>
6 </h1>
7
8 <ButtonCheckout :priceId="config.stripe.plans[1].priceId"
9 placement="landing_page" variant="secondary"
10 text="Get <YOUR_PRODUCT>" :withIcon="false" />
11 </section>
12</template>
13
14<script lang="tsx" setup>
15import config from "@/config";
16import ButtonAccount from "@/components/landing-components/ButtonAccount/ButtonAccount.vue";
17import ButtonCheckout from "@/components/landing-components/ButtonCheckout.vue";
18
19</script>5. Visit http://localhost:3000/dashboard in your web browser, log in, and then click the button to continue with a payment using the credit card number. 4242 4242 4242 4242.
6. Our webhook, placed at /server/api/webhook/stripe.post.ts, listens for Stripe events and handles the logic to grant or deny user access based on those events.
Stripe Local Endpoint
For working in development mode, it's necessary to have Stripe local endpoint running on your computer.7. Feel free to have your custom logic within /api/webhook/stripe.post.ts, like sending emails for abandoned carts or deducting credits when necessary.
8. Users can handle their accounts using <ButtonAccount /> (cancelling subscriptions, updating their credit card details etc.) component. So you don't need to worry about building custom user account page! 🚀
Lemon Squeezy Setup
1. In your Lemon Squeezy dashboard, click on [Store] > [Products] > [+ New Product]. Pick a catchy name and decide on a monthly price (or change it to suit your business). Finally, click on [Save Product] to ship the deal! 💻
2. In the [Pricing] section, grab the Variant ID and copy it into the first plan. in the lemonsqueezy.plans array located in the config.ts file.
Variant ID => lemonsqueezy.plans.[0].variantId
3. In config.ts, mofify paymentProvider to lemonsqueezy
4. In /pages/dashboard/index.vue file, Copy the code below: (We're using the dashboard as an example because we need the user to be authenticated.)
1<template>
2 <ButtonAccount />
3
4 <h1 className="text-3xl font-extrabold md:text-4xl">
5 Get <YOUR_PRODUCT>
6 </h1>
7
8 <ButtonCheckout :variantId="config.lemonsqueezy.plans[1].variantId"
9 placement="landing_page" :mode="config.lemonsqueezy.plans[1].mode" variant="secondary"
10 text="Get NuxtStarter" :withIcon="false" />
11 </section>
12</template>
13
14<script lang="tsx" setup>
15import config from "@/config";
16import ButtonAccount from "@/components/landing-components/ButtonAccount/ButtonAccount.vue";
17import ButtonCheckout from "@/components/landing-components/ButtonCheckout.vue";
18
19</script>5. Go to http://localhost:3000/dashboard in your web browser, sign in, and then click on the button to buy the item using the credit card number 4242 4242 4242 4242.
6. Our webhook, located at server/api/webhook/lemonsqueezy.post.ts, Listens for Lemon Squeezy events and manages the logic to allow or block user access based on those events.
LemonSqueezy Local Endpoint
During development, it's essential to have Lemon Squeezy local endpoint running on your computer. For testing Lemon Squeezy webhooks, you can use NGrok or a similar tool for local development. This allows Lemon Squeezy to reach your local environment for testing purposes. See, Ngrok Docs7. Feel free to change it with your custom logic inside server/api/webhook/lemonsqueezy.post.ts, like sending emails for abandoned carts or removing credits when needed.
8. Users have the ability to manage their accounts using <ButtonAccount /> component such as canceling subscriptions, updating credit card details, etc.. So you don't need to worry about building a custom user account page! 🚀