Move checkout field to top when Link enabled (#2380)

Move checkout field to top when Link enabled

Author: mordeth

assets/css/stripe-link.css

@@ -0,0 +1,16 @@
+.stripe-gateway-checkout-email-field {
+	position: relative;
+}
+
+.stripe-gateway-checkout-email-field button.stripe-gateway-stripelink-modal-trigger {
+	display: none;
+	position: absolute;
+	right: 5px;
+	width: 64px;
+	height: 40px;
+	background: no-repeat
+		url( '../../client/payment-method-icons/link/icon.svg' );
+	background-color: none;
+	cursor: pointer;
+	border: none;
+}

includes/payment-methods/class-wc-stripe-upe-payment-gateway.php

@@ -260,6 +260,9 @@ public function payment_scripts() {
 
 		wp_enqueue_script( 'wc-stripe-upe-classic' );
 		wp_enqueue_style( 'wc-stripe-upe-classic' );
+
+		wp_register_style( 'stripelink_styles', plugins_url( 'assets/css/stripe-link.css', WC_STRIPE_MAIN_FILE ), [], WC_STRIPE_VERSION );
+		wp_enqueue_style( 'stripelink_styles' );
 	}
 
 	/**

woocommerce-gateway-stripe.php

@@ -242,6 +242,9 @@ public function init() {
 				add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), [ $this, 'plugin_action_links' ] );
 				add_filter( 'plugin_row_meta', [ $this, 'plugin_row_meta' ], 10, 2 );
 
+				// Update the email field position.
+				add_filter( 'woocommerce_billing_fields', [ $this, 'checkout_update_email_field_priority' ], 50 );
+
 				// Modify emails emails.
 				add_filter( 'woocommerce_email_classes', [ $this, 'add_emails' ], 20 );
 
@@ -647,6 +650,35 @@ public function get_main_stripe_gateway() {
 
 				return $this->stripe_gateway;
 			}
+
+			/**
+			 * Move the email field to the top of the Checkout page.
+			 *
+			 * @param array $fields WooCommerce checkout fields.
+			 *
+			 * @return array WooCommerce checkout fields.
+			 */
+			public function checkout_update_email_field_priority( $fields ) {
+				$is_link_enabled = in_array(
+					WC_Stripe_UPE_Payment_Method_Link::STRIPE_ID,
+					$this->stripe_gateway->get_upe_enabled_payment_method_ids(),
+					true
+				);
+
+				if ( $is_link_enabled ) {
+					// Update the field priority.
+					$fields['billing_email']['priority'] = 1;
+
+					// Add extra `wcpay-checkout-email-field` class.
+					$fields['billing_email']['class'][] = 'stripe-gateway-checkout-email-field';
+
+					// Append StripeLink modal trigger button for logged in users.
+					$fields['billing_email']['label'] = $fields['billing_email']['label']
+						. ' <button class="stripe-gateway-stripelink-modal-trigger"></button>';
+				}
+
+				return $fields;
+			}
 		}
 
 		$plugin = WC_Stripe::get_instance();