Stripe支付集成指南：Node.js结账会话、支付意图、订阅与Webhooks完整教程
stripe by claude-dev-suite/claude-dev-suite
1 周安装量
GitHub安装命令
npx skills add https://github.com/claude-dev-suite/claude-dev-suite --skill stripe🇨🇳中文介绍
Stripe 支付处理
设置
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
结账会话（最简单的集成方式）
app.post('/api/checkout', async (req, res) => {
const session = await stripe.checkout.sessions.create({
mode: 'payment', // 或 'subscription'
line_items: [{ price: req.body.priceId, quantity: 1 }],
success_url: `${process.env.APP_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${process.env.APP_URL}/cancel`,
metadata: { userId: req.user.id },
});
res.json({ url: session.url });
});
支付意图（自定义 UI）
// 服务端：创建意图
app.post('/api/payment-intent', async (req, res) => {
const intent = await stripe.paymentIntents.create({
amount: Math.round(req.body.amount * 100), // 单位：分
currency: 'usd',
automatic_payment_methods: { enabled: true },
metadata: { orderId: req.body.orderId },
}, { idempotencyKey: `order_${req.body.orderId}` });
res.json({ clientSecret: intent.client_secret });
});
// 客户端：React + Stripe.js
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const { error } = await stripe!.confirmPayment({
elements: elements!,
confirmParams: { return_url: `${window.location.origin}/success` },
});
if (error) setError(error.message!);
};
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>支付</button>
</form>
);
}
🇺🇸English
Stripe Payment Processing
Setup
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
Checkout Session (simplest integration)
app.post('/api/checkout', async (req, res) => {
const session = await stripe.checkout.sessions.create({
mode: 'payment', // or 'subscription'
line_items: [{ price: req.body.priceId, quantity: 1 }],
success_url: `${process.env.APP_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${process.env.APP_URL}/cancel`,
metadata: { userId: req.user.id },
});
res.json({ url: session.url });
});
Payment Intents (custom UI)
// Server: create intent
app.post('/api/payment-intent', async (req, res) => {
const intent = await stripe.paymentIntents.create({
amount: Math.round(req.body.amount * 100), // cents
currency: 'usd',
automatic_payment_methods: { enabled: true },
metadata: { orderId: req.body.orderId },
}, { idempotencyKey: `order_${req.body.orderId}` });
res.json({ clientSecret: intent.client_secret });
});
// Client: React + Stripe.js
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const { error } = await stripe!.confirmPayment({
elements: elements!,
confirmParams: { return_url: `${window.location.origin}/success` },
});
if (error) setError(error.message!);
};
return (
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Pay</button>
</form>
);
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
