I trying to implement stripe as payment gateaway to my laravel app, but I'm stucked on one thing.. I want to use my styles of form, it's not problem I see, but problem is with functionality..
You can see the error on the screenshot
Controller code:
public function handleGet()
{
return view('invest');
}
/**
* handling payment with POST
*/
public function handlePost(Request $request)
{
Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
Stripe\Charge::create ([
"amount" => 1000 * 100,
"currency" => "zar",
"source" => $request->stripeToken,
"description" => "Making test payment."
]);
Session::flash('success', 'Payment has been successfully processed.');
return back();
}
So, let me to show you my code (a View with checkout form)..:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CryptoNomad.io | The Investment Process</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
<!-- Styles -->
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
<a href="/"><img src="\images\logo\Crypto-Nomad-Logo-Black.svg" width="271.25px" height="80px"></a>
</div>
<br />
<div class="mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-1">
@if (Session::has('success'))
<div class="alert alert-success text-center">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<p>{{ Session::get('success') }}</p>
</div>
@endif
<section class="form-container is-right has-top-margin">
<form role="form" action="{{ route('stripe.payment') }}" method="post" class="form validation"
data-cc-on-file="false"
data-stripe-publishable-key="{{ env('STRIPE_KEY') }}"
id="payment-form">
@csrf
<section class="field-container">
<label class='control-label'>Name on Card</label>
</section>
<section class="field-container">
<input class='form-field' size='4' type='text' placeholder="Card holder's name">
</section>
<section class="field-container">
<label class='control-label'>Card Number</label>
</section>
<section class="field-container">
<input autocomplete='off' class='form-field card-num' size='20' type='text' placeholder='Card number'>
</section>
<section class="field-container">
<label class='control-label'>CVC</label>
<label class='control-label'>Expiration</label>
</section>
<section class="field-container">
<input autocomplete='off' class='form-field card-cvc' placeholder='e.g 415' size='4' type='text'>
<input class='form-field card-expiry-month' placeholder='MM' size='2' type='text'>
<label class='control-label investment-slash'>/ </label>
<input class='form-field card-expiry-year' placeholder='YY' size='2' type='text'>
</section>
<div class='form-row row'>
<div class='col-md-12 hide error form-group'>
<div class='alert-danger alert'>Fix the errors before you begin.</div>
</div>
</div>
<section class="field-container">
<input class="form-submit" type="submit" value="Invest">
</section>
</form>
</section>
</div>
</div>
<span>
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
<div class="text-center text-sm text-gray-500 sm:text-left">
<div class="flex items-center">
<span class="subfooter-link">
<a class="subfooter-link" href="https://facebook.com/cryptonomad.io" class="ml-1 underline">
<i class="fab fa-instagram"></i>
Facebook
</span>
</a>
<span class="subfooter-link">
<a class="subfooter-link" href="https://instagram.com/cryptonomad.io" class="ml-1 underline">
<i class="fab fa-facebook"></i>
Instagram
</span>
</a>
</div>
</div>
</span>
<span>
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
<div class="text-center text-sm text-gray-500 sm:text-left">
<div class="flex items-center">
<span class="subfooter-link">
<a class="subfooter-link" href="https://www.cryptonomad.io/terms-of-service" class="ml-1 underline">
Terms & Conditions
</a>
</span>
|
<span class="subfooter-link">
<a class="subfooter-link" href="https://www.cryptonomad.io/privacy-policy" class="ml-1 underline">
Privacy Policy
</a>
</span>
</div>
</div>
</div>
</span>
</div>
</div>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
$(function() {
var $form = $(".validation");
$('form.validation').bind('submit', function(e) {
var $form = $(".validation"),
inputVal = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs = $form.find('.required').find(inputVal),
$errorStatus = $form.find('div.error'),
valid = true;
$errorStatus.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorStatus.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.createToken({
number: $('.card-num').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeHandleResponse);
}
});
function stripeHandleResponse(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
var token = response['id'];
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
});
</script>
Two things that will probably help you:
The error states that you didn't pass in a valid publishable key. Double check that your form has something set to its
data-stripe-publishable-keytag and that it's a valid publishable key: https://dashboard.stripe.com/test/apikeysYou are using Stripe.js v2, which is deprecated in favor of v3. Continuing to use v2 puts you in a harsher level of PCI compliance. You should strongly consider using v3 instead: https://stripe.com/docs/checkout/integration-builder