节点条纹支付网关创建支付意图错误

Question

在测试我的实时 Stripe 集成时，我在尝试创建付款意图时收到 404 错误。 以下显示在浏览器开发控制台中 - 'POST {domain}/create-payment-intent 404'。

在本地测试时，一切正常。 但是，当将 API 密钥切换到实时密钥并在我们的网络服务器上运行时，我收到此错误并且它无法加载支付元素，我不确定我哪里出错了，任何帮助/想法我可能会忘记的东西将不胜感激。

*注意：Web 服务器通过 Windows IIS 运行

下面是我的 checkout.js 代码，它在 'const response = await fetch("/create-payment-intent"'

const stripe = Stripe("key here");

var amount = document.getElementById('amount-input');
var firstName = document.getElementById('firstname-input');
var lastName = document.getElementById('lastname-input');
var email = document.getElementById('email-input');
var phone = document.getElementById('phone-input');
var accountNumber = document.getElementById('accountnumber-input');


var btnProceed = document.getElementById('proceedToPayment');
btnProceed.addEventListener('click', function(e) {
    e.preventDefault();
    createPayment();
});

let elements;

document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);
  
 var btnProceed = document.getElementById('proceedToPayment');

// Fetches a payment intent and captures the client secret
async function initialize() {
  const response = await fetch("/create-payment-intent", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ 
        amount: parseFloat(amount.value),
        firstName: String(firstName.value),
        lastName: String(lastName.value),
        email: String(email.value),
        phone: String(phone.value),
        accountNumber: String(accountNumber.value),
    }),
  });
  const { clientSecret } = await response.json();

  const appearance = {
    theme: 'stripe',
  };
  elements = stripe.elements({ appearance, clientSecret });

  const paymentElement = elements.create("payment");
  paymentElement.mount("#payment-element");
}

function createPayment(){
    //first validate fields
    if(String(firstName.value) === ""){
        alert("Please enter your first name.");
        return;
    }
    if(String(lastName.value) === ""){
        alert("Please enter your last name.");
        return;
    }
    if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(String(email.value)) === false){
        alert("Please enter a valid email address.");
        return;
    }
    if(String(phone.value).match(/\d/g).length !== 10 && (String(phone.value).match(/\d/g).length === 11 && String(phone.value).charAt(0) !== "1")){
        alert("Please enter a valid phone number.");
        return;
    }
    if(String(accountNumber.value).length !== 8){
        alert("Please enter a valid account number.");
        return;
    }
    if(String(amount.value) === ""){
        alert("Please enter an amount to pay.");
        return;
    }else if(parseFloat(amount.value) === 0){
        alert("You may not enter 0 for an amount.");
        return;
    }else if(parseFloat(amount.value) > 0 && parseFloat(amount.value) < 5){
        alert("Minimum payment amount accepted is $5.00");
        return;
    }
    //hide basic info form
    hideBasicInfo();
    //unhide payment form
    document.getElementById('payment-form').hidden = '';
    //show amount they will be paying on payment form
    displayAmount(amount.value);
    //create payment form
    initialize();
    checkStatus();

}

async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const { error } = await stripe.confirmPayment({
    elements,
    confirmParams: {
      // Make sure to change this to your payment completion page
      return_url: "https://www.humanserviceagency.org/paymentcomplete.html",
    },
  });

  // This point will only be reached if there is an immediate error when
  // confirming the payment. Otherwise, your customer will be redirected to
  // your `return_url`. For some payment methods like iDEAL, your customer will
  // be redirected to an intermediate site first to authorize the payment, then
  // redirected to the `return_url`.
  if (error.type === "card_error" || error.type === "validation_error") {
    showMessage(error.message);
  } else {
    showMessage("An unexpected error occurred.");
  }

  setLoading(false);
}

// Fetches the payment intent status after payment submission
async function checkStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);

  switch (paymentIntent.status) {
    case "succeeded":
      showMessage("Payment succeeded!");
      break;
    case "processing":
      showMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      showMessage("Your payment was not successful, please try again.");
      break;
    default:
      showMessage("Something went wrong.");
      break;
  }
}

function hideBasicInfo(){
    var form = document.getElementById('basicinfo-form');
    form.hidden = 'hidden';
}
function displayAmount(amount){
    var amountFields = document.getElementById('amount-fields');
    var amountDisplay = document.getElementById('paymentAmount');
    amountDisplay.innerHTML = amountDisplay.innerHTML + String(amount);
    amountFields.hidden = '';
}

// ------- UI helpers -------

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");

  messageContainer.classList.remove("hidden");
  messageContainer.textContent = messageText;

  setTimeout(function () {
    messageContainer.classList.add("hidden");
    messageText.textContent = "";
  }, 4000);
}

// Show a spinner on payment submission
function setLoading(isLoading) {
  if (isLoading) {
    // Disable the button and show a spinner
    document.querySelector("#submit").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("#submit").disabled = false;
    document.querySelector("#spinner").classList.add("hidden");
    document.querySelector("#button-text").classList.remove("hidden");
  }
}

Answer 1

我的猜测是该页面位于实时 Web 服务器上的目录中。 如果是这种情况，则问题是此代码中的前导/ ：

fetch("/create-payment-intent"

开头的/将使其始终解析为您的域的根目录，这意味着如果您的域是example.com这将始终指向https://example.com/create-payment-intent ，即使您的付款页面是在一个目录中。

换句话说，如果您的页面位于https://example.com/checkout并且您的付款意图创建 URL 位于https://example.com/checkout/create-payment-intent您需要删除正斜杠到使 URL 相对于当前页面而不是绝对。