Блог

Я пытаюсь реализовать stripe payment на своем веб-сайте, но перед тем, как клиент перейдет к оформлению заказа stripe, мне нужно собрать данные из формы.

У меня есть приведенный ниже код, но форма не отправляется. Когда я нажимаю кнопку, она переходит непосредственно к 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>
  

Вы создали условие гонки, и это более или менее ожидаемо. Вы перенаправляетесь на Stripe Checkout, а также ожидаете отправки данных формы одним щелчком мыши без какого-либо явного управления этим взаимосвязанным поведением. Вплетенный.

Вместо того, чтобы полагаться на form post, вы захотите либо выполнить явный вызов сервера с необходимыми вам данными, либо передать данные в своем createCheckoutSession fetch вызове и обработать их там.