使用 Ajax 在一页上添加多个条纹结账按钮

Question

我为使用 AJAX 提交的三种不同产品设置了三个 Stripe 按钮，如下页面部分所示：<!-- key stripe settings such as stripe account and product variables --><?php require_once 'config.php';   ?> <div id="buynow"> <button class="stripe-button stripebutton1" id="payButton">Buy Now</button> </div> <div id="buynow2">  <button class="stripe-button stripebutton1" id="payButton2">Buy Now</button>  </div>   <div id="buynow3"> <button class="stripe-button stripebutton1" id="payButton3">Buy Now</button>  </div><script src="https://js.stripe.com/v3/"></script>一个按钮可以工作，但很难找到一种方法将每个按钮发送到自己的表单，以便使用类似的 AJAX 方法通过条带进行处理。           <script>var buyBtn = document.getElementById('payButton');var responseContainer = document.getElementById('paymentResponse');// Create a Checkout Session with the selected productvar createCheckoutSession = function (stripe) {    return fetch("stripe_charge.php", {         method: "POST",        headers: {            "Content-Type": "application/json",        },        body: JSON.stringify({        checkoutSession: 1,    }),}).then(function (result) {        return result.json();});};// Handle any errors returned from Checkout var handleResult = function (result) {if (result.error) {    responseContainer.innerHTML = '<p>'+result.error.message+'</p>';}buyBtn.disabled = false;buyBtn.textContent = 'Buy Now';};// Specify Stripe publishable key to initialize Stripe.jsvar stripe = Stripe('<?php echo STRIPE_PUBLISHABLE_KEY; ?>');buyBtn.addEventListener("click", function (evt) {    buyBtn.disabled = true;buyBtn.textContent = 'Please wait...';createCheckoutSession().then(function (data) {    if(data.sessionId){        stripe.redirectToCheckout({            sessionId: data.sessionId,        }).then(handleResult);    }else{        handleResult(data);    }});});</script>我正在努力寻找一种在 AJAX 中为每个相应 ID 运行此脚本的方法 - 例如，第一个脚本附加到 id="payButton"，下一个脚本附加到 id="payButton2"，最后一个脚本附加到 id="payButton3 ”

Answer 1

一种选择是添加 3 个不同的点击处理程序，每个按钮一个。然后，当单击按钮时，您可以向服务器传递对该按钮的一些引用和 ID，这将有助于创建正确类型的结账会话。

一个非常基本的版本可能如下所示：

// initialize Stripe, first.

var stripe = Stripe('<?php echo STRIPE_PUBLISHABLE_KEY; ?>');

// grab reference to the buttons

var buyBtn = document.getElementById('payButton');

var buyBtn2 = document.getElementById('payButton2');

var buyBtn3 = document.getElementById('payButton3');

// register click handlers for each button

buyBtn.addEventListener("click", function (evt) {

  buyBtn.disabled = true;

  buyBtn.textContent = 'Please wait...';

  // each click handler will pass some

  // ID that will be passed to the server

  // which would use that identifier to determine

  // what parameters to use to create the

  // Checkout Session.

  createCheckoutSession(1, buyBtn);

});

buyBtn2.addEventListener("click", function (evt) {

  buyBtn2.disabled = true;

  buyBtn2.textContent = 'Please wait...';

  createCheckoutSession(2, buyBtn2);

});

buyBtn3.addEventListener("click", function (evt) {

  buyBtn3.disabled = true;

  buyBtn3.textContent = 'Please wait...';

  createCheckoutSession(3, buyBtn3);

});

// no need to pass in `stripe` here, as it's

// in the parent scope, instead we're passing

// the identifier down.

function createCheckoutSession(identifier, btn) {

  return fetch("stripe_charge.php", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

    },

    body: JSON.stringify({

      checkoutSession: identifier, // passing button identifier to server

    }),

  }).then(function (result) {

    return result.json();

  }).then(function (result) {

    // if the stripe_charge.php call fails

    // re-enable the button.

    if (result.error) {

      responseContainer.innerHTML = '<p>'+result.error.message+'</p>';

      btn.disabled = false;

      btn.textContent = 'Buy Now';

    } else {

      // if the call to server was successful, redirect to Checkout.

      stripe.redirectToCheckout({

        sessionId: data.sessionId,

      });

    }

  });

};

从技术上讲，您可以将其“干燥”一点，但我认为这应该更简单一些。