Level 67
@mandrizzy I would strongly recommend picking up this course. Super cheap. Walks you through everything you need to know.
https://laraveldaily.teachable.com/p/creating-laravel-saas-with-cashier-stripe
Feb 13, 2020
3
Level 5
Help With Laravel Cashier and Stripe
I really need some help in setting up Laravel cashier with stripe I have read documentation, watched youtube videos but nothing works most of them are either outdated with the new stripe API or simply too confusing to understand on my own. I only have the following done. This is just a testing page which shows the form to collect the information
<!DOCTYPE html>
<html>
<head>
<title>Checkout</title>
<script src="https://js.stripe.com/v3/"></script>
<link href="{{ asset('css/payment.css') }}" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" style="margin-top: 20px; width: 60%">
<form action="/charge" method="post" id="payment-form" class="">
{{csrf_field()}}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
<script type="text/javascript" src="{{ URL::asset('js/payment.js') }}"></script>
</body>
</html>
This next part is the JS code i copied from the stripe website
// Create a Stripe client.
var stripe = Stripe('pk_test_CQ5pA6xiAKWk3nP9rgwTCUEO00Mz5mlFfJ');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
This is the JS I copy from the stripe website to help collect the customer payment information. I'm at a loss of what do next I have read both Laravel and stripe documentation but still don't know what to do next can someone guide me through the setup process please any help would be greatly appreciated.
Level 5
Ok thanks, I'll have to look into it.
Level 67
@mandrizzy Feel free to mark best answer if this helped. :)
Please or to participate in this conversation.