First attempt: Add a continue button next to the email input

modules/ppcp-axo/resources/css/styles.scss

@@ -89,3 +89,31 @@
 		max-height: 25px;
 	}
 }
+
+#billing_email_field .woocommerce-input-wrapper {
+	display: flex;
+	align-items: center;
+}
+
+#billing_email_field .woocommerce-input-wrapper input {
+	flex: 1;
+	margin-right: 10px;
+}
+
+.email-submit-button {
+	padding: 5px 10px;
+	background-color: #007cba;
+	color: white;
+	border: none;
+	border-radius: 3px;
+	cursor: pointer;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.3s ease; /* Add transition for opacity */
+}
+
+#billing_email_field .woocommerce-input-wrapper.show-button .email-submit-button {
+	opacity: 1; /* Show the button */
+}
+
+

modules/ppcp-axo/resources/js/AxoManager.js

@@ -245,6 +245,7 @@ class AxoManager {
             this.showAxoEmailField();
             this.el.watermarkContainer.show();
 
+
             // Move watermark to after email.
             this.$(this.el.fieldBillingEmail.selector).append(
                 this.$(this.el.watermarkContainer.selector)
@@ -280,6 +281,7 @@ class AxoManager {
 
         if (scenario.axoPaymentContainer) {
             this.el.paymentContainer.show();
+            this.el.gatewayDescription.hide();
         } else {
             this.el.paymentContainer.hide();
         }
@@ -472,7 +474,9 @@ class AxoManager {
         this.initialized = true;
 
         await this.connect();
-        this.renderWatermark();
+        await this.renderWatermark(true, () => {
+            this.renderEmailSubmit();
+        });
         this.watchEmail();
     }
 
@@ -493,14 +497,73 @@ class AxoManager {
         this.el.gatewayRadioButton.trigger('change');
     }
 
-    async renderWatermark(includeAdditionalInfo = true) {
+    async renderWatermark(includeAdditionalInfo = true, callback) {
         (await this.fastlane.FastlaneWatermarkComponent({
             includeAdditionalInfo
         })).render(this.el.watermarkContainer.selector);
 
         this.toggleWatermarkLoading(this.el.watermarkContainer, 'ppcp-axo-watermark-loading', 'loader');
+
+        // Call the callback if provided
+        if (callback) {
+            callback();
+        }
     }
 
+    async renderEmailSubmit() {
+        // Create the submit button element
+        const submitButton = document.createElement('button');
+        submitButton.type = 'button';
+        submitButton.innerText = this.axoConfig.billing_email_button_text;
+        submitButton.className = 'email-submit-button'; // Add a class for styling if needed
+
+        // Add an event listener to handle the button click
+        submitButton.addEventListener('click', async () => {
+            const emailInput = document.querySelector(this.el.fieldBillingEmail.selector + ' input');
+            if (emailInput && emailInput.checkValidity()) {
+                if (this.lastEmailCheckedIdentity !== emailInput.value) {
+                    log(`Submit button clicked - emailInput: ${emailInput.value}`);
+                    await this.onChangeEmail();
+                }
+            } else {
+                emailInput.reportValidity(); // Trigger the HTML5 validation message
+                log('Invalid or empty email input.');
+            }
+        });
+
+        // Append the button inside the wrapper of the billing email input field
+        const emailFieldContainer = document.querySelector(this.el.fieldBillingEmail.selector);
+        if (emailFieldContainer) {
+            const inputWrapper = emailFieldContainer.querySelector('.woocommerce-input-wrapper');
+            if (inputWrapper) {
+                // Ensure the email input has the required attribute
+                const emailInput = inputWrapper.querySelector('input');
+                emailInput.setAttribute('required', 'required');
+                emailInput.style.flex = '1'; // Make the input take the remaining space
+                emailInput.style.marginRight = '10px'; // Ensure the spacing is consistent
+
+                // Remove any existing loader if present
+                const existingLoader = inputWrapper.querySelector('.loader');
+                if (existingLoader) {
+                    existingLoader.remove();
+                }
+
+                // Append the submit button to the input wrapper
+                inputWrapper.appendChild(submitButton);
+
+                // Force a reflow to apply the transition
+                submitButton.offsetHeight;
+
+                // Add the class to trigger the animation
+                inputWrapper.classList.add('show-button');
+            }
+        }
+    }
+
+
+
+
+
     watchEmail() {
 
         if (this.useEmailWidget()) {

modules/ppcp-axo/resources/js/Components/DomElementCollection.js

@@ -7,6 +7,10 @@ class DomElementCollection {
             selector: '#payment_method_ppcp-axo-gateway',
         });
 
+        this.gatewayDescription = new DomElement({
+            selector: '.payment_box.payment_method_ppcp-axo-gateway',
+        });
+
         this.defaultSubmitButton = new DomElement({
             selector: '#place_order',
         });

modules/ppcp-axo/src/Assets/AxoManager.php

@@ -216,6 +216,7 @@ class AxoManager {
 					'nonce'    => wp_create_nonce( FrontendLoggerEndpoint::nonce() ),
 				),
 			),
+			'billing_email_button_text' => __( 'Continue', 'woocommerce-paypal-payments' ),
 		);
 	}
 

modules/ppcp-axo/src/Gateway/AxoGateway.php

@@ -168,7 +168,7 @@ class AxoGateway extends WC_Payment_Gateway {
 			? $this->ppcp_settings->get( 'axo_gateway_title' )
 			: $this->get_option( 'title', $this->method_title );
 
-		$this->description = $this->get_option( 'description', '' );
+		$this->description = __( 'Enter your email address above to proceed.', 'woocommerce-paypal-payments' );
 
 		$this->init_form_fields();
 		$this->init_settings();