Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lara28580's avatar

Stripe integration single charges

I want to integrate stripe into my app but I cant get it to work. Problem is can't send the payment method to my backend.

What I am doing wrong here? Followed the tutorial on the official laravel documentation.

https://laravel.com/docs/9.x/billing#payment-methods-for-single-charges

html

 <div class="col-span-6 sm:col-span-6">
                    <input id="card-holder-name" type="text">

                    <!-- Stripe Elements Placeholder -->
                    <div id="card-element"></div>

                    <button id="card-button"
                        class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded shadow text-white hover:bg-lime-900 bg-lime-700">
                        Process Payment
                    </button>
                </div>

js

@push('before-scripts')
        <script src="https://js.stripe.com/v3/"></script>
    @endpush

    @push('after-scripts')
        <script>
            const stripe = Stripe('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

            const elements = stripe.elements();
            const cardElement = elements.create('card');

            cardElement.mount('#card-element');

            const cardHolderName = document.getElementById('card-holder-name');
            const cardButton = document.getElementById('card-button');

            cardButton.addEventListener('click', async (e) => {
                const {
                    paymentMethod,
                    error
                } = await stripe.createPaymentMethod(
                    'card', cardElement, {
                        billing_details: {
                            name: cardHolderName.value
                        }
                    }
                );

                if (error) {
                    //
                } else {
                    var form = document.getElementById('payment-form');
                    var hiddenInput = document.createElement('input');
                    hiddenInput.setAttribute('type', 'hidden');
                    hiddenInput.setAttribute('name', 'paymentMethod');
                    hiddenInput.setAttribute('value', paymentMethod);
                    form.appendChild(hiddenInput);

                    // Submit the form
                    form.submit();
                }
            });
        </script>
    @endpush
0 likes
6 replies
Snapey's avatar
Snapey
Best Answer
Level 122

@SmokeTM so paymentMethod is an object not something that can be forced into a form field.

console.log it and see what it contains

1 like
lara28580's avatar

Very strange somehow I get the paymentMethod now. Thank you!

Please or to participate in this conversation.