最近需要做第三方支付,和GPT的支付一样跳转新页面,让用户填写信用卡后完成支付,看了看用stripe非常简单,流程分享一下吧
1. 首先注册一个账号,登录之后拿到测试用的私钥,以sk_test_开头
2. 在登录完成后的首页寻找并点击产品按钮,创建一个价格选项,并记录price_id
3. 准备一个后端服务,这里我选择node.js了,可根据官方文档自由选择
const stripe = require('stripe')('sk_test_4eC39HqLyjWDarjtT1zdp7dc'); // 更换之前记录的私钥
const express = require('express');
const cors = require('cors')
const app = express();
app.use(
cors({
origin: 'http://localhost:8080' // 您的前端应用程序的 origin
})
)
app.use(express.static('public'));
const YOUR_DOMAIN = 'http://localhost:8080';
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: '{{PRICE_ID}}', // 替换之前记录的price_id
quantity: 1,
},
],
mode: 'payment',
success_url: `${YOUR_DOMAIN}/success.html`,
cancel_url: `${YOUR_DOMAIN}/cancel.html`,
});
res.json({ url: session.url })
});
app.listen(4242, () => console.log('Running on port 4242'));
4. npm i stripe cors 装包
5. node 你的文件名.js 启动node服务
到这里服务器就搭建好了,前端只需要轻轻点击发送post请求即可
6. 搭建前端代码
随便写了个例子,根据框架自己修改吧
import axios from 'axios'
const BASE_URL = 'http://localhost:4242/create-checkout-session'
const createStripe = () => {
axios
.post(BASE_URL)
.then((res)=>{
const url = res.data.url
window.location.href = url
})
.catch((error) => {
console.log(error)
})
}
<button @click={() => createStripe()}>点击支付</button>
7. 测试效果
启动前端页面,点击跳转,进入到stripe页面后填写邮箱,银行卡号填写测试专用卡号4242424242424242,日期,后三位,国家,邮编随便填,点击支付就OK啦, 之后服务端会返回成功失败的页面,前端再去做鉴别
错误之处,欢迎指正!