diff --git a/app/Classes/Modules/Transactions/ControllersLogic/DeleteTransactionLogic.php b/app/Classes/Modules/Transactions/ControllersLogic/DeleteTransactionLogic.php
new file mode 100644
index 00000000..56d24523
--- /dev/null
+++ b/app/Classes/Modules/Transactions/ControllersLogic/DeleteTransactionLogic.php
@@ -0,0 +1,52 @@
+<?php
+
+
+namespace App\Classes\Modules\Transactions\ControllersLogic;
+
+use App\Classes\General\Abstracts\AbstractControllerLogic;
+use App\Classes\Modules\Transactions\Services\FetchesTransaction;
+use App\Classes\Modules\Transactions\Services\UpdatesTransactionStatus;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class DeleteTransactionLogic extends AbstractControllerLogic
+{
+
+    /**
+     * @return array
+     */
+    protected function notification():array {
+        return [
+            'title' => 'Delete Transaction',
+            'message' => 'You have successfully deleted the transaction'
+        ];
+    }
+
+    /** @var FetchesTransaction */
+    private $fetchesTransaction;
+
+    /** @var UpdatesTransactionStatus */
+    private $updatesTransactionStatus;
+
+
+    /**
+     * SuspendTransactionLogic constructor.
+     * @param FetchesTransaction $fetchesTransaction
+     * @param UpdatesTransactionStatus $updatesTransactionStatus
+     */
+    public function __construct(FetchesTransaction $fetchesTransaction, UpdatesTransactionStatus $updatesTransactionStatus)
+    {
+        $this->fetchesTransaction = $fetchesTransaction;
+        $this->updatesTransactionStatus = $updatesTransactionStatus;
+    }
+
+
+    public function logic(Request $request) : JsonResponse
+    {
+        $transaction = $this->fetchesTransaction->execute(['id' => $request->route('id')]);
+
+        $transaction->delete();
+
+        return $this->response([]);
+    }
+}
diff --git a/app/Http/Controllers/Transactions/DeleteTransactionController.php b/app/Http/Controllers/Transactions/DeleteTransactionController.php
new file mode 100644
index 00000000..a9dee9ba
--- /dev/null
+++ b/app/Http/Controllers/Transactions/DeleteTransactionController.php
@@ -0,0 +1,21 @@
+<?php
+
+
+namespace App\Http\Controllers\Transactions;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use App\Classes\Modules\Transactions\ControllersLogic\DeleteTransactionLogic;
+
+
+class DeleteTransactionController
+{
+    /**
+     * @param Request $request
+     * @param DeleteTransactionLogic $logic
+     * @return JsonResponse
+     */
+    public function delete(Request $request, DeleteTransactionLogic $logic) : JsonResponse {
+        return $logic->execute($request);
+    }
+}
diff --git a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
index a5ede524..f64b006c 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/CustomerPaymentsBillingComponent.vue
@@ -63,6 +63,14 @@
                                 </div>
                             </div>
                         </div>
+                        <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center" v-if="$store.getters.isSuperAdmin">
+                            <span class="d-inline-block m-r-15 text-primary bold text-underline pointer requestModal" data-type="deleteInvoice">
+                                <i class="fa fa-close"></i>
+                            </span>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteInvoice">
+                                <delete-invoice-form-component :data="item" :section="section"></delete-invoice-form-component>
+                            </modal-component>
+                        </div>
                         <div class="col-auto hide">
                             <div class="btn btn-sm all-caps b-rad-none btn-block" :class="{'btn-success': !expanded, 'btn-default': expanded}" @click="expanded = !expanded">
                                 {{ expanded ? 'Cancel' : 'Make Payment' }}</div>
diff --git a/resources/assets/vue/components/paymentsBilling/forms/DeleteInvoiceFormComponent.vue b/resources/assets/vue/components/paymentsBilling/forms/DeleteInvoiceFormComponent.vue
new file mode 100644
index 00000000..b8c13ed8
--- /dev/null
+++ b/resources/assets/vue/components/paymentsBilling/forms/DeleteInvoiceFormComponent.vue
@@ -0,0 +1,31 @@
+<template>
+    <div class="row" @keyup.enter="submitForm">
+        <div class="col bg-white padding-40 b-rad-lg">
+            <div class="row">
+                <div class="col text-center">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h5 class="all-caps">Delete Invoice</h5>
+                            <div class="fs-11">Are you sure you want to delete this invoice?</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-danger w-100 btn-sm" @click="submit(route('api.transaction.delete', data.id), 'delete', section, true, true)">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import modalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [modalFormHandler]
+    }
+
+</script>
diff --git a/routes/transaction.php b/routes/transaction.php
index 3d847135..3ae8e5d2 100644
--- a/routes/transaction.php
+++ b/routes/transaction.php
@@ -6,6 +6,7 @@ Route::group(['prefix' => 'transactions', 'namespace' => 'Transactions', 'as' =>
 
     Route::get('/list', 'ListTransactionsController@list')->name('list');
     Route::delete('/suspend/{id}', 'SuspendTransactionController@suspend')->name('suspend');
+    Route::delete('/delete/{id}', 'DeleteTransactionController@delete')->name('delete');
     Route::put('{id}/status/update/{status}', 'UpdateTransactionStatusController@update')->where('status', 'approve|expire|reject')->name('update');
 
     Route::group(['prefix' => 'payment', 'as' => 'payment.'], function () {