419 Page Expired Error
I am trying to integrate the Stripe payment gateway into my project and after I completed charging the user I wanted to save the payment Id and Product Id on the DB but I get 419 Page Expired Error whenever I tried to submit the form with all the details of the payment and product.
Sample code:
// I am using Livewire component as well
<div class="mb-5 py-2" wire:ignore>
<div id="stripe-card-element">
</div>
</div>
<form action="{{ route('front.payment.store') }}" method="POST" id="stripeForm">
@csrf
@method('POST')
<input type="hidden" name="price_id" value="{{ $priceId }}" />
<input type="hidden" name="payment_gateway" value="{{ $paymentGateway }}" />
<input type="hidden" name="terms" value="{{ $terms }}" />
<input type="hidden" name="card_holder_ame" value="{{ $cardHolderName }}" />
<input type="hidden" name="amount" value="{{ $amount }}" />
<input type="hidden" name="payment_id" /> // will be filled by js once the payment is completed
</form>
<button class="btn btn--block btn--primary" id="stripeButton" type="button">
Process Payment
</button>
// JS code
let stripeForm = document.getElementById('stripeForm')
// let's assume every validation stuff is done and we are about to charge the user and submit the form
stripe.confirmCardPayment(data.client_secret, {
payment_method: {
card: card,
billing_details: {
name: stripeFormData.get("card_holder_name")
},
},
}).then(data => {
if(data.error) {
console.log(data.error.message)
return
} else if(data.paymentIntent) {
// here I am re-filling the form just to be safe, including payment id
fillFormData(stripeFormData, stripeForm)
stripeForm.submit()
}
})
I suspect that it might be connected with csrf but I tried every possible solutions I found googling but none of them work.
One thing to add here, in the VerifyCsrfToken file I included that specific route inorder to check what is going on behind, when I do that, yes the form will get submitted but it will be empty and the validation fails.
Please or to participate in this conversation.