payment.php

<?php include('user/includes1/header.php'); ?>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm">
                <div style="background-color:#4353B7" class="card-header  text-white text-center">
                    <h4 class="mb-0">Stripe Payment</h4>
                </div>
                <div class="card-body">
                    <form action="stripe_payment.php" method="POST" name="cardpayment" id="payment-form">
                        <div class="mb-3">
                            <label for="name" class="form-label">Name:</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" required>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email:</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" required>
                        </div>

                        <div class="mb-3">
                            <label for="total_amount" class="form-label">Total Amount (USD):</label>
                            <input type="text" class="form-control" id="total_amount" name="total_amount" placeholder="e.g., 49.99" required>
                        </div>

                        <div class="mb-3">
                            <label for="card-element" class="form-label">Credit or Debit Card:</label>
                            <div id="card-element" class="form-control"></div>
                            <div id="card-errors" class="text-danger mt-2" role="alert"></div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" id="payBtn" class="btn btn-success">Submit Payment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include('user/includes1/footer.php'); ?>

<!-- Stripe + jQuery -->
<script src="https://js.stripe.com/v3/"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    // Initialize Stripe
    const stripe = Stripe('YOUR_STRIPE_PUBLISHABLE_KEY_HERE'); // Use your actual public key here
    const elements = stripe.elements();

    // Create card input
    const card = elements.create('card');
    card.mount('#card-element');

    // Handle errors in card input
    card.on('change', function(event) {
        const displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    // Handle form submission
   // Form submit
const form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
    event.preventDefault();

    // Disable the submit button to prevent multiple submissions
    const submitButton = document.getElementById('payBtn');
    submitButton.disabled = true;

    // Validate that all fields are filled before proceeding
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const totalAmount = document.getElementById('total_amount').value;

    if (!name || !email || !totalAmount) {
        alert('Please fill out all fields.');
        submitButton.disabled = false;  // Re-enable the button if fields are missing
        return;
    }

    // Call Stripe's createToken method to generate the token
    stripe.createToken(card).then(function(result) {
        if (result.error) {
            // Show error to the user
            document.getElementById('card-errors').textContent = result.error.message;
            submitButton.disabled = false;  // Re-enable the button on error
        } else {
            // Append the token to the form and submit
            const tokenInput = document.createElement('input');
            tokenInput.type = 'hidden';
            tokenInput.name = 'stripeToken';
            tokenInput.value = result.token.id;
            form.appendChild(tokenInput);

            // Submit the form with the token
            form.submit();
        }
    });
});

</script>