Stripe Checkout PHP 导致神秘的 404 错误 OnLoad

Question

我很难在本地 xampp 服务器上测试来自 single-checkout-subscription 的 Stripe Checkout。到目前为止，我有一个 Stripe 帐户，创建了我的测试密钥、产品和价格，安装了 Stripe Cli 并创建了一个测试 webhook 并将它们全部添加到我服务器中的 .env 文件中

DOMAIN="http://localhost/stripe/server/public/"
BASIC_PRICE_ID="price_xxx"
PRO_PRICE_ID="price_xxx"
STATIC_DIR="STATIC_DIR=../../client"
STRIPE_PUBLISHABLE_KEY="pk_test_xxx"
STRIPE_SECRET_KEY="sk_test_xxx"
STRIPE_WEBHOOK_SECRET="1mwhxxx"

但是当我在本地主机上测试它时：http://localhost/stripe/server/public/ 我得到了前端，但是当我点击按钮时没有任何反应。它甚至没有进入预建的结帐页面。

我检查了控制台，问题似乎来自我的config.php

我的 script.js 上出现两个控制台错误：

fetch("/config.php").then(function(json) 

这是路由：

我的 config.php > 需要 shared.php > 需要 '..vendor/autoload.php' & parses '../conifg/ini' > conifg.ini 包含我的测试密钥：

stripe_secret_key ="sk_test_444"
stripe_publishable_key = "pk_test_444"
stripe_webhook_secret = "1mw444"
domain = "http://localhost/stripe/server/public/"
basic_price_id = "price_444"
pro_price_id = "price_555" 

Script.js 在我的服务器上：

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function(priceId) {
  return fetch("/create-checkout-session.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      priceId: priceId
    })
  }).then(function(result) {
    return result.json();
  });
};

// Handle any errors returned from Checkout
var handleResult = function(result) {
  if (result.error) {
    var displayError = document.getElementById("error-message");
    displayError.textContent = result.error.message;
  }
};

/* Get your Stripe publishable key to initialize Stripe.js */
fetch("/config.php")
  .then(function(result) {
    return result.json();
  })
  .then(function(json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;
    var proPriceId = json.proPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("basic-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(basicPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });

    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("pro-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(proPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });
  });

我精通 HTML、Bootstrap、CSS 以及一些 PHP 和 JavaScript，但我似乎无法遵循如何让 Stripe Subscription Checkout 正常工作的困难指导。有人可以指出我正确的方向或告诉我如何修复我的代码。假期的最后期限很紧。

Answer 1

首先，出现 404 错误，因为该文件从未存在过。在 localhost 或所有服务器中，如果您在文件名之前放置 /，它将自动变为主机之后，因此 /config.php 将变为 http://localhost/config.php。为了防止这个错误，你应该使用./

并且意外的令牌< 表示服务器正在返回 404 文档。

简而言之，在文件名前加一个点，因为我假设这个项目不在根目录中。 （表示项目在http://localhost/projectName）

// Create a Checkout Session with the selected plan ID
var createCheckoutSession = function(priceId) {
  return fetch("./create-checkout-session.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      priceId: priceId
    })
  }).then(function(result) {
    return result.json();
  });
};

和

/* Get your Stripe publishable key to initialize Stripe.js */
fetch("./config.php")
  .then(function(result) {
    return result.json();
  })
  .then(function(json) {
    var publishableKey = json.publishableKey;
    var basicPriceId = json.basicPrice;
    var proPriceId = json.proPrice;

    var stripe = Stripe(publishableKey);
    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("basic-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(basicPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });

    // Setup event handler to create a Checkout Session when button is clicked
    document
      .getElementById("pro-plan-btn")
      .addEventListener("click", function(evt) {
        createCheckoutSession(proPriceId).then(function(data) {
          // Call Stripe.js method to redirect to the new Checkout page
          stripe
            .redirectToCheckout({
              sessionId: data.sessionId
            })
            .then(handleResult);
        });
      });
  });