如何修改Stripe定价表跳转URL，替换为应用自有支付页面？

可以实现，以下是两种常用方案：

方案一：拦截Stripe定价表的默认点击事件 #

Stripe定价表支持通过JavaScript事件监听拦截默认跳转行为，自定义跳转逻辑：

1. 初始化定价表时，不依赖默认的redirectToCheckout配置
2. 监听定价表容器的点击事件，识别用户点击的订阅计划元素
3. 阻止默认跳转动作，提取计划ID等关键参数，手动跳转到自有支付页面

示例代码片段：

// 初始化Stripe实例
const stripe = Stripe('你的公钥');
// 加载定价表组件
const pricingTable = await stripe.pricingTable({
  pricingTableId: 'prctbl_你的定价表ID',
  container: '#pricing-table-container',
});

// 拦截订阅计划点击事件
document.querySelector('#pricing-table-container').addEventListener('click', (e) => {
  const priceElement = e.target.closest('[data-stripe-price-id]');
  if (priceElement) {
    e.preventDefault(); // 阻止跳转到Stripe结账页
    const priceId = priceElement.dataset.stripePriceId;
    // 跳转至自有支付页面并携带计划参数
    window.location.href = `/your-payment-page?price_id=${priceId}`;
  }
});

方案二：完全自定义定价表UI #

如果需要更高的灵活性，可以放弃Stripe官方组件，自行实现订阅计划展示：

• 通过Stripe API（GET /v1/prices）拉取后台配置的订阅计划数据
• 在前端自定义渲染计划列表和按钮样式
• 为按钮绑定点击事件，直接跳转至自有支付页面
• 后续在自有支付页中，通过Stripe后端API完成订阅创建、付款确认等核心逻辑

注意事项 #

• 两种方案都需要自行对接Stripe后端API，处理客户创建、订阅生成、付款状态同步等流程
• 需确保前端展示的计划价格、权益与Stripe后台配置完全一致，避免数据偏差

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