DEV Community: Robert

How to Accept Payments with Nuxt and Stripe

Robert — Sat, 06 Dec 2025 14:15:34 +0000

Accepting payments is a critical feature for many web applications. If you're using Nuxt, you might be looking for a clean way to integrate Stripe.

In this guide, we'll walk through building a complete payment flow using vue-stripe (a wrapper for Stripe.js with 1:1 parity with the React SDK) and Nuxt's server routes.

🚀 Check out this fully styled checkout demo built with Nuxt, Tailwind CSS, and Vue Stripe.

Prerequisites

Before we start, make sure you have:

A Nuxt project set up
A Stripe account (and your test API keys)

1. Installation

First, install the vue-stripe package along with the official Stripe JS loader:

npm install vue-stripe @stripe/stripe-js stripe

2. Creating a Payment Intent

Stripe requires you to create a payment intent on your server before you can collect payment details on the client. This ensures the transaction amount and currency are secure.

Create a new server route in your Nuxt project at server/api/create-payment-intent.post.ts:

import Stripe from 'stripe'

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig(event)

  const stripe = new Stripe(runtimeConfig.stripeSecretKey)

  const paymentIntent = await stripe.paymentIntents.create({
    amount: 1099, // $10.99 (amount in cents)
    currency: 'usd',
    automatic_payment_methods: {
      enabled: true,
    },
  })

  return {
    clientSecret: paymentIntent.client_secret,
  }
})

Make sure to add your STRIPE_SECRET_KEY to your .env file.

3. Building the Checkout Form

Now let's create the payment form. We'll use the PaymentElement component, which automatically handles multiple payment methods (cards, wallets, bank transfers) with a single UI.

Create a component called CheckoutForm.vue:

<script setup>
import { ref } from 'vue'
import {
  PaymentElement,
  useElements,
  useStripe,
} from 'vue-stripe'

const stripe = useStripe()
const elements = useElements()
const errorMessage = ref(null)

const handleSubmit = async () => {
  if (!stripe.value || !elements.value) {
    // Stripe.js has not loaded yet
    return
  }

  // 1. Validate the form fields
  const { error: submitError } = await elements.value.submit()

  if (submitError) {
    errorMessage.value = submitError.message
    return
  }

  // 2. Confirm the payment
  const { error } = await stripe.value.confirmPayment({
    elements: elements.value,
    confirmParams: {
      return_url: 'http://localhost:3000/success', // Redirect after success
    },
  })

  if (error) {
    errorMessage.value = error.message
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <PaymentElement />
    <button type="submit" :disabled="!stripe || !elements">
      Pay Now
    </button>
    <div v-if="errorMessage" class="error">
      {{ errorMessage }}
    </div>
  </form>
</template>

4. Integrating the Elements Provider

Finally, we need to wrap our form with the Elements provider. This component initializes Stripe and passes the necessary context down to your form.

In your page (e.g., app/pages/checkout.vue):

<script setup>
import { loadStripe } from '@stripe/stripe-js'
import { Elements } from 'vue-stripe'

// Load your publishable key
const config = useRuntimeConfig()
const stripePromise = loadStripe(config.public.stripePublishableKey)

// Fetch the client secret from our server endpoint
const { data } = await useFetch('/api/create-payment-intent', {
  method: 'POST'
})
</script>

<template>
  <div class="checkout-page">
    <h1 class="text-2xl font-bold mb-4">Secure Checkout</h1>

    <div v-if="data?.clientSecret">
      <Elements :stripe="stripePromise" :options="{ clientSecret: data.clientSecret }">
        <CheckoutForm />
      </Elements>
    </div>

    <div v-else>
      Loading payment details...
    </div>
  </div>
</template>

Conclusion

Integrating payments doesn't have to be complicated. By combining Nuxt's server routes with the PaymentElement, you can accept cards, Apple Pay, Google Pay, and more with just a few lines of code.

Check out the documentation or the GitHub repo for more examples like custom styling and express checkout buttons.

Integrating tRPC with SvelteKit

Robert — Sat, 29 Mar 2025 08:25:27 +0000

With the release of tRPC 11 and its resolver function now based on the Fetch API, integrating type-safe APIs into SvelteKit applications has never been easier. This post will walk you through the step-by-step process of setting up tRPC with SvelteKit.

This post assumes you have familiarity of tRPC and SvelteKit, and have ideally built an application using both of these technologies.

Installation

Start off by creating a SvelteKit project using the Svelte CLI:

npx sv create my-app

You'll be prompted with a few configuration questions:

For the template, choose 'SvelteKit minimal'
For type checking with TypeScript, select 'Yes'
Configure additional options as needed for your project

Next, navigate to your newly created app and install the necessary dependencies for tRPC.

cd my-app
npm install @trpc/server @trpc/client zod

Defining a Backend Router

With the project set up and dependencies installed, let's build a typesafe API with tRPC.

First, create a file at src/lib/server/trpc/init.ts and initialize your tRPC backend:

import { initTRPC } from '@trpc/server';
 
const t = initTRPC.create();

/**
 * Export reusable router and procedure helpers
 * that can be used throughout the router
 */
export const router = t.router;
export const publicProcedure = t.procedure;

Next, create a file at src/lib/server/trpc/router.ts and initialize a basic router:

import { z } from 'zod';
import { router, publicProcedure } from './init.js';

export const appRouter = router({
  hello: publicProcedure
    .input(z.object({ text: z.string() }))
    .query(({ input }) => {
      return { greeting: `hello ${input.text}` };
    }),
});

export type AppRouter = typeof appRouter;

Creating the Server Endpoint

Now that we've defined a router, we need to expose it through a SvelteKit endpoint. We'll use the Fetch adapter since SvelteKit is built on top of Web APIs.

Create a catch-all route file at src/routes/api/trpc/[...procedure]/+server.ts:

import type { RequestHandler } from './$types';
import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
import { appRouter } from '$lib/server/trpc/router';

export const GET: RequestHandler = (event) => {
    return fetchRequestHandler({
        endpoint: '/api/trpc',
        req: event.request,
        router: appRouter,
        createContext() {
            // pass anything here that you want to access in your resolvers
            const user = event.locals.user;
            return {
                user
            };
        }
    });
};

export const POST = GET;

Setting Up the Client

Now let's harness the power of end-to-end type safety. Create a file at src/lib/trpc.ts:

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import { browser } from '$app/environment';
import { page } from '$app/state';
import type { AppRouter } from './server/trpc/router.js';

export function createTRPC() {
    return createTRPCClient<AppRouter>({
        links: [
            httpBatchLink({
                    // We use the absolute path on the server
                url: browser ? '/api/trpc' : `${page.url.origin}/api/trpc`
            })
        ]
    });
}

Using Your Type-Safe API in Components

We can now make API requests inside our components using the createTRPC() function:

<script lang="ts">
    import { createTRPC } from '$lib/trpc.js';

    const trpc = createTRPC();
    let greeting = $state('')

    // This will run on the server first, then the client
    trpc.hello.query({ text: 'World' }).then((data) => {
       greeting = data.greeting;
    });
</script>

<h1>{greeting}</h1>

Conclusion

tRPC 11's Fetch API-based architecture makes it very easy to use with SvelteKit. You only need a few files to create a completely type-safe API that works smoothly throughout your whole application.

This is all you need to get started with tRPC and SvelteKit. Happy hacking!