ALINAWAZ

ALINAWAZ

Member Since 3 Months Ago

Experience Points
2,280
Total
Experience

2,720 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
14
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

Level 1
2,280 XP
Jan
09
1 week ago
Activity icon

Started a new Conversation Google Sign Up Image

I signed up through the google .Now I has been signed up successfully.But my google image is not show.How to fixed this problem.

Jan
08
1 week ago
Activity icon

Replied to PHPMailer Used In Laravel 6.0

But when I used in proper working form send mail then get error

Invalid address: (From): [email protected]

Activity icon

Replied to PHPMailer Used In Laravel 6.0

Now First Error Thanks

Activity icon

Replied to PHPMailer Used In Laravel 6.0

Is there any way to change the smtp value of .env file for our class function

Activity icon

Replied to PHPMailer Used In Laravel 6.0

And I also some time this on server smtp are not response (email) when some action with email

Activity icon

Replied to PHPMailer Used In Laravel 6.0

because our requirement I am using the stmp and username , password, and port value used in admin panel. these admin panel value I am used But in the case of when Laravel has built-in SMTP driver I am hardcodeed the the value in .env file in this way i am try to used the PHPMAILER function

Activity icon

Replied to PHPMailer Used In Laravel 6.0

After using above code I am also getting the same error

Activity icon

Replied to PHPMailer Used In Laravel 6.0

namespace App\Custom;

use App\student; use GuzzleHttp\Psr7\Request; use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception; use Illuminate\Support\Facades\DB;

class SmtpEmail { public function Email(Request $request){ $mail = new \PHPMailer(true); try{ $mail->isSMTP(); $mail->CharSet = 'utf-8'; $mail->SMTPAuth =true; $mail->SMTPSecure = env('MAIL_ENCRYPTION'); $mail->Host = env('MAIL_HOST'); //gmail has host > smtp.gmail.com $mail->Port = env('MAIL_PORT'); //gmail has port > 587 . without double quotes $mail->Username = env('MAIL_USERNAME'); //your username. actually your email $mail->Password = env('MAIL_PASSWORD'); // your password. your mail password $mail->setFrom(env('MY_EMAIL'), env('MY_NAME')); $mail->Subject = $request->subject; $mail->MsgHTML($request->text); $mail->addAddress($request->email , $request->name); $mail->send(); }catch(phpmailerException $e){ dd($e); }catch(Exception $e){ dd($e); } if($mail){ return View("result")->with("result","success")->with("title","Success"); }else{ return View("result")->with("result","failed")->with("title","Failed"); } } }

Activity icon

Replied to PHPMailer Used In Laravel 6.0

After include the following line in our code now:

use App\student; use GuzzleHttp\Psr7\Request;

use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception;

use Illuminate\Support\Facades\DB;

But I am getting the same error in our code

Activity icon

Replied to PHPMailer Used In Laravel 6.0

This above conversation is my code which I used in our class

Activity icon

Replied to PHPMailer Used In Laravel 6.0

namespace App\Custom;

use App\student; use GuzzleHttp\Psr7\Request; use vendor\phpmailer\phpmailer\src\PHPMailer; use vendor\phpmailer\phpmailer\src\Exception; use Illuminate\Support\Facades\DB;

require 'vendor/autoload.php';

class SmtpEmail { public function Email(Request $request){ $mail = new \PHPMailer(true); try{ $mail->isSMTP(); $mail->CharSet = 'utf-8'; $mail->SMTPAuth =true; $mail->SMTPSecure = env('MAIL_ENCRYPTION'); $mail->Host = env('MAIL_HOST'); //gmail has host > smtp.gmail.com $mail->Port = env('MAIL_PORT'); //gmail has port > 587 . without double quotes $mail->Username = env('MAIL_USERNAME'); //your username. actually your email $mail->Password = env('MAIL_PASSWORD'); // your password. your mail password $mail->setFrom(env('MY_EMAIL'), env('MY_NAME')); $mail->Subject = $request->subject; $mail->MsgHTML($request->text); $mail->addAddress($request->email , $request->name); $mail->send(); }catch(phpmailerException $e){ dd($e); }catch(Exception $e){ dd($e); } if($mail){ return View("result")->with("result","success")->with("title","Success"); }else{ return View("result")->with("result","failed")->with("title","Failed"); } } }

Activity icon

Started a new Conversation PHPMailer Used In Laravel 6.0

I am using laravel 6.0 and try to use the PHPMailer in our project

A) Firstly I am install the command in our project. (composer require phpmailer/phpmailer) B) Second include code in composer.json ("phpmailer/phpmailer": "dev-master",) c) Then make php file as name. (App/custom/SmtpEmail.php) D) Then I am getting following three Error I) Undefined type 'PHPMailer'. II) Undefined type 'App\Custom\phpmailerException'. III) Undefined type 'vendor\phpmailer\phpmailer\src\Exception'.

F) This is my code of PHPMailer

Dec
26
3 weeks ago
Activity icon

Replied to How To Remove The Error Array Of Object In Vue Js

when I am try to remove the array object using Splice then get error on browser

[Vue warn]: Error in v-on handler: "TypeError: this.selectchocolates.splice is not a function"

found in

---> at resources/js/components/Message-Component.vue

Activity icon

Started a new Conversation How To Remove The Error Array Of Object In Vue Js

When I am try to remove the object in array then get the error in vue js

this my code

{{item.title}}

${{item.price}}

@click="removeElementCCandy(i);" class="card-text"> Remove

                                </div>
                            </div>
                        </div>
                        <div class="col-md-3"></div>
                    </div>

selectchocolates[],

removeElementCCandy: function(index) { this.selectchocolates.splice(index, 1); this.id.splice(index, 1); },

Activity icon

Replied to Email Word Replace In Php

thankx

Activity icon

Started a new Conversation Email Word Replace In Php

This is my email address suppose that [email protected] Now I am replace this email address like that t******t.com in laravel using php

Dec
12
1 month ago
Activity icon

Replied to Daily Motion API Use To Upload Videos

But this is not working in Laravel 6.0

when I am try to use this

PhpJunior\DailyMotion\DailyMotionProvider::class,

line in config/app.php file then get this error (undefined type)

Dec
11
1 month ago
Activity icon

Started a new Conversation Daily Motion API To Upload Videos

I am new on Laravel.Before I am not using any type of API in our project.so that is task is difficult for me so Anyone help how to use this (Dailymotion API to Videos Upload) API in our project

Nov
29
1 month ago
Activity icon

Replied to CSRF Token Mismatch

you can check that is error on live server (token mismatch) but on local server this project are running well

Activity icon

Replied to CSRF Token Mismatch

this is the url from my site http://untyme.com/untyme/public/

Activity icon

Replied to CSRF Token Mismatch

my project is already on the FTP server

Activity icon

Replied to CSRF Token Mismatch

After use this command which file are use to upload on server

Activity icon

Replied to CSRF Token Mismatch

After this change I am getting the same error on the server

Activity icon

Replied to CSRF Token Mismatch

APP_NAME=Laravel APP_ENV=local APP_KEY=base64:xRg7lDe0JyBIsbHzdevV0D/dJYGbUklCorDncAvj/xE= APP_DEBUG=true APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=untyme DB_USERNAME=root DB_PASSWORD=

BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379

MAIL_DRIVER=smtp MAIL_HOST=smtp email MAIL_PORT=587 [email protected] MAIL_PASSWORD=123456 MAIL_ENCRYPTION=ssl MAIL_FROM_ADDRESS=Untyme MAIL_FROM_NAME==

AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_DEFAULT_REGION=us-east-1 AWS_BUCKET=

PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY=my value MIX_PUSHER_APP_CLUSTER= my value

this is my .env file but I do not run this command on local server php artisan key:generate

Activity icon

Replied to CSRF Token Mismatch

My project is running well in local server but I am upload this project on server and try to use the is application on live server then get the error on the console network CSRF token mismatch but the request status is 200 on all function like login or search

have you any idea what is the error on my project

Activity icon

Replied to CSRF Token Mismatch

A) if I am using the ajax call from delete or get the data from the specify id against then used the csrf token out side the form

B) or by mistake I am using the csrf token outside the then is this token create problem from my application ??

Activity icon

Replied to CSRF Token Mismatch

this is my code of login page

Admin - Login {{----}} @csrf

Login

Sign In to your account

Login
Activity icon

Replied to CSRF Token Mismatch

is it possible to use the csrf token out side the form tag in laravel 6.0

Nov
28
1 month ago
Activity icon

Replied to CSRF Token Mismatch

i have this part of code in laravel 6.0

Activity icon

Started a new Conversation CSRF Token Mismatch

how to fixed this But I am use axios post call

Nov
21
1 month ago
Activity icon

Replied to Redirect To Specify Blade In Laravel Issue

in this i cannot take the data which we are json data with (/whatever ) page

Activity icon

Replied to Redirect To Specify Blade In Laravel Issue

where we can see the json response in browser preview .there we can see the target page code

Activity icon

Started a new Conversation Redirect To Specify Blade In Laravel Issue

Step - 1 I am using one axios call in Vue Template in larvel

 payPal(){
     
                    let formData = new FormData();
                    formData.append('packageId',this.PackageId);
                    axios.post('/untyme/public/payPalPayment',formData).then(function (resp) {


                    }).catch(function (resp) {

                    });
                },

Step - 2 and defined the Route in in Route File

Route::post('/payPalPayment', '[email protected]')->name('payPalPayment');

Step - 3

Now I am going to the MessageCredit controller in defind our function according to our requirement

public function payPalPayment(Request $request) {

    $email = DB::table('settings')->select('data')->where('name','paypal_fields')->get();
    $site_url = "https://untyme.com/untyme/public/";
    $business_email = $email;
    $user_id = Auth::id();
    $package_id = "";
    $package_title = "";
    $custom = "";
    $price = 0;

    if (!empty($request['packageId'])) {
        $package_id = $request['packageId'];
    }

    if (!empty($package_id) && !empty($user_id)) {
        $package_row = paidpackagemange::where('id', $package_id)->first();

        $package_title = $package_row->title;
        $price = $package_row->price;
        $credits = $package_row->credits;

        $custom = $user_id . "##" . $package_id . "##" . $price . "##" . $credits;
    }
    return view('MessageCredit.PaymentShow')->with('site_url', $site_url)->with('business_email', $business_email)->with('package_title', $package_title)->with('price', $price)->with('credits', $credits)->with('custom', $custom);
}

Step - 4 My issues is at the end of payPalPayment Method I am goind the to specify page with data at the specify blade (PaymentShow). But we cannot go to this page and get the response in browser console preview

Nov
15
2 months ago
Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

please urgent to fixed this problem

Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

can anyone help me to fixed in this problem

Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

actually my code in this structure

$input = $request['searchInput']; $inputWords = explode(' ',$input);

    $sql = "SELECT DISTINCT  m.*, concat(u.fname ,' ',u.lname) AS username, '' as rcity,'' as rcountry, '' as raddress,
            (CASE WHEN mc.id IS null THEN 'Not Claimed' ELSE 'Claimed' END) as msg_claimed
            FROM `messages` m INNER JOIN `users` u ON u.id = m.userid LEFT JOIN message_clamieds mc ON m.id = mc.msgid
            LEFT OUTER JOIN `receivermessageinfos` r ON m.id = r.msgid
            WHERE m.rname LIKE '%$input%'
            OR (r.type = 'school' AND r.value LIKE '%$input%')
            OR (r.type = 'address' AND r.value LIKE '%$input%')
            OR (r.type = 'city' AND r.value LIKE '%$input%')
            OR (r.type = 'country' AND r.value LIKE '%$input%')
            OR (r.type = 'email' AND r.value LIKE '%$input%')";


    $sqlCount = "select count(*) as count from messages where rname LIKE '%$input%'";

    $data = DB::select($sql);
    $dataCount = count($data); //DB::select($sqlCount);
    $array = json_decode(json_encode($data), true);
    foreach ($array as &$item) {
        $msgid = $item['id'];
        $city = DB::select("SELECT GROUP_CONCAT(r.`value`) as city FROM `receivermessageinfos` r WHERE r.`msgid` = $msgid AND r.`type` = 'city'");
        $country = DB::select("SELECT GROUP_CONCAT(r.`value`) as country FROM `receivermessageinfos` r WHERE r.`msgid` = $msgid AND r.`type` = 'country'");
        $address = DB::select("SELECT GROUP_CONCAT(r.`value`) as address FROM `receivermessageinfos` r WHERE r.`msgid` = $msgid AND r.`type` = 'address'");

        if($city) {
            $item['rcity'] = $city[0]->city;
        }
        if($country){
            $item['rcountry'] = $country[0]->country;
        }
        if($address){
            $item['raddress'] = $address[0]->address;
        }
    }
    $nameCheck = DB::table('settings')->select('data')->where('name','sender_name')->get();
    $verifyName = $nameCheck[0]->data;
    $cityCheck = DB::table('settings')->select('data')->where('name','city')->get();
    $verifyCity = $cityCheck[0]->data;
    $countryCheck = DB::table('settings')->select('data')->where('name','country')->get();
    $verifyCountry = $countryCheck[0]->data;
    $schoolCheck = DB::table('settings')->select('data')->where('name','address')->get();
    $verifySchool = $schoolCheck[0]->data;

    return response()->json(['data' => $array,'count' => $dataCount,'searchby'=> $input,'verifyName' => $verifyName, 'verifyCity' => $verifyCity ,'verifyCountry' => $verifyCountry,'verifySchool' => $verifySchool]);

and I am try to use pagination

at this line

in this form $data = DB::select($sql)->paginate(5);

Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

when use the is code then get the error

$page

this variable are undefined

Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

if I am try this method then how I am remove this error

$sql ="Select * from students"; $data = DB::select($sql); return response()->json($data);

Call to a member function paginate() on array

Activity icon

Replied to I Am Try To Search My Record (use Laravel And Vue Js )

$sql ="Select * from students";

Activity icon

Started a new Conversation I Am Try To Search My Record (use Laravel And Vue Js )

This is my server side code

$data = DB::select($sql)->paginate(5);
    return response()->json($data);

then get error on console

Call to a member function paginate() on array

how to fixed this error

Activity icon

Started a new Conversation How To Use The Laravel Vue Pagination

this is my vuejs component template Code

Search for your name

<input type="text" name="searchInput" id="searchInput" @keyup.enter="btnsearch" class="searchinput" v-model="searchInput"> <button class="searchbtn" @click="btnsearch">Search

export default { data() { return { searchInput:'', } }, methods: { btnsearch:function (e) { e.preventDefault();
            let formData = new FormData();
            formData.append('searchInput', this.searchInput);
            axios.post('/untyme/public/searchMessage',formData)
                .then(function (resp) {
                    let results = resp.data.data;
                    let html = "";
                    console.log(resp.data.count[0].count);

                    html +="<p  style='text-transform: capitalize; color: slategray;'>" + resp.data.searchby + " has " + resp.data.count + " messages</p>";
                    for(let i = 0; i < results.length; i++) {
                        html += '<div style="margin-top: 1.5rem;">';
                        if (results[i].messagetype == 'Public') {
                            html += "<div style='display: inline;'><h3 style='text-transform: capitalize;display: inline;margin-right: 10px;  '><a style='color:#55c175;' href= /untyme/public/publicmessage/"+results[i].id+" >"+results[i].rname +"</a></h3><span class='' style='margin-right: 10px;'><i class='fa fa-users' aria-hidden='true' style='margin-right: 5px;'></i>"+results[i].messagetype+"</span></div>";
                        }else{
                            html += "<div><h3 style='text-transform: capitalize;display: inline;margin-right: 10px; '><a style='color:#55c175;' href= /untyme/public/privatemessage/"+results[i].id+" >"+results[i].rname +"</a></h3><span class='' style='margin-right: 10px;'><i class='fa fa-lock' aria-hidden='true'></i></span>";
                            if (results[i].msg_claimed == 'Claimed') {
                                html +="<span class='badge badge-success'>Previous Claimed</span></div>";
                            }
                        }
                        if(resp.data.verifyName == 1){
                            html += "<div style='color:black;'>Message sent by "+results[i].username+"</div>";
                        }

                        html += "<div style='color: slategray;'>";
                        if (results[i].rcountry && resp.data.verifyCountry == 1 ) {
                            html += " " + results[i].rcountry;
                        }
                        if (results[i].rcity && resp.data.verifyCity == 1) {
                            html += " " + results[i].rcity;
                        }
                        if (results[i].raddress  && resp.data.verifySchool == 1) {
                            html += " " + results[i].raddress;
                        }
                        html += "</div>";

                        html += '</div>';
                    }

                    if (results.length) {
                        $('#resultList').html(html);
                        $('#search-results').show();
                        $('html, body').animate({
                            scrollTop: $("#search-results").offset().top
                        }, 1000);
                        $('#no-results').modal('hide');
                    } else {
                        $('#resultList').html('');
                        $('#search-results').hide();
                        $('#no-results').modal('show');
                    }
                })
                .catch(function (resp) {
                });
        }
    }
}

how to add the vue js pagination in this code

Nov
06
2 months ago
Activity icon

Replied to How To Remove This Error

how and where we remove the whitespace in our code

Activity icon

Started a new Conversation How To Remove This Error

[Vue warn]: Error in v-on handler: "Error: Your key is invalid, as it contains whitespace. For more info, see https://stripe.com/docs/stripe.js"

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 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 VueComponent.stripeResponse (app.js:4290) 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) b.validateKey @ (index):3 b.create @ (index):2 c.createToken @ (index):2 (anonymous) @ app.js:4222 dispatch @ app.js:22950 elemData.handle @ app.js:22757

Activity icon

Started a new Conversation 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 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>