React独立Shopify应用：选择定价方案后跳转至支付页的问题

1. 确认正确获取confirmationUrl #

你的appSubscriptionCreate mutation执行成功后，会返回confirmationUrl——这就是跳转至Shopify支付页面的关键链接。首先检查你是否正确从响应中提取了这个值：

// Node端处理响应
const subscriptionData = response.data.appSubscriptionCreate;
if (!subscriptionData.userErrors.length) {
  const confirmationUrl = subscriptionData.confirmationUrl;
  // 将这个URL返回给React前端
  res.json({ confirmationUrl });
} else {
  // 处理错误
  res.status(400).json({ errors: subscriptionData.userErrors });
}

2. 验证returnUrl的合法性 #

Shopify要求returnUrl必须是已添加到应用允许列表的域名：

• 登录Shopify合作伙伴后台，进入你的应用
• 前往App Setup > App URLs
• 在Allowed redirection URL(s)中添加你的returnUrl域名（包括测试环境的公网域名，比如ngrok生成的地址，localhost需明确添加）
• 若returnUrl不在允许列表中，Shopify会生成无效的支付链接，导致无法跳转

3. 测试模式下的注意事项 #

当test: true时：

• 必须使用Shopify测试店铺进行操作，普通店铺无法跳转测试支付页面
• 确保用户已通过OAuth授权登录测试店铺，会话有效才能正常跳转至Shopify的测试支付流程

4. 前端跳转的正确方式 #

拿到confirmationUrl后，前端不能使用React Router的内部跳转方法，必须用浏览器原生的外部跳转：

// React前端示例
const handlePlanSelect = async (plan) => {
  const res = await fetch('/api/create-subscription', {
    method: 'POST',
    body: JSON.stringify(plan)
  });
  const data = await res.json();
  if (data.confirmationUrl) {
    // 直接跳转至Shopify支付页面
    window.location.href = data.confirmationUrl;
  }
};

5. 排查隐藏错误 #

即使mutation返回成功，也要检查userErrors字段是否存在隐藏问题：

const userErrors = subscriptionData.userErrors;
if (userErrors.length > 0) {
  console.log('订阅创建错误:', userErrors);
}

比如returnUrl格式错误、金额不符合要求等，都可能导致confirmationUrl无效。

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