stripe一键支付跳转

最近需要做第三方支付，和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啦, 之后服务端会返回成功失败的页面，前端再去做鉴别

错误之处,欢迎指正!