Updates the payment step copy and fixes margins

assets/css/wc-setup.scss

@@ -513,12 +513,27 @@ body {
 	.wc-wizard-service-description {
 		flex-grow: 1;
 		padding: 0 1em;
+
+		p {
+			margin-bottom: 0;
+		}
+
+		.wc-wizard-service-settings {
+			margin-top: 1em;
+		}
+
+		.wc-wizard-service-settings-description {
+			display: block;
+			font-style: italic;
+			color: #999;
+		}
 	}
 
 	.wc-wizard-service-enable {
 		flex-basis: 0;
 		min-width: 75px;
 		text-align: center;
+		cursor: pointer;
 	}
 
 	.wc-wizard-service-toggle {
@@ -974,7 +989,6 @@ p.jetpack-terms {
 .wc-wizard-service-setting-stripe_create_account {
 	display: flex;
 	align-items: flex-end;
-	margin-bottom: 0.75em;
 	margin-top: 0.75em;
 
 	.payment-checkbox-input {
@@ -991,15 +1005,26 @@ p.jetpack-terms {
 }
 
 .wc-wizard-service-setting-stripe_email {
-	display: flex;
+	margin-top: 0.75em;
 
 	label.stripe_email {
-		visibility: hidden;
+		position: absolute;
-		width: 0;
+		margin: -1px;
+		padding: 0;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		border: 0;
 	}
 
 	input.payment-email-input {
 		margin-left: 1.5em;
+		margin-bottom: .5em;
 		width: 100%;
 	}
+
+	.wc-wizard-service-settings-description {
+		margin-left: 1.5em;
+	}
 }

assets/js/admin/wc-setup.js

@@ -105,10 +105,18 @@ jQuery( function( $ ) {
 			$( this ).closest( '.wc-wizard-service-settings' )
 				.find( 'input.payment-email-input' )
 				.prop( 'required', true );
+			$( this ).closest( '.wc-wizard-service-settings' )
+				.find( '.wc-wizard-service-setting-stripe_email' )
+				.show();
 		} else {
 			$( this ).closest( '.wc-wizard-service-settings' )
 				.find( 'input.payment-email-input' )
 				.prop( 'required', false );
+			$( this ).closest( '.wc-wizard-service-settings' )
+				.find( '.wc-wizard-service-setting-stripe_email' )
+				.hide();
 		}
 	} );
+
+	$( '.wc-wizard-services input#stripe_create_account' ).change();
 } );

includes/admin/class-wc-admin-setup-wizard.php

@@ -1019,6 +1019,7 @@ class WC_Admin_Setup_Wizard {
 
 	/**
 	 * Simple array of "in cart" gateways to show in wizard.
+	 *
 	 * @return array
 	 */
 	protected function get_wizard_in_cart_payment_gateways() {
@@ -1027,7 +1028,7 @@ class WC_Admin_Setup_Wizard {
 		$user_email = $this->get_current_user_email();
 
 		$stripe_description = '<p>' . sprintf(
-			__( 'Accept all major debit and credit cards from customers in 135+ countries on your site. <a href="%s" target="_blank">Learn more</a>.', 'woocommerce' ),
+			__( 'Accept all major debit &amp; credit cards from customers in 135+ countries on your site. <a href="%s" target="_blank">Learn more</a>.', 'woocommerce' ),
 			'https://wordpress.org/plugins/woocommerce-gateway-stripe/'
 		) . '</p>';
 		$paypal_bt_description = '<p>' . sprintf(
@@ -1048,7 +1049,7 @@ class WC_Admin_Setup_Wizard {
 				'repo-slug'   => 'woocommerce-gateway-stripe',
 				'settings'    => array(
 					'create_account' => array(
-						'label'       => __( 'Create an account for me using this email:', 'woocommerce' ),
+						'label'       => __( 'Create a new Stripe account for me', 'woocommerce' ),
 						'type'        => 'checkbox',
 						'value'       => 'yes',
 						'placeholder' => '',
@@ -1059,6 +1060,7 @@ class WC_Admin_Setup_Wizard {
 						'type'        => 'email',
 						'value'       => $user_email,
 						'placeholder' => __( 'Stripe email address', 'woocommerce' ),
+						'description' => __( "Enter your email address and we'll create an account for you. Powered by WooCommerce Services.", 'woocommerce' ),
 						'required'    => true,
 					),
 				),
@@ -1207,6 +1209,9 @@ class WC_Admin_Setup_Wizard {
 									<?php echo ( $setting['required'] ) ? 'required' : ''; ?>
 									<?php echo $is_checkbox ? checked( isset( $checked ) && $checked, true, false ) : ''; ?>
 								/>
+								<?php if ( ! empty( $setting['description'] ) ) : ?>
+									<span class="wc-wizard-service-settings-description"><?php echo esc_html( $setting['description'] ); ?></span>
+								<?php endif; ?>
 							</div>
 						<?php endforeach; ?>
 					</div>