如何通过Stripe结账链接在Wix模块页面关联对应订单号

整个流程分4个环节落地，全程不需要额外第三方工具，参数透传逻辑可控，可防参数篡改。

1. 配置Stripe结账侧逻辑 #

• 所有Stripe Checkout Session必须走你的服务端生成，禁止前端直接拼接Stripe支付链接，避免金额、订单参数被恶意篡改。
• 服务端生成Session的逻辑顺序：先生成全局唯一的自有订单号，将订单初始状态写入你的数据库标记为「待支付」，再调用Stripe接口创建Checkout Session。
• 创建Session时核心参数配置：
  • 给success_url赋值为你的Wix支付落地页地址，直接拼接提前生成的订单号作为查询参数，格式参考：https://你的Wix站点域名/pay-success?order_id=生成的唯一订单号
  • 给cancel_url赋值为你的商品页/支付取消页地址，用户中途放弃支付时可正常返回。
  • 在Stripe后台配置Webhook，监听checkout.session.completed事件，收到事件回调后把对应订单的状态更新为「已支付」，从根源上避免用户跳过支付直接访问成功页的作弊问题。
• 商品页的下单按钮只需要做一件事：点击后请求你的服务端拿到Checkout Session的跳转地址，直接重定向到Stripe支付页即可，前端不需要处理订单相关参数。

2. 支付完成跳转逻辑配置 #

如果不需要中间确认页，用户付完款Stripe会自动跳转到你之前配置的带order_id参数的Wix页面，不需要额外开发。
如果需要先展示支付成功提示、再让用户点击链接跳转到Wix：

• 把Stripe的success_url改成你自己的中转页地址，中转页从URL参数中取出订单号，渲染成指向Wix页面的可点击链接，链接href里保留相同的order_id查询参数即可。
• 禁止在前端生成、修改订单号，所有订单号的赋值、校验逻辑全部放在服务端。

3. Wix侧参数读取与展示 #

分两种场景适配：

场景1：用Wix原生组件展示订单号 #

• 打开Wix编辑器，进入支付成功页，添加一个文本组件用来展示订单号，给这个组件设置唯一ID，比如orderNoText。
• 打开编辑器顶部的开发面板，开启Velo开发模式，在页面的onReady生命周期里加如下代码：

import wixLocation from 'wix-location';

$w.onReady(function () {
  // 读取URL中的order_id参数
  const orderId = wixLocation.query.order_id;
  // 空值兜底
  if (orderId) {
    $w('#orderNoText').text = `订单号：${orderId}`;
    // 如果需要对接其他展示逻辑，直接用orderId变量即可
  } else {
    $w('#orderNoText').text = '未查询到对应订单信息';
  }
});

• 保存代码后发布站点即可生效。

场景2：用自定义嵌入标签展示订单号 #

• 如果你是用Wix的自定义HTML嵌入组件做展示，直接在嵌入组件的代码块里写原生JS读取URL参数即可，代码参考：

// 读取URL查询参数工具方法
const getUrlParam = (paramKey) => {
  const searchParams = new URLSearchParams(window.location.search);
  return searchParams.get(paramKey);
}
const currentOrderId = getUrlParam('order_id');
// 把拿到的订单号插入到自定义标签的指定位置
document.querySelector('#你的自定义标签容器ID').innerText = currentOrderId ? `订单号：${currentOrderId}` : '无有效订单信息';

4. 兜底校验逻辑 #

• Wix页面拿到URL里的order_id之后，建议加一层服务端校验：请求你自己的订单接口，传入order_id查询该订单是否真实存在、是否为已支付状态，校验通过再展示订单信息，校验不通过直接重定向到站点首页，避免用户伪造参数访问成功页。
• URL里只传递非敏感的订单号字段，不要把用户隐私、支付金额这类信息放在查询参数里透传。

内容的提问来源于stack exchange，提问作者alch_coder