Payments

Introduction to Stripe Payments

ZapStart uses Stripe to handle payments. Stripe is a popular and highly trusted payment processing platform that is both secure and easy to integrate. It supports a wide range of payment methods, including credit cards, digital wallets, and bank transfers, making it a perfect solution for monetizing your application.

Getting Started with Stripe

To get started with Stripe, you’ll need to create an account on the Stripe website. Once logged in, follow these steps:

1. Sign up and complete the verification process.
2. Create a new project in your Stripe dashboard.
3. Navigate to the API Keys section to find your publishable and secret keys.

Configuring Your Environment

After setting up your Stripe account, update your .env.local file with the necessary keys to integrate Stripe into your ZapStart project:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-publishable-key
STRIPE_SECRET_KEY=your-secret-key

Using Stripe in Your Project

ZapStart provides built-in Stripe integration to help you manage payments, subscriptions, and more. Using the stripe.ts file, you can easily create a Stripe client that allows you to connect to Stripe's API and manage transactions.

Creating a Payment Session

Here's an example of how to initialize Stripe in your project and create a simple payment session:

import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2020-08-27',
})

// Example function to create a payment session
export async function createCheckoutSession() {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'ZapStart Subscription',
          },
          unit_amount: 5000, // 50 USD in cents
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'https://www.zap-start.com/success',
    cancel_url: 'https://www.zap-start.com/cancel',
  })

  return session.url
}

Handling Payment Success with Webhooks

Webhooks allow your application to listen for events that happen within Stripe, such as successful payments. When a payment is completed, Stripe will send an event to the URL you specify, allowing you to handle post-payment processes like updating your database, sending email receipts, or enabling premium features.

To set up a webhook for handling payment success in your ZapStart project:

1. Go to your Stripe Dashboard and navigate to the Developers → Webhooks section.
2. Click Add Endpoint and enter the URL for your webhook listener, such as https://www.zap-start.com/api/webhooks/stripe.
3. Select the event types you want to listen to, such as checkout.session.completed.
4. Don't forget to add the webhook secret to your environment variables!

Webhook Implementation Example

Here's an example of how to create an API route in Next.js to handle Stripe webhooks:

export async function POST(req: NextRequest) {
  // Ensure we have the correct Stripe signature header
  const sig = req.headers.get("stripe-signature")

  if (!sig) {
    return NextResponse.json(
      { error: "Missing Stripe signature" },
      { status: 400 }
    )
  }

  // Buffer the request body (needed for Stripe signature verification)
  const buf = await buffer(req.body)

  let event: Stripe.Event

  // Verify the webhook signature
  try {
    event = stripe.webhooks.constructEvent(
      buf,
      sig,
      process.env.STRIPE_WEBHOOK_SECRET as string
    )
  } catch (err: any) {
    return NextResponse.json(
      { error: 'Webhook Error:' + err },
      { status: 400 }
    )
  }

  // Handle different event types
  switch (event.type) {
    case "checkout.session.completed":
      await handleCheckoutSessionCompleted(
        event.data.object as Stripe.Checkout.Session
      )
      break

    // Add more cases for other event types as needed
    // case "payment_intent.succeeded":
    //     await handlePaymentIntentSucceeded(event.data.object as Stripe.PaymentIntent);
    //     break;

    default:
      return NextResponse.json({ error: "Unhandled event" }, { status: 400 })
  }

  // Respond to Stripe with success
  return NextResponse.json({ success: true }, { status: 200 })
}

Conclusion

In this example, the checkout.session.completed event is captured. You can use this webhook to take action when a payment is completed, such as updating a user's subscription status or sending a confirmation email. To ensure secure communication, make sure to set and use the Stripe Webhook Secret found in the webhook settings in your Stripe dashboard.

Stripe provides a flexible solution for processing payments. You can use it to manage one-time payments, recurring subscriptions, and handle various payment methods globally. Combined with webhooks, you can build a robust system to handle payment success and automate the next steps in your application.