Level 34
@mrsandywilly but are you hitting the expected function? Can you dd() and see if you got the details correctly?
And periods are not translated to link as long as it's in a code format :)
Apr 9, 2021
12
Level 1
Stripe Cashier Issues
Hiya, this is probably a bit of an idiot question, but I'm struggling a bit with stripe.
<form id="payment-form" style="width:25%;">
@csrf
<input id="card-holder-name" type="text">
<!-- Stripe Elements Placeholder -->
<div id="card-element"></div>
<button id="card-button">
Process Payment
</button>
</form>
<script>
const stripe = Stripe('{{ env('STRIPE_KEY') }}');
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) {
alert(error,message);
} else {
axios,post('/charge', { payment_method: paymentMethod,id })
,then((response) => {
alert('transaction success')
})
,catch((error) => {
alert('transaction failed')
})
}
});
</script>
A post request to /charge routes to a simple controller function as follows:
public function charge(Request $request)
{
$stripeCharge = (new User)->charge(
100, $request->input('payment_method')
);
}
When I hit submit on the form, the page reloads but nothing goes through to stripe, nor do I get either of the alerts. Help much appreciated :)
(I had to replace all of the periods in the code with a comma, otherwise laracasts thinks its a link :) Hope it makes sense)
Level 1
@neilstee How would I dd() that? The function is being accessed by a JS request. Nonetheless I think it is hitting the right function, as if I don't pass a payment method, I get an error thrown by the function asking for one.
Level 34
@mrsandywilly in your Laravel
public function charge(Request $request)
{
dd($request);
$stripeCharge = (new User)->charge(
100, $request->input('payment_method')
);
}
And in your js:
console.log(paymentMethod.id);
axios.post('/charge', { payment_method: paymentMethod.id })
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
Also, please replace , to . so it's easy to read code.
Level 1
@neilstee nothing gets logged, but no errors are thrown either... It thinks the . are parts of a link, even when its in the code block
Level 34
@mrsandywilly well that's weird because that code I have sent you above should log something regardless of the scenario.
Try removing the whole axios.post code and see if it still works because if it does then you are on the wrong file.
Level 1
@neilstee Ahah still works.... Should the form be submitting to /charge as well??
Level 34
@mrsandywilly sorry I was looking at the wrong function. Try this instead:
cardButton,addEventListener('click', async (e) => {
stripe.createPaymentMethod({
card: cardElement,
billing_details: {
name: cardHolderName.value
}
})
.then(function(result) {
if (result.error) {
alert(result.error);
} else {
axios.post('/charge', { payment_method: result.paymentMethod.id })
.then((response) => {
alert('transaction success')
})
.catch((error) => {
alert('transaction failed')
})
}
});
});
And also, make sure your STRIPE_KEY is correct and clear your config using php artisan config:clear
Level 1
@neilstee Still nothing... Stripe key is definitely correct
Should the controller function be returning something?
Level 1
In fact, here's the log. Something weird is going on.
(index):1 Uncaught (in promise) IntegrationError: Invalid value for createPaymentMethod: type should be string. You specified: undefined.
at new o (stripe link which i cant post)
at y (stripe link which i cant post)
at (stripe link which i cant post)
at Y (stripe link which i cant post)
at Q (stripe link which i cant post)
at di (stripe link which i cant post)
at lu,<anonymous> (stripe link which i cant post)
at lu,_createPaymentMethod (stripe link which i cant post)
at lu,e (stripe link which i cant post)
at HTMLButtonElement,<anonymous> (localhost url/checkout?_token=A1WJ6pvoEIO6J8rYkVLQ8flUspp7OGpZ1sVgypJG:33:20)
Level 1
UPDATE:
I was doing a number of things wrong. Firstly, the laravel cashier docs seem to be incorrect. stripe,createPaymentMethod() actually takes a "type" field, so the code to create the payment method is as follows:
stripe,createPaymentMethod({
type: 'card',
card: cardElement,
billing_details: {
name: cardHolderName,value
},
})
Secondly, I forgot to install axios :D I thought it comes included with laravel, but apparently not. Couldn't be bothered to install it as apparently it can cause issues, so switched to use fetch instead: window,fetch('/charge', { method: 'POST', headers: { 'X-CSRF-TOKEN': document,querySelector("meta[name='csrf-token']"),getAttribute('content'), "Content-Type": "application/json" }, body: { payment_method: result,paymentMethod,id }})
Level 34
@mrsandywilly so it works now? 😅 that's a lot of missed out there especially axios lol.
Level 1
Haha yes, there were a few more issues I discovered, for example I had to JSON,stringify() the body data but that was basically it :D
Please or to participate in this conversation.