條紋付款后重定向到其他頁面-Node.js

Question

我正在按照https://stripe.com/docs/recipes/custom-checkout上的指南，在我的網站上放一個自定義結帳按鈕。 到目前為止，測試付款將通過，我可以創建一個客戶並收取新費用。

我停留的部分實際上是在交易后將用戶重定向到/success頁面，例如，其中包含收費的詳細信息。 我試過使用res.render('success')甚至res.redirect('/success')但它沒有執行。

<button id="upgrade_membership"</button>

<script>
  var checkoutHandler = StripeCheckout.configure({
    key: "<%= keyPublishable %>",
    locale: "auto"
  });

  var button = document.getElementById("upgrade_membership");
    button.addEventListener("click", function(ev) {
    checkoutHandler.open({
      name: "Name",
      description: "Description",
      image: 'images/path.jpg',
      token: handleToken
    });
  });

  function handleToken(token) {
    fetch("/charge", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(token)
    })
    .then(response => {
      if (!response.ok)
        throw response;
        return response.json();
      })
   .then(output => {
     console.log("Purchase succeeded:", output);
   })
   .catch(err => {
     console.log("Purchase failed:", err);
   })
}
</script>

服務器

app.post("/charge", async (req, res) => {
  let amount = 1000;

  // Check user has stripe id as stripe do not check for uniqueness of email address
  try {
    var user_stripe_id = await queries.get_stripe_id_by_email(req.body.email);
  } catch (err) {
    console.log("Error with Query " + err);
    return;
  }

  if(user_stripe_id !== null) {
    // Need to process payment as a current customer on stripe
    return;
  } else {
    // Create Stripe Customer
    stripe.customers.create({
      email: req.body.email,
      card: req.body.id
    })
  .then(customer =>
    // Charge Customer payment
    stripe.charges.create({
      amount,
      description: "description here",
      currency: "GBP",
      customer: customer.id
    }))
    .then(charge => {
      // gets all the way here and logs out the charge object
      // want to redirect here
      res.send(charge)
      // if i replace the above with res.render('home') nothing happens 
    })
    .catch(err => {
      console.log("Error:", err);
      res.status(500).send({error: "Purchase Failed"});
    });
   } // if/else
});

因此，在瀏覽器控制台中成功進行交易后，我Purchase succeeded:打印。

我要實現的是將服務器重定向到另一頁

UPDATE

因此，我嘗試在付款成功后在此處呈現其他頁面，但是我什么都無法工作

res.render('home') // does not work
return res.render('home') // does not work
return res.redirect('/') // does not work
res.redirect('/') // does not work

更令人困惑

console.log("I WANT TO RENDER A NEW PAGE")
res.render('home')
console.log("WHY IS THIS BEING LOGGED")

兩個控制台日志都已記錄

是因為我then處於連鎖狀態嗎？ 真的不明白這里發生了什么

Answer 1

問題與獲取API和POST請求的工作方式有關。 請參閱此SO討論，以了解為什么不能將fss.render（）與fetch API一起使用，以及此SO討論，以了解如何在客戶端獲取請求后進行重定向。

將它們放在一起，您可以在獲取響應中發送回要重定向到的URL，然后使用window.location.replace（...）從客戶端重定向到該URL。