使用 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 product

var 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.js

var 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 buttonsvar buyBtn = document.getElementById('payButton');var buyBtn2 = document.getElementById('payButton2');var buyBtn3 = document.getElementById('payButton3');// register click handlers for each buttonbuyBtn.addEventListener("click", function (evt) {&nbsp; buyBtn.disabled = true;&nbsp; buyBtn.textContent = 'Please wait...';&nbsp; // each click handler will pass some&nbsp; // ID that will be passed to the server&nbsp; // which would use that identifier to determine&nbsp; // what parameters to use to create the&nbsp; // Checkout Session.&nbsp; createCheckoutSession(1, buyBtn);});buyBtn2.addEventListener("click", function (evt) {&nbsp; buyBtn2.disabled = true;&nbsp; buyBtn2.textContent = 'Please wait...';&nbsp; createCheckoutSession(2, buyBtn2);});buyBtn3.addEventListener("click", function (evt) {&nbsp; buyBtn3.disabled = true;&nbsp; buyBtn3.textContent = 'Please wait...';&nbsp; 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) {&nbsp; return fetch("stripe_charge.php", {&nbsp; &nbsp; method: "POST",&nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; "Content-Type": "application/json",&nbsp; &nbsp; },&nbsp; &nbsp; body: JSON.stringify({&nbsp; &nbsp; &nbsp; checkoutSession: identifier, // passing button identifier to server&nbsp; &nbsp; }),&nbsp; }).then(function (result) {&nbsp; &nbsp; return result.json();&nbsp; }).then(function (result) {&nbsp; &nbsp; // if the stripe_charge.php call fails&nbsp; &nbsp; // re-enable the button.&nbsp; &nbsp; if (result.error) {&nbsp; &nbsp; &nbsp; responseContainer.innerHTML = '<p>'+result.error.message+'</p>';&nbsp; &nbsp; &nbsp; btn.disabled = false;&nbsp; &nbsp; &nbsp; btn.textContent = 'Buy Now';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // if the call to server was successful, redirect to Checkout.&nbsp; &nbsp; &nbsp; stripe.redirectToCheckout({&nbsp; &nbsp; &nbsp; &nbsp; sessionId: data.sessionId,&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; });};从技术上讲，您可以将其“干燥”一点，但我认为这应该更简单一些。