Initial groundwork for generating test mode Stripe Connect URLs

client/settings/connect-stripe-account/__tests__/connect-stripe-account.test.js

@@ -26,7 +26,26 @@ describe( 'ConnectStripeAccount', () => {
 		).toBeInTheDocument();
 	} );
 
-	it( 'should render both the Connect Account and Enter keys buttons when the Stripe OAuth link is provided', () => {
+	it( 'should render both the "Create or connect an account" and "Create or connect a test account" buttons when both Stripe OAuth links are provided', () => {
+		render(
+			<ConnectStripeAccount
+				oauthUrl="https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_1234&scope=read_write&state=1234"
+				testOauthUrl="https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_5678&scope=read_write&state=5678"
+			/>
+		);
+
+		expect( screen.queryByText( 'Terms of service.' ) ).toBeInTheDocument();
+
+		expect(
+			screen.getByText( 'Create or connect an account' )
+		).toBeInTheDocument();
+
+		expect(
+			screen.getByText( 'Create or connect a test account instead' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should render only the "Create or connect an account" button when only the Stripe OAuth link is provided', () => {
 		render(
 			<ConnectStripeAccount oauthUrl="https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_1234&scope=read_write&state=1234" />
 		);
@@ -38,7 +57,32 @@ describe( 'ConnectStripeAccount', () => {
 		).toBeInTheDocument();
 
 		expect(
-			screen.queryByText( 'Enter account keys (advanced)' )
+			screen.queryByText( 'Create or connect a test account' )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.queryByText( 'Create or connect a test account instead' )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should render only the "Create or connect a test account" button when only the Stripe Test OAuth link is provided', () => {
+		render(
+			<ConnectStripeAccount testOauthUrl="https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_5678&scope=read_write&state=5678" />
+		);
+
+		expect( screen.queryByText( 'Terms of service.' ) ).toBeInTheDocument();
+
+		expect(
+			screen.getByText( 'Create or connect a test account' )
+		).toBeInTheDocument();
+
+		// It should not have the "instead" word at the end
+		expect(
+			screen.queryByText( 'Create or connect a test account instead' )
+		).not.toBeInTheDocument();
+
+		expect(
+			screen.queryByText( 'Create or connect an account' )
 		).not.toBeInTheDocument();
 	} );
 
@@ -60,6 +104,11 @@ describe( 'ConnectStripeAccount', () => {
 		);
 		userEvent.click( connectAccountButton );
 
+		expect( recordEvent ).toHaveBeenCalledWith(
+			'wcstripe_create_or_connect_account_click',
+			{}
+		);
+
 		expect( window.location.assign ).toHaveBeenCalledWith( oauthUrl );
 
 		// Set the original function back to keep further tests working as expected.
@@ -68,19 +117,42 @@ describe( 'ConnectStripeAccount', () => {
 		} );
 	} );
 
-	it( 'should record a "wcstripe_create_or_connect_account_click" Track event when clicking on the Connect account button', () => {
+	it( 'should redirect to the Stripe Test OAuth link when clicking on the "Create or connect a test account" button', () => {
+		// Keep the original function at hand.
+		const assign = window.location.assign;
+
+		Object.defineProperty( window, 'location', {
+			value: { assign: jest.fn() },
+		} );
+
+		const oauthUrl =
+			'https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_1234&scope=read_write&state=1234';
+
+		const testOauthUrl =
+			'https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_5678&scope=read_write&state=5678';
+
 		render(
-			<ConnectStripeAccount oauthUrl="https://connect.stripe.com/oauth/v2/authorize?response_type=code&client_id=ca_1234&scope=read_write&state=1234" />
+			<ConnectStripeAccount
+				oauthUrl={ oauthUrl }
+				testOauthUrl={ testOauthUrl }
+			/>
 		);
 
-		const connectAccountButton = screen.getByText(
-			'Create or connect an account'
+		const connectTestAccountButton = screen.getByText(
+			'Create or connect a test account instead'
 		);
-		userEvent.click( connectAccountButton );
+		userEvent.click( connectTestAccountButton );
 
 		expect( recordEvent ).toHaveBeenCalledWith(
-			'wcstripe_create_or_connect_account_click',
+			'wcstripe_create_or_connect_test_account_click',
 			{}
 		);
+
+		expect( window.location.assign ).toHaveBeenCalledWith( testOauthUrl );
+
+		// Set the original function back to keep further tests working as expected.
+		Object.defineProperty( window, 'location', {
+			value: { assign },
+		} );
 	} );
 } );

client/settings/connect-stripe-account/index.js

@@ -47,12 +47,17 @@ const ButtonWrapper = styled.div`
 	}
 `;
 
-const ConnectStripeAccount = ( { oauthUrl } ) => {
+const ConnectStripeAccount = ( { oauthUrl, testOauthUrl } ) => {
 	const handleCreateOrConnectAccount = () => {
 		recordEvent( 'wcstripe_create_or_connect_account_click', {} );
 		window.location.assign( oauthUrl );
 	};
 
+	const handleCreateOrConnectTestAccount = () => {
+		recordEvent( 'wcstripe_create_or_connect_test_account_click', {} );
+		window.location.assign( testOauthUrl );
+	};
+
 	return (
 		<CardWrapper>
 			<StripeBanner />
@@ -70,38 +75,58 @@ const ConnectStripeAccount = ( { oauthUrl } ) => {
 					) }
 				</InformationText>
 
-				{ oauthUrl && (
-					<TermsOfServiceText>
-						{ interpolateComponents( {
-							mixedString: __(
-								'By clicking "Create or connect an account", you agree to the {{tosLink}}Terms of service.{{/tosLink}}',
-								'woocommerce-gateway-stripe'
-							),
-							components: {
-								tosLink: (
-									// eslint-disable-next-line jsx-a11y/anchor-has-content
-									<a
-										target="_blank"
-										rel="noreferrer"
-										href="https://wordpress.com/tos"
-									/>
+				{ oauthUrl || testOauthUrl ? (
+					<>
+						<TermsOfServiceText>
+							{ interpolateComponents( {
+								mixedString: __(
+									'By clicking "Create or connect an account", you agree to the {{tosLink}}Terms of service.{{/tosLink}}',
+									'woocommerce-gateway-stripe'
 								),
-							},
-						} ) }
-					</TermsOfServiceText>
-				) }
-				{ oauthUrl ? (
-					<ButtonWrapper>
-						<Button
-							variant="primary"
-							onClick={ handleCreateOrConnectAccount }
-						>
-							{ __(
-								'Create or connect an account',
-								'woocommerce-gateway-stripe'
+								components: {
+									tosLink: (
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										<a
+											target="_blank"
+											rel="noreferrer"
+											href="https://wordpress.com/tos"
+										/>
+									),
+								},
+							} ) }
+						</TermsOfServiceText>
+						<ButtonWrapper>
+							{ oauthUrl && (
+								<Button
+									variant="primary"
+									onClick={ handleCreateOrConnectAccount }
+								>
+									{ __(
+										'Create or connect an account',
+										'woocommerce-gateway-stripe'
+									) }
+								</Button>
+							) }
+							{ testOauthUrl && (
+								<Button
+									variant={
+										oauthUrl ? 'secondary' : 'primary'
+									}
+									onClick={ handleCreateOrConnectTestAccount }
+								>
+									{ oauthUrl
+										? __(
+												'Create or connect a test account instead',
+												'woocommerce-gateway-stripe'
+										  )
+										: __(
+												'Create or connect a test account',
+												'woocommerce-gateway-stripe'
+										  ) }
+								</Button>
 							) }
-						</Button>
-					</ButtonWrapper>
+						</ButtonWrapper>
+					</>
 				) : (
 					<InlineNotice isDismissible={ false } status="error">
 						{ interpolateComponents( {

client/settings/index.js

@@ -49,6 +49,7 @@ if ( newAccountContainer ) {
 	ReactDOM.render(
 		<ConnectStripeAccount
 			oauthUrl={ wc_stripe_settings_params.stripe_oauth_url }
+			testOauthUrl={ wc_stripe_settings_params.stripe_test_oauth_url }
 		/>,
 		newAccountContainer
 	);

client/settings/stripe-auth-account/stripe-auth-actions.js

@@ -1,4 +1,5 @@
 /* global wc_stripe_settings_params */
+import { __ } from '@wordpress/i18n';
 import { React } from 'react';
 import { Button } from '@wordpress/components';
 import ConfigureWebhookButton from './configure-webhook-button';
@@ -17,9 +18,21 @@ const StripeAuthActions = ( { testMode, displayWebhookConfigure } ) => {
 		<div className="woocommerce-stripe-auth__actions">
 			<Button
 				variant="primary"
-				href={ wc_stripe_settings_params.stripe_oauth_url }
+				href={
+					testMode
+						? wc_stripe_settings_params.stripe_test_oauth_url
+						: wc_stripe_settings_params.stripe_oauth_url
+				}
 				text={
-					testMode ? 'Connect a test account' : 'Connect an account'
+					testMode
+						? __(
+								'Create or connect a test account',
+								'woocommerce-gateway-stripe'
+						  )
+						: __(
+								'Create or connect an account',
+								'woocommerce-gateway-stripe'
+						  )
 				}
 			/>
 			{ displayWebhookConfigure && (

includes/admin/class-wc-stripe-settings-controller.php

@@ -130,9 +130,10 @@ public function admin_scripts( $hook_suffix ) {
 		);
 
 		$oauth_url = woocommerce_gateway_stripe()->connect->get_oauth_url();
-		if ( is_wp_error( $oauth_url ) ) {
-			$oauth_url = '';
-		}
+		$oauth_url = is_wp_error( $oauth_url ) ? '' : $oauth_url;
+
+		$test_oauth_url = woocommerce_gateway_stripe()->connect->get_oauth_url( '', 'test' );
+		$test_oauth_url = is_wp_error( $test_oauth_url ) ? '' : $test_oauth_url;
 
 		$message = sprintf(
 		/* translators: 1) Html strong opening tag 2) Html strong closing tag */
@@ -146,6 +147,7 @@ public function admin_scripts( $hook_suffix ) {
 			'i18n_out_of_sync'          => $message,
 			'is_upe_checkout_enabled'   => WC_Stripe_Feature_Flags::is_upe_checkout_enabled(),
 			'stripe_oauth_url'          => $oauth_url,
+			'stripe_test_oauth_url'     => $test_oauth_url,
 			'show_customization_notice' => get_option( 'wc_stripe_show_customization_notice', 'yes' ) === 'yes' ? true : false,
 			'is_test_mode'              => $this->gateway->is_in_test_mode(),
 			'plugin_version'            => WC_STRIPE_VERSION,

includes/class-wc-gateway-stripe.php

@@ -1122,20 +1122,6 @@ public function get_required_settings_keys() {
 		return [ 'publishable_key', 'secret_key' ];
 	}
 
-	/**
-	 * Get the connection URL.
-	 *
-	 * @return string Connection URL.
-	 */
-	public function get_connection_url( $return_url = '' ) {
-		$api     = new WC_Stripe_Connect_API();
-		$connect = new WC_Stripe_Connect( $api );
-
-		$url = $connect->get_oauth_url( $return_url );
-
-		return is_wp_error( $url ) ? null : $url;
-	}
-
 	/**
 	 * Get help text to display during quick setup.
 	 *

includes/connect/class-wc-stripe-connect-api.php

@@ -18,11 +18,12 @@ class WC_Stripe_Connect_API {
 		/**
 		 * Send request to Connect Server to initiate Stripe OAuth
 		 *
-		 * @param  string $return_url return address.
+		 * @param string $return_url The URL to return to after the OAuth is completed.
+		 * @param string $mode       Optional. The mode to connect to. 'live' or 'test'. Default is 'live'.
 		 *
-		 * @return array
+		 * @return array|WP_Error The response from the server.
 		 */
-		public function get_stripe_oauth_init( $return_url ) {
+		public function get_stripe_oauth_init( $return_url, $mode = 'live' ) {
 
 			$current_user                   = wp_get_current_user();
 			$business_data                  = [];
@@ -55,7 +56,8 @@ public function get_stripe_oauth_init( $return_url ) {
 				'businessData' => $business_data,
 			];
 
-			return $this->request( 'POST', '/stripe/oauth-init', $request );
+			$path = 'test' === $mode ? '/stripe-sandbox/oauth-init' : '/stripe/oauth-init';
+			return $this->request( 'POST', $path, $request );
 		}
 
 		/**
@@ -65,11 +67,12 @@ public function get_stripe_oauth_init( $return_url ) {
 		 *
 		 * @return array
 		 */
-		public function get_stripe_oauth_keys( $code ) {
+		public function get_stripe_oauth_keys( $code, $mode = 'live' ) {
 
 			$request = [ 'code' => $code ];
 
-			return $this->request( 'POST', '/stripe/oauth-keys', $request );
+			$path = 'test' === $mode ? '/stripe-sandbox/oauth-keys' : '/stripe/oauth-keys';
+			return $this->request( 'POST', $path, $request );
 		}
 
 		/**
@@ -91,6 +94,7 @@ protected function request( $method, $path, $body = [] ) {
 			}
 
 			$url = trailingslashit( WOOCOMMERCE_CONNECT_SERVER_URL );
+
 			$url = apply_filters( 'wc_connect_server_url', $url );
 			$url = trailingslashit( $url ) . ltrim( $path, '/' );