diff --git a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
index 494427cb..415655a5 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentProofComponent.vue
@@ -41,6 +41,14 @@
                                         </div>
                                     </div>
                                     <bank-in-component :data="item"></bank-in-component>
+                                    <div class="row" v-if="item.status === 2">
+                                        <div class="col">
+                                            <span class="text-complete fs-10 pointer requestModal" data-type="topUpModal">Cancel this order?</span>
+                                        </div>
+                                    </div>
+                                    <modal-component styleType="fill-in" type="topUpModal">
+                                        <delete-transaction-form-component :data="item" section="section" class="text-center"></delete-transaction-form-component>
+                                    </modal-component>
                                 </div>
                             </div>
                         </div>
diff --git a/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue b/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue
new file mode 100644
index 00000000..cf618df1
--- /dev/null
+++ b/resources/assets/vue/components/bookings/forms/DeleteTransactionFormComponent.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <loading-component style="height: 300px; top: 0;" key="1" color="success" v-show="isLoading" ></loading-component>
+            <div class="row justify-content-center" v-show="!isLoading">
+                <div class="col">
+                    <div class="row m-b-20">
+                        <div class="col">
+                            <h3 class="all-caps">Are you Sure?</h3>
+                            <div class="fs-11">Are you sure you want to delete this transaction? You will not be able to recover your booking after confirming your action.</div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <div class="btn btn-sm btn-success btn-block b-rad-none" data-dismiss="modal">Cancel</div>
+                        </div>
+                        <div class="col p-l-5">
+                            <div class="btn btn-sm btn-danger btn-block b-rad-none" @click="submit(route('api.transaction.bill.delete', item.id), 'delete', section, true, true)">Delete</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    export default {
+        mixins: [componentHandler, ModalFormHandler]
+
+    }
+</script>
\ No newline at end of file