NextStripe 项目教程

最新推荐文章于 2024-09-08 08:27:53 发布

喻季福

最新推荐文章于 2024-09-08 08:27:53 发布

阅读量870

点赞数 10

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00535/article/details/142011477

NextStripe 项目教程

next-stripeSimplified server-side Stripe workflows in Next.js项目地址:https://gitcode.com/gh_mirrors/ne/next-stripe

1. 项目介绍

NextStripe 是一个简化了在 Next.js 应用中进行服务器端 Stripe 工作流程的开源库。该项目旨在帮助开发者更轻松地集成 Stripe 支付功能到 Next.js 应用中，减少开发复杂度。NextStripe 目前处于 beta 阶段，建议在生产环境中使用时谨慎操作。

2. 项目快速启动

安装

首先，使用 Yarn 安装 NextStripe：

yarn add next-stripe@beta

添加 API 路由

在你的项目中创建一个 pages/api/stripe/[nextstripe].js 文件，并添加以下代码：

import NextStripe from 'next-stripe';

export default NextStripe({
  stripe_key: process.env.STRIPE_RESTRICTED_KEY,
});

使用客户端助手函数

NextStripe 提供了客户端助手函数来调用 Next.js API 路由。以下是创建 Checkout Session 的示例：

import { createCheckoutSession } from 'next-stripe/client';

const session = await createCheckoutSession({
  success_url: window.location.href,
  cancel_url: window.location.href,
  line_items: [
    {
      price: 'price_id',
      quantity: 1,
    },
  ],
  payment_method_types: ['card'],
  mode: 'payment',
});

3. 应用案例和最佳实践

创建 Payment Intent

以下是创建 Payment Intent 的示例代码：

import { createPaymentIntent } from 'next-stripe/client';

const paymentIntent = await createPaymentIntent({
  amount: 1000, // 金额，单位为分
  currency: 'usd',
  payment_method_types: ['card'],
});

处理 Webhook 事件

在 pages/api/webhooks/checkout.js 中创建一个 Webhook 处理程序，用于接收 Stripe 的支付事件通知：

import Stripe from 'stripe';
import { NextRequest, NextResponse } from 'next/server';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string);

export async function POST(request: NextRequest) {
  try {
    const data = await request.json();
    const priceId = data.priceId;
    const checkoutSession: Stripe.Checkout.Session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price: priceId,
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: `${process.env.NEXT_BASE_URL}/billing`,
      cancel_url: `${process.env.NEXT_BASE_URL}/billing`,
      metadata: {
        userId: loggedUser.id,
        priceId,
      },
    });
    return NextResponse.json({ result: checkoutSession, ok: true });
  } catch (error) {
    console.log(error);
    return new NextResponse('Internal Server', { status: 500 });
  }
}