I have a Laravel project. I want to add Stripe payment system in my Laravel app. In stripe there is js Element but unfortunately I cannot use it in blade files. Can anyody help me suggest other way to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stripe Payment</title>
</head>
<body>
<!-- Mount the instance within a <label> -->
<label>Card
<div id="card-element"></div>
</label>
<!--
Or create a <label> with a 'for' attribute,
referencing the ID of your container.
-->
<label for="card-element">Card</label>
<div id="card-element"></div>
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('pk_test_....');
const elements = stripe.elements();
const cardElement = elements.create("payment", {"clientSecret": "sk_test_...."});
cardElement.mount('#card-element');
</script>
</body>
</html>
Related
Template:
<!DOCTYPE html>
<html>
<head>
<title>App Name #yield('title')</title>
</head>
<body>
#section('content')
</div>
</body>
</html>
View:
#section('content')
#if(session('message'))
<p>{{session('message')}}</p>
#endif
#foreach ($posts as $post)
<h2> {{$post->title}}</h2>
<p>{{$post->body}}</p>
Edit
Delete
#endforeach
#endsection
I have used this code and get white screen how to solve this problem
make layout folder and layout file get only white screen no any error and output
MASTE PAGE:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="csrf-token" content="{{csrf_token()}}">
#yield('metas')
#yield('head')
#yield('style')
</head>
<title>#yield('title')</title>
<body class="skin-blue sidebar-mini">
#yield('body')
</body>
<footer>
#yield('footer')
#yield('script_whole')
</footer>
</html>
CHILD PAGES:
#extends('path.to.master_page')
#section('head')
//head elemetns here
#endsection
#section('style')
//style here
#endsection
#section('title', 'my_title')
#section('content')
//content elemetns here
#endsection
#section('footer')
//footer elemetns here
#endsection
#section('script_whole')
//scripts here
#endsection
and now every page that extends from MASTER_page, so should use #section
Instead of using
#section('content');
in main blade file use
#yield('content');
I have done literally everything to make it work but it is not working yet
I loaded from cdn just as it is in the preview documentation
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-
plugin-image-preview.css" rel="stylesheet">
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-
preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
To enhance into a filepond element I have
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>
and lastly
<input type="file">
It just shows up as a file and not with image preview. What am I missing?
The plugins have not been registered with FilePond.
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond Plugin Image Preview Demo</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<input type="file"/>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('input[type="file"]');
// Create the FilePond instance
const pond = FilePond.create(inputElement);
</script>
</body>
</html>
Live demo here: https://pqina.github.io/filepond-plugin-image-preview/
I'm looking at the docs and I see how this is confusing, will improve them as soon as I have some time.
I want to make a pdf invoice from blade template using Dompdf in Laravel 5.5.
The problem is when clicking on the download button the page is loading and after ~3 min i the pdf starts downloading.
Why is it taking so long?
the download link
<i class="fa fa-file-pdf-o"></i> Download Invoice
web route:
Route::get('/order/download-invoice/{OrderID}', 'Admin\AdminOrderController#downloadOrderInvoice')->name('admin.download-invoice');
a simple template (invoice.blade.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<title>Invoice</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" media="screen">
</head>
<body>
<div>{{ $invoice->InvoiceTitle }} </div>
</body>
</html>
donwload invoice controller function:
use Barryvdh\DomPDF\Facade as PDF;
public function downloadOrderInvoice($OrderID){
$invoice = Invoice::where('OrderID', $OrderID)->first();
$pdf = PDF::loadView('invoice.invoice', compact('invoice'))->setPaper('a4', 'landscape');
return $pdf->download('invoice.pdf');
}
What i did wrong? Did i miss something?
UPDATE
clear the header and using EXTERNAL CDN bootstrap works.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
Why is not using the local bootstrap using asset???
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
I want to use Laravel Passport in my project, I have followed this tutorial of Laravel Passport https://laravel.com/docs/5.3/passport.
After following this tutorial, I am getting Uncaught ReferenceError: require is not defined error.
Please have a look into my files :
gulpfile.js
var elixir = require('laravel-elixir');
require('laravel-elixir-webpack');
elixir(function(mix) {
mix.scripts('app.js');
mix.styles([
'bootstrap.min.css',
'font-awesome.min.css',
'gentelella.min.css'
],'public/css/app.css');
});
resource/assets/js/app.js
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#manage-passport'
});
home.blade.php
#extends('layouts.blank')
#section('content')
<div class="container" id="manage-passport">
<!-- let people make clients -->
<passport-clients></passport-clients>
<!-- list of clients people have authorized to access our account -->
<passport-authorized-clients></passport-authorized-clients>
<!-- make it simple to generate a token right in the UI to play with -->
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
#stop
blank.blade.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Passport! | </title>
<meta name="token" id="token" value="{{ csrf_token() }}">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
#yield('content')
</div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="js/gentelella.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
#stack('scripts')
</body>
Maybe the problem in the absence of token?
blank.blade.php
<script>
window.Laravel = {!! json_encode(['csrfToken' => csrf_token()]) !!}
</script>
also, check whether the transmitted parameters such as token
Vue.http.interceptors.push((request, next) => {
request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
next();
});
I am having trouble getting hot reloading to work with my laravel app.
//laravel homepage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div id="root"></div>
<?php
if (App::isLocal()):
?>
<script type="text/javascript" src="http://localhost:3000/static/bundle.js"></script>
<?php else: ?>
<script type="text/javascript" src="/dist/bundle.js"></script>
<?php endif; ?>
</body>
</html>
When I go to my homestead laravel backend page (localhost:8000), everything works fine, but there's no hot reloading when I change react components.
When I go directly to the dev-server http://localhost:3000 I get hot reloading.
I am using the react transform boilerplate: https://github.com/gaearon/react-transform-boilerplate
How can I get the backend laravel page to reload the bundle?
change
src="http://localhost:3000/static/bundle.js"
to
src="{{url('static/bundle.js)'}}"
and
src="/dist/bundle.js"
to
src="{{url('/dist/bundle.js')}}"