使用Stripe创建结账会话时JSON解析失败的问题排查

我正在使用Stripe JavaScript库创建结账会话，点击结账按钮时会向Django后端API发送POST请求创建会话，但解析响应为JSON时出现SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON"错误。经检查，后端本该返回包含会话ID的JSON响应，实际却返回了HTML。我已经修改了JavaScript代码（添加响应状态检查），但现在仍弹出提示："There was an error processing your request. Please try again later."，需要协助排查问题。

相关代码 #

原JavaScript代码 #

const checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', async () => {
  const response = await fetch('/create-checkout-session/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': getCookie('csrftoken'),
    },
    body: JSON.stringify({ items: [{ id: 'product1' }] }),
  });
  const session = await response.json();
  const stripe = Stripe('pk_test_your_public_key');
  stripe.redirectToCheckout({ sessionId: session.id });
});

checkout.html代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <button id="checkout-button">Proceed to Checkout</button>
  <script src="{% static 'js/checkout.js' %}"></script>
</body>
</html>

修改后的JavaScript代码 #

const checkoutButton = document.getElementById('checkout-button');
checkoutButton.addEventListener('click', async () => {
  try {
    const response = await fetch('/create-checkout-session/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': getCookie('csrftoken'),
      },
      body: JSON.stringify({ items: [{ id: 'product1' }] }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const session = await response.json();
    const stripe = Stripe('pk_test_your_public_key');
    stripe.redirectToCheckout({ sessionId: session.id });
  } catch (error) {
    alert('There was an error processing your request. Please try again later.');
    console.error(error);
  }
});

排查方向 #

• 后端路由配置：检查Django的urls.py中/create-checkout-session/是否正确映射到目标视图，是否存在路由冲突导致返回404或其他HTML错误页面。
• 视图返回格式：确认Django视图函数是否使用JsonResponse返回数据，而非render等返回HTML的方法。示例正确写法：

  from django.http import JsonResponse
  import stripe
  
  def create_checkout_session(request):
      if request.method != 'POST':
          return JsonResponse({'error': 'Method not allowed'}, status=405)
      # 生成Stripe会话逻辑
      try:
          session = stripe.checkout.Session.create(
              payment_method_types=['card'],
              line_items=[{
                  'price_data': {
                      'currency': 'usd',
                      'product_data': {'name': 'Test Product'},
                      'unit_amount': 2000,
                  },
                  'quantity': 1,
              }],
              mode='payment',
              success_url='http://localhost:8000/success/',
              cancel_url='http://localhost:8000/cancel/',
          )
          return JsonResponse({'id': session.id})
      except Exception as e:
          return JsonResponse({'error': str(e)}, status=400)
  

• CSRF令牌验证：检查前端是否正确传递CSRF令牌，若令牌无效，Django会返回403错误页面（HTML）。可通过浏览器开发者工具的Network标签查看请求响应的具体HTML内容，确认是403、404还是500页面。
• 请求数据解析：确保后端视图正确解析JSON请求体，需使用json.loads(request.body)而非request.POST获取参数。
• Stripe API异常处理：后端创建会话时若触发Stripe API错误，需捕获异常并返回JSON格式错误信息，避免Django直接返回500错误HTML页面。

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