so what happens?
Aug 18, 2022
6
Level 10
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
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
Please or to participate in this conversation.