如何在client-side-only集成下获取Stripe支付后的响应数据

纯客户端直接调用redirectToCheckout传入lineItems的集成方式，本身设计上就不会向前端返回包含完整订单信息的响应或token：这个模式下Stripe处理完支付后会直接跳转到你配置的回调地址，所有敏感支付、订单数据不会直接透传给前端，避免前端数据被篡改导致伪造支付成功的风险。

Stripe Checkout官方要求所有订单核验、状态记录逻辑必须走自有服务端，具体步骤如下：

• 移除前端代码里直接写死的lineItems、price、支付模式等配置，点击支付按钮时先请求自有后端接口，由后端使用Stripe秘钥创建Checkout Session，将生成的sessionId返回给前端。
• 前端拿到sessionId后再调用stripe.redirectToCheckout，入参仅传入sessionId字段即可发起跳转。
• 配置跳转地址时，在successUrl末尾拼接?session_id={CHECKOUT_SESSION_ID}占位符，用户支付完成跳转回你的成功页时，Stripe会自动将真实的会话ID替换占位符拼接到URL参数中。
• 成功页加载时，从URL参数中取出sessionId，传给自有后端接口，由后端调用Stripe服务端接口查询该会话对应的完整支付、订单信息，完成核验、入库、权益发放等后续逻辑。

<script setup>
import {onMounted} from "vue";
// 若未使用vue-router，可直接通过window.location.search解析URL参数
import { useRoute } from "vue-router";

const route = useRoute()
let stripe = null

onMounted(async () => {
  stripe = Stripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY)
  // 成功页加载时执行订单核验
  if (route.path === '/success') {
    const sessionId = route.query.session_id
    if (!sessionId) return
    // 请求自有后端完成订单核验与记录
    const orderDetail = await fetch('/your-api/verify-stripe-order', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ sessionId })
    }).then(res => res.json())
    // 基于后端返回的真实订单数据渲染页面
    console.log('核验完成的订单信息', orderDetail)
  }
})

const redirect = async () => {
  // 先请求后端创建Stripe Checkout会话
  const { sessionId } = await fetch('/your-api/create-stripe-session', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      goodsId: 'your_photo_sku',
      quantity: 2
    })
  }).then(res => res.json())

  // 基于会话ID发起支付跳转
  stripe.redirectToCheckout({ sessionId })
}
</script>

<template>
  <div id="checkout" class="checkout">
    <button @click="redirect">Pay now!</button>
  </div>
</template>

注意：绝对不要信任前端传递的任何支付成功状态标识，所有订单状态判定必须以后端调用Stripe接口获取的结果为准，避免出现伪造支付成功的资损问题。相关实现逻辑在Stripe Checkout官方文档的服务端集成、支付后履约章节有完整说明。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov