Integrating Vercel with Stripe for Payment Processing in Web Apps

Integrating Vercel with Stripe provides a seamless way to add payment processing capabilities to your web applications. Vercel offers a powerful platform for deploying frontend applications, while Stripe handles secure transactions. Combining these tools enables developers to create efficient and scalable payment solutions.

Why Use Vercel and Stripe Together?

Vercel simplifies the deployment of modern web apps with features like serverless functions, automatic scaling, and easy integrations. Stripe, on the other hand, offers a robust API for handling payments, subscriptions, and invoicing. Together, they streamline the process of building secure, professional payment systems.

Setting Up Stripe

Before integrating, you need a Stripe account. Sign up at stripe.com and create your API keys. These keys authenticate your app with Stripe and enable payment processing.

Navigate to the Developers section in your Stripe dashboard.
Generate API keys (Publishable key and Secret key).
Store these keys securely; do not expose the Secret key publicly.

Implementing Stripe in Vercel

Vercel supports serverless functions that can securely handle Stripe API requests. Create an API route in your Vercel project to process payments without exposing sensitive information.

Example: Creating a Payment Intent

Here’s a simple example of a serverless function in Vercel that creates a payment intent:

import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
  apiVersion: '2022-11-15',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { amount } = req.body;
    try {
      const paymentIntent = await stripe.paymentIntents.create({
        amount,
        currency: 'usd',
      });
      res.status(200).json({ clientSecret: paymentIntent.client_secret });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Connecting Frontend to Backend

On the frontend, use Stripe.js to handle payment confirmation. Fetch the client secret from your Vercel API route and complete the payment process.

Sample Payment Button

Here’s a basic example of how to implement a payment button using Stripe.js:

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('your-publishable-key');

async function handlePayment() {
  const response = await fetch('/api/create-payment-intent', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ amount: 5000 }), // $50.00
  });
  const { clientSecret } = await response.json();

  const stripe = await stripePromise;
  const result = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement, // assume cardElement is set up with Stripe Elements
    },
  });

  if (result.error) {
    console.error('Payment failed:', result.error.message);
  } else {
    if (result.paymentIntent.status === 'succeeded') {
      alert('Payment successful!');
    }
  }
}

Integrating Vercel with Stripe streamlines the process of accepting payments in your web applications. Proper security measures, like serverless functions and environment variables, help protect sensitive data while providing a smooth user experience.

Table of Contents