如何使用JS(Vue)在Stripe中按指定金额发起前端支付

完全可以实现该需求，不需要提前在Stripe仪表盘预配置固定商品，通过Stripe Checkout的动态传参能力即可实现仅传入总金额就生成对应支付页的效果，测试环境下支付的款项会直接进入你的Stripe测试虚拟账户，不会产生真实资金交易。

你不需要自己从零封装支付逻辑，直接用Stripe官方维护的适配包即可：

• 前端Vue侧安装@stripe/stripe-js（Stripe JS核心SDK）、@stripe/vue-stripe-js（Vue框架适配层）
• 安全提示：绝对不能只在前端完成全部支付逻辑，Stripe的sk_开头的密钥拥有账户操作权限，必须保存在服务端，你需要写一个极简单的后端接口用来生成支付会话，哪怕是测试环境也不要把密钥写在前端代码里，避免泄露风险。

1. 安装前端依赖 #

npm install @stripe/stripe-js @stripe/vue-stripe-js

2. Vue端支付逻辑实现 #

你要的charge函数逻辑可以直接参考下面的写法，替换成你自己的pk_test_开头的测试公钥即可（公钥可以在Stripe后台API密钥页面找到，允许暴露在前端）：

<template>
  <button @click="charge">发起100美元捐赠支付</button>
</template>

<script setup>
import { loadStripe } from '@stripe/stripe-js'
// 替换为你自己的Stripe测试公钥
const stripeInstance = loadStripe('pk_test_xxxxxx_你的公钥')

const charge = async () => {
  const stripe = await stripeInstance
  // 调用后端接口生成支付会话
  const checkoutRes = await fetch('/api/create-donation-checkout', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      totalAmount: 100,
      description: 'Donation details'
    })
  })
  const checkoutSession = await checkoutRes.json()
  // 自动跳转到Stripe托管的支付页面，不需要自己写支付表单
  const redirectResult = await stripe.redirectToCheckout({
    sessionId: checkoutSession.sessionId
  })
  // 跳转失败的错误提示
  if (redirectResult.error) {
    alert(`支付跳转失败：${redirectResult.error.message}`)
  }
}
</script>

3. 最简后端接口示例（Node.js版，测试环境可直接用） #

后端只需要一个接口，先安装服务端Stripe依赖：

npm install stripe

接口逻辑如下，注意sk_test_开头的密钥只能放在服务端：

const express = require('express')
const stripe = require('stripe')('sk_test_xxxxxx_你的测试密钥')
const app = express()
app.use(express.json())

app.post('/api/create-donation-checkout', async (req, res) => {
  const { totalAmount, description } = req.body
  // 创建动态金额的支付会话，不需要提前在后台配置商品
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        // 动态传入价格、商品信息，无需预配置
        price_data: {
          currency: 'usd',
          product_data: {
            name: description
          },
          // Stripe金额按货币最小单位计算，美元对应美分，100美元需要传100*100=10000
          unit_amount: totalAmount * 100
        },
        quantity: 1
      }
    ],
    mode: 'payment',
    // 替换为你自己前端的支付成功、取消跳转地址
    success_url: 'http://localhost:5173/pay-success',
    cancel_url: 'http://localhost:5173/pay-cancel'
  })
  res.json({ sessionId: session.id })
})

app.listen(3000, () => console.log('后端服务启动在3000端口'))

启动前后端服务后点击支付按钮，会自动跳转到Stripe的官方支付页，使用Stripe提供的通用测试卡即可完成模拟支付：

• 卡号：4242 4242 4242 4242
• 有效期：任意未来日期
• CVC：任意3位数字
• 邮编：任意6位数字
  支付完成后你可以在Stripe仪表盘的测试订单里查到这笔100美元的记录，款项会计入你的测试虚拟账户。

注意：如果你暂时不会写后端，也可以用Stripe的Payment Links动态参数能力实现，但生产环境强烈建议走服务端生成Checkout Session的方案，安全性有保障。

内容的提问来源于stack exchange，提问作者Wasiq Bin Zahid