diff --git a/resources/js/clients/invoices/payment.js b/resources/js/clients/invoices/payment.js
index 588a3dfcfc58..7009d8abe044 100644
--- a/resources/js/clients/invoices/payment.js
+++ b/resources/js/clients/invoices/payment.js
@@ -9,11 +9,57 @@
  */
 
 class Payment {
-    constructor(displayTerms, displaySignature) {
+    constructor(displayTerms, displaySignature, displayRff) {
         this.shouldDisplayTerms = displayTerms;
         this.shouldDisplaySignature = displaySignature;
-        this.termsAccepted = false;
+        this.shouldDisplayRff = displayRff;
+
         this.submitting = false;
+        this.steps = new Map()
+
+        if (this.shouldDisplayRff) {
+            this.steps.set("rff", {
+                element: document.getElementById('displayRequiredFieldsModal'),
+                callback: () => {
+                    const fields = {
+                        firstName: document.querySelector('input[name="rff_first_name"]'),
+                        lastName: document.querySelector('input[name="rff_last_name"]'),
+                        email: document.querySelector('input[name="rff_email"]'),
+                    }
+
+                    if (fields.firstName) {
+                        document.querySelector('input[name="contact_first_name"]').value = fields.firstName.value;
+                    }
+
+                    if (fields.lastName) {
+                        document.querySelector('input[name="contact_last_name"]').value = fields.lastName.value;
+                    }
+
+                    if (fields.email) {
+                        document.querySelector('input[name="contact_email"]').value = fields.email.value;
+                    }
+                }
+            });
+        }
+
+        if (this.shouldDisplaySignature) {
+            this.steps.set("signature", {
+                element: document.getElementById('displaySignatureModal'),
+                boot: () => this.signaturePad = new SignaturePad(
+                    document.getElementById("signature-pad"),
+                    {
+                        penColor: "rgb(0, 0, 0)"
+                    }
+                ),
+                callback: () => document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL(),
+            });
+        }
+
+        if (this.shouldDisplayTerms) {
+            this.steps.set("terms", {
+                element: document.getElementById('displayTermsModal'),
+            });
+        }
     }
 
     handleMethodSelect(element) {
@@ -22,54 +68,30 @@ class Payment {
             element.dataset.companyGatewayId;
         document.getElementById("payment_method_id").value =
             element.dataset.gatewayTypeId;
-
-        if (this.shouldDisplaySignature && !this.shouldDisplayTerms) {
-
-            if(this.signaturePad && this.signaturePad.isEmpty())
-                alert("Please sign");
-
-            this.displayTerms();
-
-            document
-                .getElementById("accept-terms-button")
-                .addEventListener("click", () => {
-                    this.termsAccepted = true;
-                    this.submitForm();
-                });
+        
+        if (this.steps.size === 0) {
+            return this.submitForm();
         }
 
-        if (!this.shouldDisplaySignature && this.shouldDisplayTerms) {
-            this.displaySignature();
+        const next = this.steps.values().next().value;
 
-            document
-                .getElementById("signature-next-step")
-                .addEventListener("click", () => {
-                    document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
-                    this.submitForm();
-                });
+        next.element.removeAttribute("style");
+        
+        if (next.boot) {
+            next.boot();
         }
 
-        if (this.shouldDisplaySignature && this.shouldDisplayTerms) {
-            this.displaySignature();
+        next.element.querySelector('#next-step').addEventListener('click', () => {
+            next.element.setAttribute("style", "display: none;");
 
-            document
-                .getElementById("signature-next-step")
-                .addEventListener("click", () => {
-                    this.displayTerms();
+            this.steps = new Map(Array.from(this.steps.entries()).slice(1));
 
-                    document
-                        .getElementById("accept-terms-button")
-                        .addEventListener("click", () => {
-                            document.querySelector('input[name="signature"').value = this.signaturePad.toDataURL();
-                            this.termsAccepted = true;
-                            this.submitForm();
-                        });
-                });
-        }
+            if (next.callback) {
+                next.callback();
+            }
 
-        if (!this.shouldDisplaySignature && !this.shouldDisplayTerms) {
-            this.submitForm();
-        }
+            this.handleMethodSelect(element);
+        });
     }
 
     submitForm() {
@@ -78,33 +100,6 @@ class Payment {
         document.getElementById("payment-form").submit();
     }
 
-    displayTerms() {
-        let displayTermsModal = document.getElementById("displayTermsModal");
-        displayTermsModal.removeAttribute("style");
-    }
-
-    displaySignature() {
-        document.getElementById("signature-next-step").disabled = true;
-
-        let displaySignatureModal = document.getElementById(
-            "displaySignatureModal"
-        );
-        displaySignatureModal.removeAttribute("style");
-
-        const signaturePad = new SignaturePad(
-            document.getElementById("signature-pad"),
-            {
-                penColor: "rgb(0, 0, 0)"
-            }
-        );
-
-        signaturePad.onEnd = function(){  
-            document.getElementById("signature-next-step").disabled = false;
-        };
-
-        this.signaturePad = signaturePad;
-    }
-
     handle() {
 
         document
@@ -124,5 +119,6 @@ const signature = document.querySelector(
 ).content;
 
 const terms = document.querySelector('meta[name="show-invoice-terms"]').content;
+const rff = document.querySelector('meta[name="show-required-fields-form"]').content;
 
-new Payment(Boolean(+signature), Boolean(+terms)).handle();
+new Payment(Boolean(+terms), Boolean(+signature), Boolean(+rff)).handle();