Laravel Notifications | Laravel Notify Using GMail to Send Invoice Details:
Laravel Notifications To Send Mail When Order Placed:
Laravel notifications Using Gmail:
Laravel notifications should be short, informational messages that notify users of something that occurred in your application. For example, if you are writing a billing application, you might send an "Invoice Paid" notification to your users via the email and SMS channels.
A single class, usually kept in the app/Notifications directory, represents each notification in Laravel. If you don't see this directory in your application, don't worry; the make: command will create it for you.alert Craftsman's directive:
Laravel Notify to Send Invoice Mail to user Whenever Order Placed :
Create OrderController to Load Cartpage and Invoice Page:
php artisan make:Controller OrderController
<?php
namespace App\Http\Controllers;
use App\Models\OrderModel;
use App\Events\orderPlaced;
use Illuminate\Http\Request;
use App\Models\User;
use App\Notifications\DepositNotiy;
use Illuminate\Support\Facades\Auth;
use Notification;
use App\Notifications\InvoiceOrder;
class OrderController extends Controller
{
//
public function index(Request $request){
return view("Order");
}
public function InvoiceSend(Request $request){
$invoice=$request->all();
User::find(Auth::user()->id)->notify(new InvoiceOrder($request->all()));
if($invoice){
return response()->json([
"class"=>'Success',
"message"=>"Inovice Sent to Your Sucessfully",
"data"=>$invoice
]);
}
}
}
Create Notifcation :
Command For Create Notification:
In Via Function We Can Config :
return ['mail','database'];
php artisan make:notification InvoiceOrder
<?php
namespace App\Notifications;
use Illuminate\Notifications\Notification;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
class InvoiceOrder extends Notification implements ShouldQueue
{
use Queueable;
public $orderdetails =[];
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct($orderdetails)
{
//
$this->orderdetails=$orderdetails;
}
/**
* Get the notification's delivery channels.
*
* @param mixed $notifiable
* @return array
*/
public function via($notifiable)
{
return ['mail'];
}
/**
* Get the mail representation of the notification.
*
* @param mixed $notifiable
* @return \Illuminate\Notifications\Messages\MailMessage
*/
public function toMail($notifiable)
{
return (new MailMessage)
->greeting('Hello!',$notifiable->name)
->line('One of your invoices has been paid!')
->subject('Invoice of Order')
->view('invoicedetails',["invoice"=> $this->orderdetails])
->line('Thank you for using our application!');
}
/**
* Get the array representation of the notification.
*
* @param mixed $notifiable
* @return array
*/
public function toArray($notifiable)
{
return [
//
];
}
}
Web,php:
Route::any('/product_data', [App\Http\Controllers\OrderController::class, 'index'])->name('orderdata');
Route::any('/InvoiceOrder', [App\Http\Controllers\OrderController::class, 'InvoiceSend'])->name('InvoiceOrder');
Route::any('/Invoicemail', [App\Http\Controllers\OrderController::class, 'Invoicemail'])->name('Invoicemail');
Order.Blade.php
Whenever Order Placed it will call the Notification Method and Send Mail Using MailMessage Method:
@extends('layouts.app')
@section('content')
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
body{
/* background: url('http://all4desktop.com/data_images/original/4236532-background-images.jpg'); */
font-family: 'Roboto Condensed', sans-serif;
color: #262626;
margin: 5% 0;
}
.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px)
{
.container{
max-width: 1140px;
}
}
.d-flex{
display: flex;
flex-direction: row;
background: #f6f6f6;
border-radius: 0 0 5px 5px;
padding: 25px;
}
form{
flex: 4;
}
.Yorder{
flex: 2;
}
.title{
background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #5195A8), color-stop(100, #70EAFF));
background: -moz-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
background: -ms-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
background: -o-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
background: linear-gradient(to bottom right, #5195A8 0%, #70EAFF 100%);
border-radius:5px 5px 0 0 ;
padding: 20px;
color: #f6f6f6;
}
h2{
margin: 0;
padding-left: 15px;
}
.required{
color: red;
}
label, table{
display: block;
margin: 15px;
}
label>span{
float: left;
width: 25%;
margin-top: 12px;
padding-right: 10px;
}
input[type="text"], input[type="tel"], input[type="email"], select
{
width: 70%;
height: 30px;
padding: 5px 10px;
margin-bottom: 10px;
border: 1px solid #dadada;
color: #888;
}
select{
width: 72%;
height: 45px;
padding: 5px 10px;
margin-bottom: 10px;
}
.Yorder{
margin-top: 15px;
height: 600px;
padding: 20px;
border: 1px solid #dadada;
}
table{
margin: 0;
padding: 0;
}
th{
border-bottom: 1px solid #dadada;
padding: 10px 0;
}
tr>td:nth-child(1){
text-align: left;
color: #2d2d2a;
}
tr>td:nth-child(2){
text-align: right;
color: #52ad9c;
}
td{
border-bottom: 1px solid #dadada;
padding: 25px 25px 25px 0;
}
p{
display: block;
color: #888;
margin: 0;
padding-left: 25px;
}
.Yorder>div{
padding: 15px 0;
}
button{
width: 100%;
margin-top: 10px;
padding: 10px;
border: none;
border-radius: 30px;
background: #52ad9c;
color: #fff;
font-size: 15px;
font-weight: bold;
}
button:hover{
cursor: pointer;
background: #428a7d;
}
</style>
<div class="container">
<div class="title">
<h2>Product Order Form</h2>
</div>
<div class="d-flex">
<form action="" method="">
<label>
<span class="fname">First Name <span class="required">*</span></span>
<input type="text" name="fname" value="Karthick">
</label>
<label>
<span class="lname">Last Name <span class="required">*</span></span>
<input type="text" name="lname" value="A">
</label>
<label>
<span>Company Name (Optional)</span>
<input type="text" name="cn" value="xxxxxxxxx">
</label>
<label>
<span>Country <span class="required">*</span></span>
<select name="selection" value="India">
<option value="select">Select a country...</option>
<option value="AFG">Afghanistan</option>
<option value="ALA">Åland Islands</option>
<option value="ALB">Albania</option>
<option value="DZA">Algeria</option>
<option value="ASM">American Samoa</option>
<option value="AND">Andorra</option>
<option value="AGO">Angola</option>
<option value="AIA">Anguilla</option>
<option value="ATA">Antarctica</option>
<option value="ATG">Antigua and Barbuda</option>
<option value="ARG">Argentina</option>
<option value="ARM">Armenia</option>
<option value="ABW">Aruba</option>
<option value="AUS">Australia</option>
<option value="AUT">Austria</option>
<option value="AZE">Azerbaijan</option>
<option value="BHS">Bahamas</option>
<option value="BHR">Bahrain</option>
<option value="BGD">Bangladesh</option>
<option value="BRB">Barbados</option>
<option value="BLR">Belarus</option>
<option value="BEL">Belgium</option>
<option value="BLZ">Belize</option>
<option value="BEN">Benin</option>
<option value="BMU">Bermuda</option>
<option value="BTN">Bhutan</option>
<option value="BOL">Bolivia, Plurinational State of</option>
<option value="BES">Bonaire, Sint Eustatius and Saba</option>
<option value="BIH">Bosnia and Herzegovina</option>
<option value="BWA">Botswana</option>
<option value="BVT">Bouvet Island</option>
<option value="BRA">Brazil</option>
<option value="IOT">British Indian Ocean Territory</option>
<option value="BRN">Brunei Darussalam</option>
<option value="BGR">Bulgaria</option>
<option value="BFA">Burkina Faso</option>
<option value="BDI">Burundi</option>
<option value="KHM">Cambodia</option>
<option value="CMR">Cameroon</option>
<option value="CAN">Canada</option>
<option value="CPV">Cape Verde</option>
<option value="CYM">Cayman Islands</option>
<option value="CAF">Central African Republic</option>
<option value="TCD">Chad</option>
<option value="CHL">Chile</option>
<option value="CHN">China</option>
<option value="CXR">Christmas Island</option>
<option value="CCK">Cocos (Keeling) Islands</option>
<option value="COL">Colombia</option>
<option value="COM">Comoros</option>
<option value="COG">Congo</option>
<option value="COD">Congo, the Democratic Republic of the</option>
<option value="COK">Cook Islands</option>
<option value="CRI">Costa Rica</option>
<option value="CIV">Côte d'Ivoire</option>
<option value="HRV">Croatia</option>
<option value="CUB">Cuba</option>
<option value="CUW">Curaçao</option>
<option value="CYP">Cyprus</option>
<option value="CZE">Czech Republic</option>
<option value="DNK">Denmark</option>
<option value="DJI">Djibouti</option>
<option value="DMA">Dominica</option>
<option value="DOM">Dominican Republic</option>
<option value="ECU">Ecuador</option>
<option value="EGY">Egypt</option>
<option value="SLV">El Salvador</option>
<option value="GNQ">Equatorial Guinea</option>
<option value="ERI">Eritrea</option>
<option value="EST">Estonia</option>
<option value="ETH">Ethiopia</option>
<option value="FLK">Falkland Islands (Malvinas)</option>
<option value="FRO">Faroe Islands</option>
<option value="FJI">Fiji</option>
<option value="FIN">Finland</option>
<option value="FRA">France</option>
<option value="GUF">French Guiana</option>
<option value="PYF">French Polynesia</option>
<option value="ATF">French Southern Territories</option>
<option value="GAB">Gabon</option>
<option value="GMB">Gambia</option>
<option value="GEO">Georgia</option>
<option value="DEU">Germany</option>
<option value="GHA">Ghana</option>
<option value="GIB">Gibraltar</option>
<option value="GRC">Greece</option>
<option value="GRL">Greenland</option>
<option value="GRD">Grenada</option>
<option value="GLP">Guadeloupe</option>
<option value="GUM">Guam</option>
<option value="GTM">Guatemala</option>
<option value="GGY">Guernsey</option>
<option value="GIN">Guinea</option>
<option value="GNB">Guinea-Bissau</option>
<option value="GUY">Guyana</option>
<option value="HTI">Haiti</option>
<option value="HMD">Heard Island and McDonald Islands</option>
<option value="VAT">Holy See (Vatican City State)</option>
<option value="HND">Honduras</option>
<option value="HKG">Hong Kong</option>
<option value="HUN">Hungary</option>
<option value="ISL">Iceland</option>
<option value="IND">India</option>
<option value="IDN">Indonesia</option>
<option value="IRN">Iran, Islamic Republic of</option>
<option value="IRQ">Iraq</option>
<option value="IRL">Ireland</option>
<option value="IMN">Isle of Man</option>
<option value="ISR">Israel</option>
<option value="ITA">Italy</option>
<option value="JAM">Jamaica</option>
<option value="JPN">Japan</option>
<option value="JEY">Jersey</option>
<option value="JOR">Jordan</option>
<option value="KAZ">Kazakhstan</option>
<option value="KEN">Kenya</option>
<option value="KIR">Kiribati</option>
<option value="PRK">Korea, Democratic People's Republic of</option>
<option value="KOR">Korea, Republic of</option>
<option value="KWT">Kuwait</option>
<option value="KGZ">Kyrgyzstan</option>
<option value="LAO">Lao People's Democratic Republic</option>
<option value="LVA">Latvia</option>
<option value="LBN">Lebanon</option>
<option value="LSO">Lesotho</option>
<option value="LBR">Liberia</option>
<option value="LBY">Libya</option>
<option value="LIE">Liechtenstein</option>
<option value="LTU">Lithuania</option>
<option value="LUX">Luxembourg</option>
<option value="MAC">Macao</option>
<option value="MKD">Macedonia, the former Yugoslav Republic of</option>
<option value="MDG">Madagascar</option>
<option value="MWI">Malawi</option>
<option value="MYS">Malaysia</option>
<option value="MDV">Maldives</option>
<option value="MLI">Mali</option>
<option value="MLT">Malta</option>
<option value="MHL">Marshall Islands</option>
<option value="MTQ">Martinique</option>
<option value="MRT">Mauritania</option>
<option value="MUS">Mauritius</option>
<option value="MYT">Mayotte</option>
<option value="MEX">Mexico</option>
<option value="FSM">Micronesia, Federated States of</option>
<option value="MDA">Moldova, Republic of</option>
<option value="MCO">Monaco</option>
<option value="MNG">Mongolia</option>
<option value="MNE">Montenegro</option>
<option value="MSR">Montserrat</option>
<option value="MAR">Morocco</option>
<option value="MOZ">Mozambique</option>
<option value="MMR">Myanmar</option>
<option value="NAM">Namibia</option>
<option value="NRU">Nauru</option>
<option value="NPL">Nepal</option>
<option value="NLD">Netherlands</option>
<option value="NCL">New Caledonia</option>
<option value="NZL">New Zealand</option>
<option value="NIC">Nicaragua</option>
<option value="NER">Niger</option>
<option value="NGA">Nigeria</option>
<option value="NIU">Niue</option>
<option value="NFK">Norfolk Island</option>
<option value="MNP">Northern Mariana Islands</option>
<option value="NOR">Norway</option>
<option value="OMN">Oman</option>
<option value="PAK">Pakistan</option>
<option value="PLW">Palau</option>
<option value="PSE">Palestinian Territory, Occupied</option>
<option value="PAN">Panama</option>
<option value="PNG">Papua New Guinea</option>
<option value="PRY">Paraguay</option>
<option value="PER">Peru</option>
<option value="PHL">Philippines</option>
<option value="PCN">Pitcairn</option>
<option value="POL">Poland</option>
<option value="PRT">Portugal</option>
<option value="PRI">Puerto Rico</option>
<option value="QAT">Qatar</option>
<option value="REU">Réunion</option>
<option value="ROU">Romania</option>
<option value="RUS">Russian Federation</option>
<option value="RWA">Rwanda</option>
<option value="BLM">Saint Barthélemy</option>
<option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KNA">Saint Kitts and Nevis</option>
<option value="LCA">Saint Lucia</option>
<option value="MAF">Saint Martin (French part)</option>
<option value="SPM">Saint Pierre and Miquelon</option>
<option value="VCT">Saint Vincent and the Grenadines</option>
<option value="WSM">Samoa</option>
<option value="SMR">San Marino</option>
<option value="STP">Sao Tome and Principe</option>
<option value="SAU">Saudi Arabia</option>
<option value="SEN">Senegal</option>
<option value="SRB">Serbia</option>
<option value="SYC">Seychelles</option>
<option value="SLE">Sierra Leone</option>
<option value="SGP">Singapore</option>
<option value="SXM">Sint Maarten (Dutch part)</option>
<option value="SVK">Slovakia</option>
<option value="SVN">Slovenia</option>
<option value="SLB">Solomon Islands</option>
<option value="SOM">Somalia</option>
<option value="ZAF">South Africa</option>
<option value="SGS">South Georgia and the South Sandwich Islands</option>
<option value="SSD">South Sudan</option>
<option value="ESP">Spain</option>
<option value="LKA">Sri Lanka</option>
<option value="SDN">Sudan</option>
<option value="SUR">Suriname</option>
<option value="SJM">Svalbard and Jan Mayen</option>
<option value="SWZ">Swaziland</option>
<option value="SWE">Sweden</option>
<option value="CHE">Switzerland</option>
<option value="SYR">Syrian Arab Republic</option>
<option value="TWN">Taiwan, Province of China</option>
<option value="TJK">Tajikistan</option>
<option value="TZA">Tanzania, United Republic of</option>
<option value="THA">Thailand</option>
<option value="TLS">Timor-Leste</option>
<option value="TGO">Togo</option>
<option value="TKL">Tokelau</option>
<option value="TON">Tonga</option>
<option value="TTO">Trinidad and Tobago</option>
<option value="TUN">Tunisia</option>
<option value="TUR">Turkey</option>
<option value="TKM">Turkmenistan</option>
<option value="TCA">Turks and Caicos Islands</option>
<option value="TUV">Tuvalu</option>
<option value="UGA">Uganda</option>
<option value="UKR">Ukraine</option>
<option value="ARE">United Arab Emirates</option>
<option value="GBR">United Kingdom</option>
<option value="USA">United States</option>
<option value="UMI">United States Minor Outlying Islands</option>
<option value="URY">Uruguay</option>
<option value="UZB">Uzbekistan</option>
<option value="VUT">Vanuatu</option>
<option value="VEN">Venezuela, Bolivarian Republic of</option>
<option value="VNM">Viet Nam</option>
<option value="VGB">Virgin Islands, British</option>
<option value="VIR">Virgin Islands, U.S.</option>
<option value="WLF">Wallis and Futuna</option>
<option value="ESH">Western Sahara</option>
<option value="YEM">Yemen</option>
<option value="ZMB">Zambia</option>
<option value="ZWE">Zimbabwe</option>
</select>
</label>
<label>
<span>Street Address <span class="required">*</span></span>
<input type="text" name="houseadd" placeholder="House number and street name" value="xxxxxxxxx" required>
</label>
<label>
<span> </span>
<input type="text" name="apartment" value="xxxxxxxxx" placeholder="Apartment, suite, unit etc. (optional)">
</label>
<label>
<span>Town / City <span class="required">*</span></span>
<input type="text" name="city" value="xxxxxxxxx">
</label>
<label>
<span>State / County <span class="required">*</span></span>
<input type="text" name="city" value="xxxxxxxxx">
</label>
<label>
<span>Postcode / ZIP <span class="required">*</span></span>
<input type="text" name="city" value="xxxxxxxxx">
</label>
<label>
<span>Phone <span class="required">*</span></span>
<input type="tel" name="city" value="xxxxxxxxx">
</label>
<label>
<span>Email Address <span class="required">*</span></span>
<input type="email" name="city" value="xxxxxxxxx">
</label>
</form>
<div class="Yorder">
<table>
<tr class="heading">
<img
src="{{asset('asset/kMartlog.png')}}"
style="width: 100%; max-width: 300px"
/>
<td>Payment Method</td>
<td>Check #</td>
</tr>
<tr class="details">
<td>Check</td>
<td>1000</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Price</td>
</tr>
<tr class="item">
<td>Website design</td>
<td>₹300.00</td>
</tr>
<tr class="item">
<td>Hosting (3 months)</td>
<td>₹75.00</td>
</tr>
<tr class="item last">
<td>Domain name (1 year)</td>
<td>₹10.00</td>
</tr>
<tr class="total">
<td></td>
<td>Total: ₹385.00</td>
</tr>
</table><br>
<button type="button" class="cls_order">Place Order</button>
</div>
</div>
</div>
<script>
$(".cls_order").on('click',function(){
var form_details = $("form").serializeArray();
console.log(form_details);
$.ajax({
method:'',
url:'{{route("InvoiceOrder")}}',
data:form_details,
success:function(res){
console.log(res.message);
$.notify(res.message, 'success');
}
});
});
</script>
@endsection
invoicedetails.blade.php:
Invoice details from the Invoice Notify :
Data Send from Notification is Appended in Invoicedetails Page:
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Invoice Template</title>
<style>
.invoice-details {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.20);
font-size: 18px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica';
color: #555;
}
.invoice-details table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-details table td {
padding: 5px;
vertical-align: top;
}
.invoice-details table tr td:nth-child(2) {
text-align: right;
}
.invoice-details table tr.top table td {
padding-bottom: 20px;
}
.invoice-details table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-details table tr.information table td {
padding-bottom: 40px;
}
.invoice-details table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-details table tr.details td {
padding-bottom: 20px;
}
.invoice-details table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-details table tr.item.last td {
border-bottom: none;
}
.invoice-details table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
.invoice-details table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-details table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-details.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-details.rtl table {
text-align: right;
}
.invoice-details.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
<div class="invoice-details">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img
src="{{asset('kMartlog.png')}}"
style="width: 100%; max-width: 300px"
/>
</td>
<td>
Invoice #: 123<br />
Created: January 1, 2024<br />
Due: February 1, 2024
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
xxxxxxxx, Inc.<br />
12345 Road<br />
Greensroad, Ch 12345
</td>
<td>
yyyyyyy.<br />
ykkkkk<br />
xxxxxxx@example.com
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>Payment Method</td>
<td>Check #</td>
</tr>
<tr class="details">
<td>Check</td>
<td>1000</td>
</tr>
<tr class="heading">
<td>Item</td>
<td>Price</td>
</tr>
<tr class="item">
<td>Website design</td>
<td>₹300.00</td>
</tr>
<tr class="item">
<td>Hosting (3 months)</td>
<td>₹75.00</td>
</tr>
<tr class="item last">
<td>Domain name (1 year)</td>
<td>₹10.00</td>
</tr>
<tr class="total">
<td></td>
<td>Total: ₹385.00</td>
</tr>
</table>
</div>
</body>
</html>
.ENV File to Config in Gmail:
MAIL_PASSWORD=ybjffuuvxbbcxekgs
Has to be Generate in Gmail Account Mentioned Below
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=xxxxxxxx.com
MAIL_PASSWORD=ybjffuuvxbbcxekgs
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=kxxxxxxxx.com
MAIL_FROM_NAME="${APP_NAME}"
Step1: Chrome Account Mail Password Generate:
To Enable 2 Step verification: https://myaccount.google.com/
Click->Security:
Click->2 Step Verification:
Click->Click app Password and Create App Password to Connect Gmail to Project:
Invoice Blade Page in Gmail:
Comments
Post a Comment