表单提交和重定向答案

【问题标题】：Form Submission and redirection表单提交和重定向
【发布时间】：2021-02-15 10:09:39
【问题描述】：

我正在尝试在我的网站上实施条带支付，但在客户进行条带结账之前，我需要从表单中收集数据。

我有下面的代码，但没有提交表单。当我单击按钮时，它会直接转到 Stripe。如果你们知道如何使这种形式有效，那就太好了！提前谢谢你。


<form id="booking-form" action="<?php echo esc_url( ct_get_thankyou_page() ); ?>">  

<input type="text" class="form-control" name="first_name" value="">

<input type="text" class="form-control" name="last_name" value="">

<input type="text" class="form-control" name="email" value="">

<button type="submit" class="book-now-btn" id="book-now-btn" <?php echo esc_html__( 'Pay Now', 'bookings' ) ?></button>


</form>



<script>
const url = '/stripe_checkout_integration_php/stripe_charge.php'; // 


var buyBtn = document.getElementById('book-now-btn');
var responseContainer = document.getElementById('paymentResponse');

    
// Create a Checkout Session with the selected product
var createCheckoutSession = function (stripe) {
  
    return fetch(url, {
        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({
            }).then(handleResult);
        }else{
            handleResult(data);
        }
    });
});
</script>

【问题讨论】：

标签： javascript php jquery forms stripe-payments

【解决方案1】：

您创建了一个竞争条件，这或多或少是意料之中的。您正在重定向到 Stripe Checkout，并且还希望通过单击 POST 表单数据，而无需对这种相互关联的行为进行任何显式管理。

您需要使用所需数据进行显式服务器调用，或者在createCheckoutSession fetch 调用中传递数据并在那里处理它，而不是依赖表单发布。

【讨论】：