Stripe, Convex and Nextjs

[simple birch]

Hi @drowsy cape. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To integrate Stripe with your Next.js and Convex application, you can follow these steps:

1. Initiate the checkout flow: You need to create a Convex action that creates a document in your "payments" table to track the progress of the checkout flow, calls Stripe’s SDK to get the checkout page URL the client should redirect to, includes the ID of your "payments" document in the success_url that Stripe will redirect to after the user has finished paying, and writes the Stripe checkout session ID into the “payments” document to ensure you only fulfill the “order” once. Here is a sample code snippet for this:

// convex/stripe.ts
"use node";
import { v } from "convex/values";
import { action } from "./_generated/server";
import Stripe from "stripe";
import { internal } from "./_generated/api";

export const pay = action({
args: { text: v.string() },
handler: async (ctx, { text }) => {
const domain = process.env.HOSTING_URL ?? "http://localhost:5173";
const stripe = new Stripe(process.env.STRIPE_KEY!, {
apiVersion: "2022-11-15",
});
const paymentId = await ctx.runMutation(internal.payments.create, { text });
const session = await stripe.checkout.sessions.create({
line_items: [
{
price_data: {
currency: "USD",
unit_amount: 100,
tax_behavior: "exclusive",
product_data: {
name: "One message of your choosing",
},
},
quantity: 1,
},
],
mode: "payment",
success_url: ${domain}?paymentId=${paymentId},
cancel_url: ${domain},
automatic_tax: { enabled: true },
});
await ctx.runMutation(internal.payments.markPending, {
paymentId,
stripeId: session.id,
});
return session.url;
},
});

**Source** (<https://stack.convex.dev/stripe-with-convex#step-1-initiate-the-checkout-flow>)

2. **Receiving the payment confirmation**: Stripe will notify your server about the confirmed payment via a webhook request. You need to expose an HTTP endpoint that Stripe’s servers can hit whenever a user finishes a payment. This is a perfect fit for a Convex HTTP action. The HTTP action will handle the Stripe webhook request, parsing it, and passing its contents to another Convex action that will confirm the request is valid using the Stripe SDK in the Node.js runtime. Here is a sample code snippet for this:

```tsx
// convex/http.ts
import { httpRouter } from "convex/server";
import { httpAction } from "./_generated/server";
import { internal } from "./_generated/api";

const http = httpRouter();

http.route({
path: "/stripe",
method: "POST",
handler: httpAction(async (ctx, request) => {
const signature: string = request.headers.get("stripe-signature") as string;
const result = await ctx.runAction(internal.stripe.fulfill, {
signature,
payload: await request.text(),
});
if (result.success) {
return new Response(null, {
status: 200,
});
} else {
return new Response("Webhook Error", {
status: 400,
});
}
}),
});

export default http;

**Source** (<https://stack.convex.dev/stripe-with-convex#step-3-receiving-the-payment-confirmation>)

3. **Tying it all together**: You can refer to the [Github repo](<https://github.com/get-convex>
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------