Nov 6, 2019
0
Level 1
I am using Stripe Payment Gateway Integration in Laravel using Vue js
when I am submit the form getting this error
app.js:106867 [Vue warn]: Error in v-on handler: "ReferenceError: stripeResponseHandler is not defined"
found in
---> at resources/js/components/MessagePackagesList.vue at resources/js/components/CreditDetailComponent.vue warn @ app.js:106867 logError @ app.js:108126 globalHandleError @ app.js:108121 handleError @ app.js:108081 invokeWithErrorHandling @ app.js:108104 invoker @ app.js:108421 original._wrapper @ app.js:113774 app.js:108130 ReferenceError: stripeResponseHandler is not defined at VueComponent.stripeResponse (app.js:4295) at invokeWithErrorHandling (app.js:108096) at HTMLFormElement.invoker (app.js:108421) at HTMLFormElement.original._wrapper (app.js:113774) logError @ app.js:108130 globalHandleError @ app.js:108121 handleError @ app.js:108081 invokeWithErrorHandling @ app.js:108104 invoker @ app.js:108421 original._wrapper @ app.js:113774 (index):3 Uncaught Error: Your key is invalid, as it contains whitespace. For more info, see https://stripe.com/docs/stripe.js at Function.b.validateKey ((index):3) at Function.b.create ((index):2) at Function.c.createToken ((index):2) at HTMLFormElement. (app.js:4222) at HTMLFormElement.dispatch (app.js:22950) at HTMLFormElement.elemData.handle (app.js:22757)
this is my template code
Our Packages
Trial for free{{index.credits}} Credits
{{index.description}} Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, animi at beatae dicta doloribus dolorumFree
£ {{index.price}}
<button type="button" class="btn btn-block btn-buy" @click="PackageBuy(index.id)">BUY NOWPayment Details
<div class="row display-tr" >
<div class="display-td" >
</div>
</div>
<div class="row">
<form role="form" @submit="stripeResponse" class="require-validation" data-cc-on-file="false" id="payment-form">
<input type="text" v-model="stripePublishableKey" hidden>
<!-- data-stripe-publishable-key="{{ $stripe_publishable_key }}"-->
<div class='form-row row'>
<div class='col-xs-12 col-md-12 form-group required'>
<label class='control-label'>Name on Card</label>
<input class='form-control' size='4' v-model="nameCard" type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 form-group card required'>
<label class='control-label'>Card Number</label>
<input autocomplete='off' class='form-control card-number' v-model="cardNumber" size='20'
type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-xs-12 col-md-4 form-group cvc required'>
<label class='control-label'>CVC</label>
<input autocomplete='off' class='form-control card-cvc' placeholder='ex. 311' v-model="cardCvc" size='4' type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Month</label>
<input class='form-control card-expiry-month' placeholder='MM' size='2' v-model="expirationMonth" type='text'>
</div>
<div class='col-xs-12 col-md-4 form-group expiration required'>
<label class='control-label'>Expiration Year</label>
<input class='form-control card-expiry-year' placeholder='YYYY' size='4' v-model="expiryYear" type='text'>
</div>
</div>
<div class='form-row row'>
<div class='col-md-12 error form-group hide'>
<div class='alert-danger alert'>Please correct the errors and try
again.</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="hidden" name="package_amount" value="25">
<button class="btn btn-primary btn-lg btn-block" type="submit" style="margin-top:20px;" >Pay Now </button>
</div>
<div class="col-xs-6 col-md-6">
<img class="img-responsive" :src="src" style="width: 50%;float: right;">
</div>
</div>
</form>
</div>
</div>
</section>
</div>
</div>
</section>
</div>
</div>
$(function() {
var $form = $(".require-validation");
$('form.require-validation').bind('submit', function(e) {
var $form = $(".require-validation"),
inputSelector = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs = $form.find('.required').find(inputSelector),
$errorMessage = $form.find('div.error'),
valid = true;
$errorMessage.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
var $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
//Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.setPublishableKey("{{ $stripe_publishable_key }}");
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
}
});
function stripeResponseHandler(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
});
export default {
data() {
return {
packages:[],
PackageId:'',
nameCard:'',
cardNumber:'',
cardCvc:'',
expirationMonth:'',
expiryYear:'',
stripeToken:'',
src:'../public/images/stripe-icon.jpg',
stripePublishableKey:''
}
},
methods: {
PackageBuy(id){
this.PackageId = id;
$('#stripeSection').show();
$('html, body').animate({
scrollTop: $("#stripeSection").offset().top
}, 1000);
},
stripeResponse(e){
e.preventDefault();
let $form = $(".require-validation"),
inputSelector = ['input[type=email]', 'input[type=password]',
'input[type=text]', 'input[type=file]',
'textarea'].join(', '),
$inputs = $form.find('.required').find(inputSelector),
$errorMessage = $form.find('div.error'),
valid = true;
$errorMessage.addClass('hide');
$('.has-error').removeClass('has-error');
$inputs.each(function(i, el) {
let $input = $(el);
if ($input.val() === '') {
$input.parent().addClass('has-error');
$errorMessage.removeClass('hide');
e.preventDefault();
}
});
if (!$form.data('cc-on-file')) {
e.preventDefault();
//Stripe.setPublishableKey($form.data('stripe-publishable-key'));
Stripe.setPublishableKey("{{ $stripe_publishable_key }}");
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
}
},
stripeResponseHandler(status, response) {
if (response.error) {
$('.error')
.removeClass('hide')
.find('.alert')
.text(response.error.message);
} else {
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
$form.find('input[type=text]').empty();
$form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
$form.get(0).submit();
}
}
},
mounted() {
// console.log("App mounted");
let app = this;
axios.get('/untyme/public/MessagePackageList')
.then(function (resp) {
app.packages = resp.data;
//console.log(resp);
})
.catch(function (resp) {
console.log("Could not load chocolates");
});
axios.get('/untyme/public/stripePublishableKey')
.then(function (resp) {
app.stripePublishableKey = resp.data.stripe_publishable_key;
})
.catch(function (resp) {
console.log("Could not load chocolates");
});
}
}
</script>
<style scoped>
@import url("https://fonts.googleapis.com/css?family=Montserrat");
.pricing-table{
font-family: 'Montserrat', sans-serif;
}
.hide{
display: none;
}
.panel-title {
display: inline;
font-weight: bold;
}
.display-table {
display: table;
}
.display-tr {
display: table-row;
}
.display-td {
display: table-cell;
vertical-align: middle;
width: 61%;
}
.btn-buy{
background: #888888 none repeat scroll 0 0;
border-radius: 5px;
border: 1px solid #888888;
color: #fff;
padding: 12px 35px;
text-transform: capitalize;
margin-top: 30px;
}
.btn-buy:hover{
background: #333 none repeat scroll 0 0;
color: #fff;
}
.pricing-table .block-heading {
padding-top: 50px;
margin-bottom: 40px;
text-align: center;
}
.pricing-table .block-heading h2 {
color: #3b99e0;
}
.pricing-table .block-heading p {
text-align: center;
max-width: 420px;
margin: auto;
opacity: 0.7;
}
.pricing-table .heading {
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pricing-table .item {
background-color: #ffffff;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
border-top: 2px solid #5ea4f3;
padding: 30px;
overflow: hidden;
position: relative;
}
.pricing-table .col-md-5:not(:last-child) .item {
/*margin-bottom: 30px;*/
}
.pricing-table .item button {
font-weight: 600;
}
.pricing-table .ribbon {
width: 160px;
height: 32px;
font-size: 12px;
text-align: center;
color: #fff;
font-weight: bold;
box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
background: #4dbe3b;
transform: rotate(45deg);
position: absolute;
right: -42px;
top: 20px;
padding-top: 7px;
}
.pricing-table .item p {
text-align: center;
margin-top: 20px;
opacity: 0.7;
}
.pricing-table .values .value {
font-weight: 600; }
.pricing-table .values h4 {
text-align: center;
font-size: 18px;
padding: 5px;
}
.pricing-table .price h4 {
margin: 15px 0;
font-size: 45px;
text-align: center;
color: #4dbe3b;
}
.pricing-table .buy-now button {
text-align: center;
margin: auto;
font-weight: 600;
padding: 9px 0;
}
</style>
Please or to participate in this conversation.