ALINAWAZ
3 months ago
183
0
Vue

I am using Stripe Payment Gateway Integration in Laravel using Vue js

Posted 3 months ago by ALINAWAZ

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 dolorum

Free

&pound {{index.price}}

<button type="button" class="btn btn-block btn-buy" @click="PackageBuy(index.id)">BUY NOW

Payment 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 sign in or create an account to participate in this conversation.