Merge pull request #40 from woocommerce/issue-22-sandbox-live-switch

Store seperate sandbox and production credentials and allow merchants to toggle between both.

modules/ppcp-api-client/services.php

@@ -47,10 +47,10 @@ use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
 
 return array(
 	'api.host'                              => function( $container ) : string {
-		return 'https://api.paypal.com';
+		return PAYPAL_API_URL;
 	},
 	'api.paypal-host'                       => function( $container ) : string {
-		return 'https://api.paypal.com';
+		return PAYPAL_API_URL;
 	},
 	'api.partner_merchant_id'               => static function () : string {
 		return '';

modules/ppcp-api-client/src/Repository/class-partnerreferralsdata.php

@@ -72,7 +72,6 @@ class PartnerReferralsData {
 	private function default_data(): array {
 
 		return array(
-			'email'                   => $this->merchant_email,
 			'partner_config_override' => array(
 				'partner_logo_url'       => 'https://connect.woocommerce.com/images/woocommerce_logo.png',
 				'return_url'             => admin_url(

modules/ppcp-button/src/Assets/class-smartbutton.php

@@ -860,19 +860,24 @@ class SmartButton implements SmartButtonInterface {
 	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException If a setting has not been found.
 	 */
 	private function dcc_is_enabled(): bool {
+		if ( ! is_checkout() ) {
+			return false;
+		}
 		if ( ! $this->dcc_applies->for_country_currency() ) {
 			return false;
 		}
 		$keys = array(
-			'dcc_enabled' => 'is_checkout',
+			'client_id',
+			'client_secret',
+			'dcc_enabled',
 		);
-		foreach ( $keys as $key => $callback ) {
+		foreach ( $keys as $key ) {
-			if ( $this->settings->has( $key ) && $this->settings->get( $key ) && $callback() ) {
+			if ( ! $this->settings->has( $key ) || ! $this->settings->get( $key ) ) {
-				return true;
-			}
-		}
 				return false;
 			}
+		}
+		return true;
+	}
 
 	/**
 	 * Determines the style for a given indicator in a given context.

modules/ppcp-onboarding/assets/css/onboarding.css

@@ -2,14 +2,28 @@
 	display: none;
 }
 
-#field-client_secret,
+#field-merchant_email_production,
-#field-client_id,
+#field-ppcp_disconnect_sandbox,
-#field-merchant_id{
+#field-ppcp_disconnect_production,
+#field-merchant_id_production,
+#field-client_id_production,
+#field-client_secret_production,
+#field-merchant_email_sandbox,
+#field-merchant_id_sandbox,
+#field-client_id_sandbox,
+#field-client_secret_sandbox{
 	display: none;
 }
-#field-client_secret.show,
+#field-merchant_email_production.show,
-#field-client_id.show,
+#field-ppcp_disconnect_sandbox.show,
-#field-merchant_id.show {
+#field-ppcp_disconnect_production.show,
+#field-merchant_id_production.show,
+#field-client_id_production.show,
+#field-client_secret_production.show,
+#field-merchant_email_sandbox.show,
+#field-merchant_id_sandbox.show,
+#field-client_id_sandbox.show,
+#field-client_secret_sandbox.show {
 	display: table-row;
 }
 
@@ -21,7 +35,8 @@
 	display: unset;
 }
 
-#field-toggle_manual_input button {
+#field-production_toggle_manual_input button,
+#field-sandbox_toggle_manual_input button {
 	color: #0073aa;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -33,3 +48,34 @@
 	margin: 0;
 	padding: 0;
 }
+
+#field-sandbox_toggle_manual_input.onboarded,
+#field-production_toggle_manual_input.onboarded {
+	display: none;
+}
+
+
+#field-ppcp_disconnect_sandbox.onboarded,
+#field-ppcp_disconnect_production.onboarded,
+#field-merchant_email_sandbox.onboarded,
+#field-merchant_id_sandbox.onboarded,
+#field-client_id_sandbox.onboarded,
+#field-client_secret_sandbox.onboarded,
+#field-merchant_email_production.onboarded,
+#field-merchant_id_production.onboarded,
+#field-client_id_production.onboarded,
+#field-client_secret_production.onboarded {
+	display:table-row;
+}
+#field-ppcp_disconnect_sandbox.onboarded.hide,
+#field-ppcp_disconnect_production.onboarded.hide,
+#field-merchant_email_sandbox.onboarded.hide,
+#field-merchant_id_sandbox.onboarded.hide,
+#field-client_id_sandbox.onboarded.hide,
+#field-client_secret_sandbox.onboarded.hide,
+#field-merchant_email_production.onboarded.hide,
+#field-merchant_id_production.onboarded.hide,
+#field-client_id_production.onboarded.hide,
+#field-client_secret_production.onboarded.hide {
+	display:none;
+}

modules/ppcp-onboarding/assets/js/onboarding.js

@@ -1,4 +1,5 @@
 function onboardingCallback(authCode, sharedId) {
+	const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
 	fetch(
 		PayPalCommerceGatewayOnboarding.endpoint,
 		{
@@ -10,18 +11,186 @@ function onboardingCallback(authCode, sharedId) {
 				{
 					authCode: authCode,
 					sharedId: sharedId,
-					nonce: PayPalCommerceGatewayOnboarding.nonce
+					nonce: PayPalCommerceGatewayOnboarding.nonce,
+					env: sandboxSwitchElement && sandboxSwitchElement.checked ? 'sandbox' : 'production'
 				}
 			)
 		}
-	)
-		.then( response => response.json() )
-		.then(
-			(data) => {
-				if (data.success) {
-					return;
-				}
-				alert( PayPalCommerceGatewayOnboarding.error )
-			}
 	);
 }
+
+/**
+ * Since the PayPal modal will redirect the user a dirty form
+ * provokes an alert if the user wants to leave the page. Since the user
+ * needs to toggle the sandbox switch, we disable this dirty state with the
+ * following workaround for checkboxes.
+ *
+ * @param event
+ */
+const checkBoxOnClick = (event) => {
+	const value = event.target.checked;
+	if (event.target.getAttribute('id') === 'ppcp-sandbox_on') {
+		toggleSandboxProduction(! value);
+	}
+	event.preventDefault();
+	event.stopPropagation();
+	setTimeout( () => {
+		event.target.checked = value;
+		},1
+	);
+};
+
+/**
+ * Toggles the credential input fields.
+ *
+ * @param forProduction
+ */
+const credentialToggle = (forProduction) => {
+
+	const sandboxClassSelectors = [
+		'#field-ppcp_disconnect_sandbox',
+		'#field-merchant_email_sandbox',
+		'#field-merchant_id_sandbox',
+		'#field-client_id_sandbox',
+		'#field-client_secret_sandbox',
+	];
+	const productionClassSelectors = [
+		'#field-ppcp_disconnect_production',
+		'#field-merchant_email_production',
+		'#field-merchant_id_production',
+		'#field-client_id_production',
+		'#field-client_secret_production',
+	];
+
+	const selectors = forProduction ? productionClassSelectors : sandboxClassSelectors;
+	document.querySelectorAll(selectors.join()).forEach(
+		(element) => {element.classList.toggle('show')}
+	)
+};
+
+/**
+ * Toggles the visibility of the sandbox/production input fields.
+ *
+ * @param showProduction
+ */
+const toggleSandboxProduction = (showProduction) => {
+	const productionDisplaySelectors = [
+		'#field-credentials_production_heading',
+		'#field-production_toggle_manual_input',
+		'#field-ppcp_onboarding_production',
+	];
+	const productionClassSelectors = [
+
+		'#field-ppcp_disconnect_production',
+		'#field-merchant_email_production',
+		'#field-merchant_id_production',
+		'#field-client_id_production',
+		'#field-client_secret_production',
+	];
+	const sandboxDisplaySelectors = [
+		'#field-credentials_sandbox_heading',
+		'#field-sandbox_toggle_manual_input',
+		'#field-ppcp_onboarding_sandbox',
+	];
+	const sandboxClassSelectors = [
+		'#field-ppcp_disconnect_sandbox',
+		'#field-merchant_email_sandbox',
+		'#field-merchant_id_sandbox',
+		'#field-client_id_sandbox',
+		'#field-client_secret_sandbox',
+	];
+
+	if (showProduction) {
+		document.querySelectorAll(productionDisplaySelectors.join()).forEach(
+			(element) => {element.style.display = ''}
+		);
+		document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
+			(element) => {element.style.display = 'none'}
+		);
+		document.querySelectorAll(productionClassSelectors.join()).forEach(
+			(element) => {element.classList.remove('hide')}
+		);
+		document.querySelectorAll(sandboxClassSelectors.join()).forEach(
+			(element) => {
+				element.classList.remove('show');
+				element.classList.add('hide');
+			}
+		);
+		return;
+	}
+	document.querySelectorAll(productionDisplaySelectors.join()).forEach(
+		(element) => {element.style.display = 'none'}
+	);
+	document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
+		(element) => {element.style.display = ''}
+	);
+
+	document.querySelectorAll(sandboxClassSelectors.join()).forEach(
+		(element) => {element.classList.remove('hide')}
+	);
+	document.querySelectorAll(productionClassSelectors.join()).forEach(
+		(element) => {
+			element.classList.remove('show');
+			element.classList.add('hide');
+		}
+	)
+};
+
+const disconnect = (event) => {
+	event.preventDefault();
+	const fields = event.target.classList.contains('production') ? [
+		'#field-merchant_email_production input',
+		'#field-merchant_id_production input',
+		'#field-client_id_production input',
+		'#field-client_secret_production input',
+	] : [
+		'#field-merchant_email_sandbox input',
+		'#field-merchant_id_sandbox input',
+		'#field-client_id_sandbox input',
+		'#field-client_secret_sandbox input',
+	];
+
+	document.querySelectorAll(fields.join()).forEach(
+		(element) => {
+			element.value = '';
+		}
+	);
+
+	document.querySelector('.woocommerce-save-button').click();
+};
+
+(() => {
+	const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
+	if (sandboxSwitchElement) {
+		toggleSandboxProduction(! sandboxSwitchElement.checked);
+	}
+
+	document.querySelectorAll('.ppcp-disconnect').forEach(
+		(button) => {
+			button.addEventListener(
+				'click',
+				disconnect
+			);
+		}
+	);
+
+	document.querySelectorAll('#mainform input[type="checkbox"]').forEach(
+		(checkbox) => {
+			checkbox.addEventListener('click', checkBoxOnClick);
+		}
+	);
+
+	document.querySelectorAll('#field-sandbox_toggle_manual_input button, #field-production_toggle_manual_input button').forEach(
+		(button) => {
+			button.addEventListener(
+				'click',
+				(event) => {
+					event.preventDefault();
+					const isProduction = event.target.classList.contains('production-toggle');
+					credentialToggle(isProduction);
+				}
+			)
+		}
+	)
+
+})();

modules/ppcp-onboarding/assets/js/settings.js

@@ -15,7 +15,7 @@ const groupToggle = (selector, group) => {
             if (! event.target.checked) {
                 group.forEach( (elementToHide) => {
                     document.querySelector(elementToHide).style.display = 'none';
-                })
+                });
                 return;
             }
 
@@ -24,8 +24,7 @@ const groupToggle = (selector, group) => {
             })
         }
     );
-
+};
-}
 
 const groupToggleSelect = (selector, group) => {
     const toggleElement = document.querySelector(selector);
@@ -43,7 +42,7 @@ const groupToggleSelect = (selector, group) => {
             return;
         }
         domElement.style.display = 'none';
-    })
+    });
     toggleElement.addEventListener(
         'change',
         (event) => {
@@ -57,7 +56,7 @@ const groupToggleSelect = (selector, group) => {
             })
         }
     );
-}
+};
 
 const disableOptions = (sourceSelector, targetSelector) => {
 
@@ -87,28 +86,14 @@ const disableOptions = (sourceSelector, targetSelector) => {
                 target.append(option);
             }
         );
-    }
+    };
 
     source.on('change',replace);
     replace();
-}
+};
 
 (() => {
-    const manualInputToggle = document.querySelector('#field-toggle_manual_input');
-    if (manualInputToggle) {
-        manualInputToggle.addEventListener(
-            'click',
-            (event) => {
-                event.preventDefault();
-                document.querySelector('#field-toggle_manual_input').classList.toggle('show');
-                document.querySelector('#field-merchant_id').classList.toggle('show');
-                document.querySelector('#field-client_id').classList.toggle('show');
-                document.querySelector('#field-client_secret').classList.toggle('show');
-            }
-        )
-    }
     disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]');
-
     groupToggle(
         '#ppcp-button_enabled',
         [
@@ -272,4 +257,4 @@ const disableOptions = (sourceSelector, targetSelector) => {
             }
         ]
     );
-})()
+})();

modules/ppcp-onboarding/services.php

@@ -9,23 +9,36 @@ declare(strict_types=1);
 
 namespace WooCommerce\PayPalCommerce\Onboarding;
 
-use Dhii\Data\Container\ContainerInterface;
 use WooCommerce\PayPalCommerce\ApiClient\Authentication\Bearer;
 use WooCommerce\PayPalCommerce\ApiClient\Authentication\ConnectBearer;
 use WooCommerce\PayPalCommerce\ApiClient\Authentication\PayPalBearer;
+use WooCommerce\PayPalCommerce\ApiClient\Endpoint\LoginSeller;
+use WooCommerce\PayPalCommerce\ApiClient\Endpoint\PartnerReferrals;
 use WooCommerce\PayPalCommerce\ApiClient\Helper\Cache;
 use WooCommerce\PayPalCommerce\Onboarding\Assets\OnboardingAssets;
 use WooCommerce\PayPalCommerce\Onboarding\Endpoint\LoginSellerEndpoint;
 use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingRenderer;
-use WpOop\TransientCache\CachePoolFactory;
 
 return array(
+	'api.sandbox-host'                          => static function ( $container ): string {
+
+		$state       = $container->get( 'onboarding.state' );
+
+		/**
+		 * The State object.
+		 *
+		 * @var State $state
+		 */
+		if ( $state->current_state() >= State::STATE_ONBOARDED ) {
+			return PAYPAL_SANDBOX_API_URL;
+		}
+		// ToDo: Real connect.woocommerce.com sandbox link.
+		return CONNECT_WOO_SANDBOX_URL;
+	},
+	'api.production-host'                       => static function ( $container ): string {
 
-	'api.host'                         => static function ( $container ): string {
 		$state       = $container->get( 'onboarding.state' );
-		$environment = $container->get( 'onboarding.environment' );
 
-		// ToDo: Correct the URLs.
 		/**
 		 * The Environment and State variables.
 		 *
@@ -33,19 +46,28 @@ return array(
 		 * @var State $state
 		 */
 		if ( $state->current_state() >= State::STATE_ONBOARDED ) {
-			if ( $environment->current_environment_is( Environment::SANDBOX ) ) {
+			return PAYPAL_API_URL;
-				return 'https://api.sandbox.paypal.com';
-			}
-			return 'https://api.sandbox.paypal.com';
 		}
+		return CONNECT_WOO_URL;
+	},
+	'api.host'                                  => static function ( $container ): string {
+		$environment = $container->get( 'onboarding.environment' );
 
-		// ToDo: Real connect.woocommerce.com.
+		/**
-		if ( $environment->current_environment_is( Environment::SANDBOX ) ) {
+		 * The Environment and State variables.
-			return 'http://connect-woo.wpcust.com/ppcsandbox';
+		 *
-		}
+		 * @var Environment $environment
-		return 'http://connect-woo.wpcust.com/ppc';
+		 */
+		return $environment->current_environment_is( Environment::SANDBOX )
+			? (string) $container->get( 'api.sandbox-host' ) : (string) $container->get( 'api.production-host' );
 
 	},
+	'api.paypal-host-production'                => static function( $container ) : string {
+		return PAYPAL_API_URL;
+	},
+	'api.paypal-host-sandbox'                   => static function( $container ) : string {
+		return PAYPAL_SANDBOX_API_URL;
+	},
 	'api.paypal-host'                           => function( $container ) : string {
 		$environment = $container->get( 'onboarding.environment' );
 		/**
@@ -54,9 +76,10 @@ return array(
 		 * @var Environment $environment
 		 */
 		if ( $environment->current_environment_is( Environment::SANDBOX ) ) {
-			return 'https://api.sandbox.paypal.com';
+			return $container->get( 'api.paypal-host-sandbox' );
 		}
-		return 'https://api.paypal.com';
+		return $container->get( 'api.paypal-host-production' );
+
 	},
 
 	'api.bearer'                                => static function ( $container ): Bearer {
@@ -112,27 +135,71 @@ return array(
 		);
 	},
 
+	'api.endpoint.login-seller-production'      => static function ( $container ) : LoginSeller {
+
+		$logger = $container->get( 'woocommerce.logger.woocommerce' );
+		return new LoginSeller(
+			$container->get( 'api.paypal-host-production' ),
+			$container->get( 'api.partner_merchant_id' ),
+			$logger
+		);
+	},
+
+	'api.endpoint.login-seller-sandbox'         => static function ( $container ) : LoginSeller {
+
+		$logger = $container->get( 'woocommerce.logger.woocommerce' );
+		return new LoginSeller(
+			$container->get( 'api.paypal-host-sandbox' ),
+			$container->get( 'api.partner_merchant_id' ),
+			$logger
+		);
+	},
+
 	'onboarding.endpoint.login-seller'          => static function ( $container ) : LoginSellerEndpoint {
 
 		$request_data            = $container->get( 'button.request-data' );
-		$login_seller           = $container->get( 'api.endpoint.login-seller' );
+		$login_seller_production = $container->get( 'api.endpoint.login-seller-production' );
+		$login_seller_sandbox    = $container->get( 'api.endpoint.login-seller-sandbox' );
 		$partner_referrals_data  = $container->get( 'api.repository.partner-referrals-data' );
 		$settings                = $container->get( 'wcgateway.settings' );
 
 		$cache = new Cache( 'ppcp-paypal-bearer' );
 		return new LoginSellerEndpoint(
 			$request_data,
-			$login_seller,
+			$login_seller_production,
+			$login_seller_sandbox,
 			$partner_referrals_data,
 			$settings,
 			$cache
 		);
 	},
+	'api.endpoint.partner-referrals-sandbox'    => static function ( $container ) : PartnerReferrals {
+
+		return new PartnerReferrals(
+			CONNECT_WOO_SANDBOX_URL,
+			new ConnectBearer(),
+			$container->get( 'api.repository.partner-referrals-data' ),
+			$container->get( 'woocommerce.logger.woocommerce' )
+		);
+	},
+	'api.endpoint.partner-referrals-production' => static function ( $container ) : PartnerReferrals {
+
+		return new PartnerReferrals(
+			CONNECT_WOO_SANDBOX_URL,
+			new ConnectBearer(),
+			$container->get( 'api.repository.partner-referrals-data' ),
+			$container->get( 'woocommerce.logger.woocommerce' )
+		);
+	},
 	'onboarding.render'                         => static function ( $container ) : OnboardingRenderer {
 
-		$partner_referrals = $container->get( 'api.endpoint.partner-referrals' );
+		$partner_referrals         = $container->get( 'api.endpoint.partner-referrals-production' );
+		$partner_referrals_sandbox = $container->get( 'api.endpoint.partner-referrals-sandbox' );
+		$settings                  = $container->get( 'wcgateway.settings' );
 		return new OnboardingRenderer(
-			$partner_referrals
+			$settings,
+			$partner_referrals,
+			$partner_referrals_sandbox
 		);
 	},
 );

modules/ppcp-onboarding/src/Assets/class-onboardingassets.php

@@ -96,10 +96,6 @@ class OnboardingAssets {
 			array(
 				'endpoint' => home_url( \WC_AJAX::get_endpoint( LoginSellerEndpoint::ENDPOINT ) ),
 				'nonce'    => wp_create_nonce( $this->login_seller_endpoint::nonce() ),
-				'error'    => __(
-					'We could not properly onboard you. Please reload and try again.',
-					'paypal-payments-for-woocommerce'
-				),
 			)
 		);
 
@@ -129,11 +125,6 @@ class OnboardingAssets {
 	 */
 	private function should_render_onboarding_script(): bool {
 		global $current_section;
-		if ( 'ppcp-gateway' !== $current_section ) {
+		return 'ppcp-gateway' === $current_section;
-			return false;
-		}
-
-		$should_render = $this->state->current_state() === State::STATE_PROGRESSIVE;
-		return $should_render;
 	}
 }

modules/ppcp-onboarding/src/Endpoint/class-loginsellerendpoint.php

@@ -33,11 +33,18 @@ class LoginSellerEndpoint implements EndpointInterface {
 	private $request_data;
 
 	/**
-	 * The Login Seller Endpoint.
+	 * The Login Seller Endpoint for the production environment
 	 *
 	 * @var LoginSeller
 	 */
-	private $login_seller_endpoint;
+	private $login_seller_production;
+
+	/**
+	 * The Login Seller Endpoint for the sandbox environment
+	 *
+	 * @var LoginSeller
+	 */
+	private $login_seller_sandbox;
 
 	/**
 	 * The Partner Referrals Data.
@@ -64,21 +71,24 @@ class LoginSellerEndpoint implements EndpointInterface {
 	 * LoginSellerEndpoint constructor.
 	 *
 	 * @param RequestData          $request_data The Request Data.
-	 * @param LoginSeller          $login_seller The Login Seller.
+	 * @param LoginSeller          $login_seller_production The Login Seller for the production environment.
+	 * @param LoginSeller          $login_seller_sandbox The Login Seller for the sandbox environment.
 	 * @param PartnerReferralsData $partner_referrals_data The Partner Referrals Data.
 	 * @param Settings             $settings The Settings.
 	 * @param Cache                $cache The Cache.
 	 */
 	public function __construct(
 		RequestData $request_data,
-		LoginSeller $login_seller,
+		LoginSeller $login_seller_production,
+		LoginSeller $login_seller_sandbox,
 		PartnerReferralsData $partner_referrals_data,
 		Settings $settings,
 		Cache $cache
 	) {
 
 		$this->request_data            = $request_data;
-		$this->login_seller_endpoint  = $login_seller;
+		$this->login_seller_production = $login_seller_production;
+		$this->login_seller_sandbox    = $login_seller_sandbox;
 		$this->partner_referrals_data  = $partner_referrals_data;
 		$this->settings                = $settings;
 		$this->cache                   = $cache;
@@ -102,11 +112,22 @@ class LoginSellerEndpoint implements EndpointInterface {
 
 		try {
 			$data       = $this->request_data->read_request( $this->nonce() );
-			$credentials = $this->login_seller_endpoint->credentials_for(
+			$is_sandbox = isset( $data['env'] ) && 'sandbox' === $data['env'];
+			$this->settings->set( 'sandbox_on', $is_sandbox );
+			$this->settings->persist();
+			$endpoint    = $is_sandbox ? $this->login_seller_sandbox : $this->login_seller_production;
+			$credentials = $endpoint->credentials_for(
 				$data['sharedId'],
 				$data['authCode'],
 				$this->partner_referrals_data->nonce()
 			);
+			if ( $is_sandbox ) {
+				$this->settings->set( 'client_secret_sandbox', $credentials->client_secret );
+				$this->settings->set( 'client_id_sandbox', $credentials->client_id );
+			} else {
+				$this->settings->set( 'client_secret_production', $credentials->client_secret );
+				$this->settings->set( 'client_id_production', $credentials->client_id );
+			}
 			$this->settings->set( 'client_secret', $credentials->client_secret );
 			$this->settings->set( 'client_id', $credentials->client_id );
 			$this->settings->persist();

modules/ppcp-onboarding/src/Render/class-onboardingrenderer.php

@@ -11,6 +11,7 @@ namespace WooCommerce\PayPalCommerce\Onboarding\Render;
 
 use WooCommerce\PayPalCommerce\ApiClient\Endpoint\PartnerReferrals;
 use WooCommerce\PayPalCommerce\ApiClient\Exception\RuntimeException;
+use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
 
 /**
  * Class OnboardingRenderer
@@ -18,51 +19,65 @@ use WooCommerce\PayPalCommerce\ApiClient\Exception\RuntimeException;
 class OnboardingRenderer {
 
 	/**
-	 * The partner referrals object.
+	 * The settings.
+	 *
+	 * @var Settings
+	 */
+	private $settings;
+
+	/**
+	 * The partner referrals object for the production environment.
 	 *
 	 * @var PartnerReferrals
 	 */
-	private $partner_referrals;
+	private $production_partner_referrals;
+
+	/**
+	 * The partner referrals object for the sandbox environment.
+	 *
+	 * @var PartnerReferrals
+	 */
+	private $sandbox_partner_referrals;
 
 	/**
 	 * OnboardingRenderer constructor.
 	 *
-	 * @param PartnerReferrals $partner_referrals The PartnerReferrals.
+	 * @param Settings         $settings The settings.
+	 * @param PartnerReferrals $production_partner_referrals The PartnerReferrals for production.
+	 * @param PartnerReferrals $sandbox_partner_referrals The PartnerReferrals for sandbox.
 	 */
-	public function __construct( PartnerReferrals $partner_referrals ) {
+	public function __construct( Settings $settings, PartnerReferrals $production_partner_referrals, PartnerReferrals $sandbox_partner_referrals ) {
-		$this->partner_referrals = $partner_referrals;
+		$this->settings                     = $settings;
+		$this->production_partner_referrals = $production_partner_referrals;
+		$this->sandbox_partner_referrals    = $sandbox_partner_referrals;
 	}
 
 	/**
 	 * Renders the "Connect to PayPal" button.
+	 *
+	 * @param bool $is_production Whether the production or sandbox button should be rendered.
 	 */
-	public function render() {
+	public function render( bool $is_production ) {
 		try {
-			$url = add_query_arg(
+			$args = array(
-				array(
 				'displayMode' => 'minibrowser',
-				),
-				$this->partner_referrals->signup_link()
 			);
-			?>
+
-					<a
+			$url   = $is_production ? $this->production_partner_referrals->signup_link() : $this->sandbox_partner_referrals->signup_link();
-							target="_blank"
+			$url   = add_query_arg( $args, $url );
-							class="button-primary"
+			$id    = $is_production ? 'connect-to-production' : 'connect-to-sandbox';
-							data-paypal-onboard-complete="onboardingCallback"
+			$label = $is_production ? __( 'Connect to PayPal', 'paypal-payments-for-woocommerce' ) : __( 'Connect to PayPal Sandbox', 'paypal-payments-for-woocommerce' );
-							href="<?php echo esc_url( $url ); ?>"
+				$this->render_button(
-							data-paypal-button="true"
+					$url,
-					>
+					$id,
-					<?php
+					$label
-						esc_html_e(
-							'Connect to PayPal',
-							'paypal-payments-for-woocommerce'
 				);
-					?>
+
-						</a>
+			$script_url = 'https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js'; ?>
-			<script>document.querySelector('[data-paypal-onboard-complete=onboardingCallback]').addEventListener('click', (e) => {if ('undefined' === typeof PAYPAL ) e.preventDefault(); });</script>
+			<script>document.querySelectorAll('[data-paypal-onboard-complete=onboardingCallback]').forEach( (element) => { element.addEventListener('click', (e) => {if ('undefined' === typeof PAYPAL ) e.preventDefault(); }) });</script>
 			<script
 					id="paypal-js"
-							src="https://www.sandbox.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js"
+					src="<?php echo esc_url( $script_url ); ?>"
 			></script>
 			<?php
 		} catch ( RuntimeException $exception ) {
@@ -72,4 +87,26 @@ class OnboardingRenderer {
 			);
 		}
 	}
+
+	/**
+	 * Renders the button.
+	 *
+	 * @param string $url The url of the button.
+	 * @param string $id The ID of the button.
+	 * @param string $label The button text.
+	 */
+	private function render_button( string $url, string $id, string $label ) {
+		?>
+					<a
+							target="_blank"
+							class="button-primary"
+							id="<?php echo esc_attr( $id ); ?>"
+							data-paypal-onboard-complete="onboardingCallback"
+							href="<?php echo esc_url( $url ); ?>"
+							data-paypal-button="true"
+					>
+					<?php echo esc_html( $label ); ?>
+						</a>
+		<?php
+	}
 }

modules/ppcp-onboarding/src/class-onboardingmodule.php

@@ -70,6 +70,7 @@ class OnboardingModule implements ModuleInterface {
 					return $field;
 				}
 				$renderer      = $container->get( 'onboarding.render' );
+				$is_production = 'production' === $config['env'];
 
 				/**
 				 * The OnboardingRenderer.
@@ -77,7 +78,7 @@ class OnboardingModule implements ModuleInterface {
 				 * @var OnboardingRenderer $renderer
 				 */
 				ob_start();
-				$renderer->render();
+				$renderer->render( $is_production );
 				$content = ob_get_contents();
 				ob_end_clean();
 				return $content;

modules/ppcp-onboarding/src/class-state.php

@@ -50,29 +50,96 @@ class State {
 	}
 
 	/**
-	 * Returns the current onboarding state.
+	 * Returns the current active onboarding state.
 	 *
 	 * @return int
 	 */
 	public function current_state(): int {
-		$value = self::STATE_START;
+
-		/**
+		return $this->state_by_keys(
-		 * Having provided the merchant email means, we are at least
+			array(
-		 * in the progressive phase of our onboarding.
+				'merchant_email',
-		 */
+			),
-		if (
+			array(
-			$this->settings->has( 'merchant_email' )
+				'merchant_email',
-			&& is_email( $this->settings->get( 'merchant_email' ) )
+				'merchant_id',
-		) {
+				'client_id',
-			$value = self::STATE_PROGRESSIVE;
+				'client_secret',
+			)
+		);
 	}
 
 	/**
-		 * Once we can fetch credentials we are completely onboarded.
+	 * Returns the onboarding state of the sandbox.
+	 *
+	 * @return int
 	 */
-		if ( $this->settings->has( 'client_id' ) && $this->settings->get( 'client_id' ) ) {
+	public function sandbox_state() : int {
-			$value = self::STATE_ONBOARDED;
+
+		return $this->state_by_keys(
+			array(
+				'merchant_email_sandbox',
+			),
+			array(
+				'merchant_email_sandbox',
+				'merchant_id_sandbox',
+				'client_id_sandbox',
+				'client_secret_sandbox',
+			)
+		);
 	}
-		return $value;
+
+	/**
+	 * Returns the onboarding state of the production mode.
+	 *
+	 * @return int
+	 */
+	public function production_state() : int {
+
+		return $this->state_by_keys(
+			array(
+				'merchant_email_production',
+			),
+			array(
+				'merchant_email_production',
+				'merchant_id_production',
+				'client_id_production',
+				'client_secret_production',
+			)
+		);
+	}
+
+	/**
+	 * Returns the state based on progressive and onboarded values being looked up in the settings.
+	 *
+	 * @param array $progressive_keys The keys which need to be present to be at least in progressive state.
+	 * @param array $onboarded_keys The keys which need to be present to be in onboarded state.
+	 *
+	 * @return int
+	 */
+	private function state_by_keys( array $progressive_keys, array $onboarded_keys ) : int {
+		$state          = self::STATE_START;
+		$is_progressive = true;
+		foreach ( $progressive_keys as $key ) {
+			if ( ! $this->settings->has( $key ) || ! $this->settings->get( $key ) ) {
+				$is_progressive = false;
+			}
+		}
+		if ( $is_progressive ) {
+			$state = self::STATE_PROGRESSIVE;
+		}
+
+		$is_onboarded = true;
+		foreach ( $onboarded_keys as $key ) {
+			if ( ! $this->settings->has( $key ) || ! $this->settings->get( $key ) ) {
+				$is_onboarded = false;
+			}
+		}
+
+		if ( $is_onboarded ) {
+			$state = self::STATE_ONBOARDED;
+		}
+
+		return $state;
 	}
 }

modules/ppcp-wc-gateway/services.php

@@ -166,45 +166,17 @@ return array(
 	},
 
 	'wcgateway.settings.fields'                    => static function ( $container ): array {
-		$settings     = $container->get( 'wcgateway.settings' );
-		$sandbox_text = $settings->has( 'sandbox_on' ) && $settings->get( 'sandbox_on' ) ?
-			// translators: %1$s and %2$s are button tags.
-			__(
-				'You are currently in the sandbox mode to test your installation. You can switch this, by clicking %1$sReset%2$s',
-				'paypal-payments-for-woocommerce'
-			) :
-			// translators: %1$s and %2$s are button tags.
-			__(
-				'You are in live mode. This means, you can receive money into your account. You can switch this, by clicking %1$sReset%2$s',
-				'paypal-payments-for-woocommerce'
-			);
-		$sandbox_text = sprintf(
-			$sandbox_text,
-			'<button name="save" value="reset">',
-			'</button>'
-		);
 
-		$merchant_email_text = sprintf(
+		$state = $container->get( 'onboarding.state' );
-			// translators: %1$s is the email address %2$s and %3$s are button tags.
+		/**
-			__(
+		 * The state.
-				'You are connected with your email address %1$s.
+		 *
-                If you want to change this settings, please click %2$sReset%3$s',
+		 * @var State $state
-				'paypal-payments-for-woocommerce'
+		 */
-			),
+
-			$settings->has( 'merchant_email' ) ? '<mark>' . $settings->get( 'merchant_email' ) . '</mark>' : '',
+		$settings     = $container->get( 'wcgateway.settings' );
-			'<button name="save" value="reset">',
+
-			'</button>'
-		);
 		$fields              = array(
-			'ppcp_onboarding'            => array(
-				'title'        => __( 'Connect to PayPal', 'paypal-payments-for-woocommerce' ),
-				'type'         => 'ppcp_onboarding',
-				'screens'      => array(
-					State::STATE_PROGRESSIVE,
-				),
-				'requirements' => array(),
-				'gateway'      => 'paypal',
-			),
 			'sandbox_on'                     => array(
 				'title'        => __( 'Sandbox', 'paypal-payments-for-woocommerce' ),
 				'type'         => 'checkbox',
@@ -212,51 +184,71 @@ return array(
 				'default'      => 0,
 				'screens'      => array(
 					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
 				),
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
-			'sandbox_on_info'            => array(
+
-				'title'        => __( 'Sandbox', 'paypal-payments-for-woocommerce' ),
+			// Production credentials.
-				'type'         => 'ppcp-text',
+			'credentials_production_heading' => array(
-				'text'         => $sandbox_text,
+				'heading'      => __( 'API', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-heading',
 				'screens'      => array(
 					State::STATE_PROGRESSIVE,
 					State::STATE_ONBOARDED,
 				),
-				'hidden'       => 'sandbox_on',
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
-			'merchant_email'             => array(
+			'ppcp_onboarding_production'     => array(
-				'title'        => __( 'Email address', 'paypal-payments-for-woocommerce' ),
+				'title'        => __( 'Connect to PayPal', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp_onboarding',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'production',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'ppcp_disconnect_production'     => array(
+				'title'        => __( 'Disconnect from PayPal', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-text',
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" class="button ppcp-disconnect production">' . esc_html__( 'Disconnect', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'production',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'production_toggle_manual_input' => array(
+				'type'         => 'ppcp-text',
+				'title'        => __( 'Manual mode', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" id="ppcp[production_toggle_manual_input]" class="production-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'merchant_email_production'      => array(
+				'title'        => __( 'Live Email address', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
 				'type'         => 'text',
 				'required'     => true,
 				'desc_tip'     => true,
 				'description'  => __( 'The email address of your PayPal account.', 'paypal-payments-for-woocommerce' ),
 				'default'      => '',
-				'screens'      => array(
-					State::STATE_START,
-				),
-				'requirements' => array(),
-				'gateway'      => 'paypal',
-			),
-			'merchant_email_info'        => array(
-				'title'        => __( 'Email address', 'paypal-payments-for-woocommerce' ),
-				'type'         => 'ppcp-text',
-				'text'         => $merchant_email_text,
-				'screens'      => array(
-					State::STATE_PROGRESSIVE,
-					State::STATE_ONBOARDED,
-				),
-				'hidden'       => 'merchant_email',
-				'requirements' => array(),
-				'gateway'      => 'paypal',
-			),
-			'toggle_manual_input'        => array(
-				'type'         => 'ppcp-text',
-				'title'        => __( 'Manual mode', 'paypal-payments-for-woocommerce' ),
-				'text'         => '<button id="ppcp[toggle_manual_input]"><span class="show">' . __( 'Show manual credential input', 'paypal-payments-for-woocommerce' ) . '</span><span class="hide">' . __( 'Hide manual credential input', 'paypal-payments-for-woocommerce' ) . '</span></button>',
 				'screens'      => array(
 					State::STATE_START,
 					State::STATE_PROGRESSIVE,
@@ -265,8 +257,9 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
-			'merchant_id'                => array(
+			'merchant_id_production'         => array(
-				'title'        => __( 'Merchant Id', 'paypal-payments-for-woocommerce' ),
+				'title'        => __( 'Live Merchant Id', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The merchant id of your account ', 'paypal-payments-for-woocommerce' ),
@@ -279,8 +272,9 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
-			'client_id'                  => array(
+			'client_id_production'           => array(
-				'title'        => __( 'Client Id', 'paypal-payments-for-woocommerce' ),
+				'title'        => __( 'Live Client Id', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The client id of your api ', 'paypal-payments-for-woocommerce' ),
@@ -293,8 +287,121 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
-			'client_secret'              => array(
+			'client_secret_production'       => array(
-				'title'        => __( 'Secret Key', 'paypal-payments-for-woocommerce' ),
+				'title'        => __( 'Live Secret Key', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'type'         => 'ppcp-password',
+				'desc_tip'     => true,
+				'description'  => __( 'The secret key of your api', 'paypal-payments-for-woocommerce' ),
+				'default'      => false,
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+
+			// Sandbox credentials.
+			'credentials_sandbox_heading'    => array(
+				'heading'      => __( 'Sandbox API', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-heading',
+				'screens'      => array(
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'ppcp_onboarding_sandbox'        => array(
+				'title'        => __( 'Connect to PayPal', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp_onboarding',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'sandbox',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'ppcp_disconnect_sandbox'        => array(
+				'title'        => __( 'Disconnect from PayPal Sandbox', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-text',
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" class="button ppcp-disconnect sandbox">' . esc_html__( 'Disconnect', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'production',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'sandbox_toggle_manual_input'    => array(
+				'type'         => 'ppcp-text',
+				'title'        => __( 'Manual mode', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" id="ppcp[sandbox_toggle_manual_input]" class="sandbox-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'merchant_email_sandbox'         => array(
+				'title'        => __( 'Sandbox Email address', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'type'         => 'text',
+				'required'     => true,
+				'desc_tip'     => true,
+				'description'  => __( 'The email address of your PayPal account.', 'paypal-payments-for-woocommerce' ),
+				'default'      => '',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'merchant_id_sandbox'            => array(
+				'title'        => __( 'Sandbox Merchant Id', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'type'         => 'ppcp-text-input',
+				'desc_tip'     => true,
+				'description'  => __( 'The merchant id of your account ', 'paypal-payments-for-woocommerce' ),
+				'default'      => false,
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'client_id_sandbox'              => array(
+				'title'        => __( 'Sandbox Client Id', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'type'         => 'ppcp-text-input',
+				'desc_tip'     => true,
+				'description'  => __( 'The client id of your api ', 'paypal-payments-for-woocommerce' ),
+				'default'      => false,
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
+			'client_secret_sandbox'          => array(
+				'title'        => __( 'Sandbox Secret Key', 'paypal-payments-for-woocommerce' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
 				'type'         => 'ppcp-password',
 				'desc_tip'     => true,
 				'description'  => __( 'The secret key of your api', 'paypal-payments-for-woocommerce' ),
@@ -526,7 +633,6 @@ return array(
 				'description'  => __( 'Enable logging of unexpected behavior. This can also log private data and should only be enabled in a development or stage environment.', 'paypal-payments-for-woocommerce' ),
 				'default'      => false,
 				'screens'      => array(
-					State::STATE_START,
 					State::STATE_PROGRESSIVE,
 					State::STATE_ONBOARDED,
 				),
@@ -540,7 +646,6 @@ return array(
 				'description'  => __( 'If you use your PayPal account with more than one installation, please use a distinct prefix to seperate those installations. Please do not use numbers in your prefix.', 'paypal-payments-for-woocommerce' ),
 				'default'      => 'WC-',
 				'screens'      => array(
-					State::STATE_START,
 					State::STATE_PROGRESSIVE,
 					State::STATE_ONBOARDED,
 				),
@@ -1604,6 +1709,18 @@ return array(
 		if ( ! defined( 'PPCP_FLAG_SUBSCRIPTION' ) || ! PPCP_FLAG_SUBSCRIPTION ) {
 			unset( $fields['vault_enabled'] );
 		}
+
+		if ( State::STATE_ONBOARDED === $state->production_state() ) {
+			unset( $fields['ppcp_onboarding_production'] );
+		} else {
+			unset( $fields['ppcp_disconnect_production'] );
+		}
+		if ( State::STATE_ONBOARDED === $state->sandbox_state() ) {
+			unset( $fields['ppcp_onboarding_sandbox'] );
+		} else {
+			unset( $fields['ppcp_disconnect_sandbox'] );
+		}
+
 		/**
 		 * Disable card for UK.
 		 */

modules/ppcp-wc-gateway/src/Gateway/class-paypalgateway.php

@@ -184,7 +184,9 @@ class PayPalGateway extends \WC_Payment_Gateway {
 				'type' => 'ppcp',
 			),
 		);
-		if ( $this->is_credit_card_tab() ) {
+
+		$should_show_enabled_checkbox = ! $this->is_credit_card_tab() && ( $this->config->has( 'merchant_email' ) && $this->config->get( 'merchant_email' ) );
+		if ( ! $should_show_enabled_checkbox ) {
 			unset( $this->form_fields['enabled'] );
 		}
 	}

modules/ppcp-wc-gateway/src/Settings/class-settings.php

@@ -72,17 +72,6 @@ class Settings implements ContainerInterface {
 		update_option( self::KEY, $this->settings );
 	}
 
-	/**
-	 * Resets the onboarding.
-	 *
-	 * @return bool
-	 */
-	public function reset(): bool {
-		$this->load();
-		$this->settings = array();
-
-		return true;
-	}
 
 	/**
 	 * Loads the settings.

modules/ppcp-wc-gateway/src/Settings/class-settingslistener.php

@@ -97,13 +97,32 @@ class SettingsListener {
 		 * phpcs:disable WordPress.Security.NonceVerification.Missing
 		 * phpcs:disable WordPress.Security.NonceVerification.Recommended
 		 */
-		if ( isset( $_GET['merchantIdInPayPal'] ) ) {
+		if ( ! isset( $_GET['merchantIdInPayPal'] ) || ! isset( $_GET['merchantId'] ) ) {
-			$this->settings->set( 'merchant_id', sanitize_text_field( wp_unslash( $_GET['merchantIdInPayPal'] ) ) );
+			return;
-			$this->settings->persist();
 		}
+		$merchant_id    = sanitize_text_field( wp_unslash( $_GET['merchantIdInPayPal'] ) );
+		$merchant_email = sanitize_text_field( wp_unslash( $_GET['merchantId'] ) );
 		// phpcs:enable WordPress.Security.NonceVerification.Missing
 		// phpcs:enable WordPress.Security.NonceVerification.Recommended
 
+		$this->settings->set( 'merchant_id', $merchant_id );
+		$this->settings->set( 'merchant_email', $merchant_email );
+
+		$is_sandbox = $this->settings->has( 'sandbox_on' ) && $this->settings->get( 'sandbox_on' );
+		if ( $is_sandbox ) {
+			$this->settings->set( 'merchant_id_sandbox', $merchant_id );
+			$this->settings->set( 'merchant_email_sandbox', $merchant_email );
+		} else {
+			$this->settings->set( 'merchant_id_production', $merchant_id );
+			$this->settings->set( 'merchant_email_production', $merchant_email );
+		}
+		$this->settings->persist();
+		$redirect_url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=ppcp-gateway' );
+		if ( ! $this->settings->has( 'client_id' ) || ! $this->settings->get( 'client_id' ) ) {
+			$redirect_url = admin_url( 'admin.php?page=wc-settings&tab=checkout&section=ppcp-gateway&ppcp-onboarding-error=1' );
+		}
+		wp_safe_redirect( $redirect_url, 302 );
+		exit;
 	}
 
 	/**
@@ -118,34 +137,28 @@ class SettingsListener {
 		}
 
 		/**
-		 * Nonce verification has been done in is_valid_update_request().
+		 * Sanitization is done in retrieve_settings_from_raw_data().
+		 *
+		 * phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+		 *
+		 * Nonce verification is done in is_valid_update_request().
 		 *
 		 * phpcs:disable WordPress.Security.NonceVerification.Missing
 		 * phpcs:disable WordPress.Security.NonceVerification.Recommended
 		 */
-		if ( isset( $_POST['save'] ) && sanitize_text_field( wp_unslash( $_POST['save'] ) ) === 'reset' ) {
-			$this->settings->reset();
-			$this->settings->persist();
-			$this->webhook_registrar->unregister();
-			if ( $this->cache->has( PayPalBearer::CACHE_KEY ) ) {
-				$this->cache->delete( PayPalBearer::CACHE_KEY );
-			}
-			return;
-		}
-
-		/**
-		 * Sanitization is done in retrieve_settings_from_raw_data().
-		 *
-		 * phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
-		 */
 		$raw_data = ( isset( $_POST['ppcp'] ) ) ? (array) wp_unslash( $_POST['ppcp'] ) : array();
 		// phpcs:enable phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
 		$settings = $this->retrieve_settings_from_raw_data( $raw_data );
+
+		$settings = $this->read_active_credentials_from_settings( $settings );
+
 		if ( ! isset( $_GET[ SectionsRenderer::KEY ] ) || PayPalGateway::ID === $_GET[ SectionsRenderer::KEY ] ) {
 			$settings['enabled'] = isset( $_POST['woocommerce_ppcp-gateway_enabled'] )
 				&& 1 === absint( $_POST['woocommerce_ppcp-gateway_enabled'] );
 			$this->maybe_register_webhooks( $settings );
 		}
+		// phpcs:enable phpcs:disable WordPress.Security.NonceVerification.Missing
+		// phpcs:enable phpcs:disable WordPress.Security.NonceVerification.Missing
 
 		foreach ( $settings as $id => $value ) {
 			$this->settings->set( $id, $value );
@@ -155,10 +168,36 @@ class SettingsListener {
 			$this->cache->delete( PayPalBearer::CACHE_KEY );
 		}
 
+		if ( isset( $_GET['ppcp-onboarding-error'] ) ) {
+			$url = remove_query_arg( 'ppcp-onboarding-error' );
+			wp_safe_redirect( $url, 302 );
+			exit;
+		}
+
 		// phpcs:enable WordPress.Security.NonceVerification.Missing
 		// phpcs:enable WordPress.Security.NonceVerification.Recommended
 	}
 
+	/**
+	 * The actual used client credentials are stored in 'client_secret', 'client_id', 'merchant_id' and 'merchant_email'.
+	 * This method populates those fields depending on the sandbox status.
+	 *
+	 * @param array $settings The settings array.
+	 *
+	 * @return array
+	 */
+	private function read_active_credentials_from_settings( array $settings ) : array {
+		if ( ! isset( $settings['client_id_sandbox'] ) && ! isset( $settings['client_id_production'] ) ) {
+			return $settings;
+		}
+		$is_sandbox                 = isset( $settings['sandbox_on'] ) && $settings['sandbox_on'];
+		$settings['client_id']      = $is_sandbox ? $settings['client_id_sandbox'] : $settings['client_id_production'];
+		$settings['client_secret']  = $is_sandbox ? $settings['client_secret_sandbox'] : $settings['client_secret_production'];
+		$settings['merchant_id']    = $is_sandbox ? $settings['merchant_id_sandbox'] : $settings['merchant_id_production'];
+		$settings['merchant_email'] = $is_sandbox ? $settings['merchant_email_sandbox'] : $settings['merchant_email_production'];
+		return $settings;
+	}
+
 	/**
 	 * Depending on the settings change, we might need to register or unregister the Webhooks at PayPal.
 	 *

modules/ppcp-wc-gateway/src/Settings/class-settingsrenderer.php

@@ -9,6 +9,8 @@ declare(strict_types=1);
 
 namespace WooCommerce\PayPalCommerce\WcGateway\Settings;
 
+use WooCommerce\PayPalCommerce\AdminNotices\Entity\Message;
+use WooCommerce\PayPalCommerce\AdminNotices\Repository\Repository;
 use WooCommerce\PayPalCommerce\ApiClient\Helper\DccApplies;
 use WooCommerce\PayPalCommerce\Button\Helper\MessagesApply;
 use WooCommerce\PayPalCommerce\Onboarding\State;
@@ -90,6 +92,34 @@ class SettingsRenderer {
 		$this->dcc_product_status = $dcc_product_status;
 	}
 
+	/**
+	 * Returns the notice, when onboarding failed.
+	 *
+	 * @return array
+	 */
+	public function messages() : array {
+
+        //phpcs:disable WordPress.Security.NonceVerification.Recommended
+        //phpcs:disable WordPress.Security.NonceVerification.Missing
+		if ( ! isset( $_GET['ppcp-onboarding-error'] ) || ! empty( $_POST ) ) {
+			return array();
+		}
+		//phpcs:enable WordPress.Security.NonceVerification.Recommended
+		//phpcs:enable WordPress.Security.NonceVerification.Missing
+
+		$messages = array(
+			new Message(
+				__(
+					'We could not complete the onboarding process. Some features, such as card processing, will not be available. To fix this, please try again.',
+					'paypal-payments-for-woocommerce'
+				),
+				'error',
+				false
+			),
+		);
+		return $messages;
+	}
+
 	/**
 	 * Renders the multiselect field.
 	 *
@@ -224,8 +254,11 @@ class SettingsRenderer {
 	 */
 	public function render() {
 
-	    //phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		//phpcs:disable WordPress.Security.NonceVerification.Recommended
+		//phpcs:disable WordPress.Security.NonceVerification.Missing
 		$is_dcc = isset( $_GET[ SectionsRenderer::KEY ] ) && CreditCardGateway::ID === sanitize_text_field( wp_unslash( $_GET[ SectionsRenderer::KEY ] ) );
+		//phpcs:enable WordPress.Security.NonceVerification.Recommended
+		//phpcs:enable WordPress.Security.NonceVerification.Missing
 		$nonce = wp_create_nonce( SettingsListener::NONCE );
 		?>
 		<input type="hidden" name="ppcp-nonce" value="<?php echo esc_attr( $nonce ); ?>">
@@ -264,9 +297,9 @@ class SettingsRenderer {
 			$config['id'] = $id;
 			$th_td        = 'ppcp-heading' !== $config['type'] ? 'td' : 'th';
 			$colspan      = 'ppcp-heading' !== $config['type'] ? 1 : 2;
-
+			$classes      = isset( $config['classes'] ) ? $config['classes'] : array();
 			?>
-		<tr valign="top" id="<?php echo esc_attr( 'field-' . $field ); ?>">
+		<tr valign="top" id="<?php echo esc_attr( 'field-' . $field ); ?>" class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
 			<?php if ( 'ppcp-heading' !== $config['type'] ) : ?>
 			<th>
 				<label

modules/ppcp-wc-gateway/src/class-wcgatewaymodule.php

@@ -91,6 +91,15 @@ class WcGatewayModule implements ModuleInterface {
 					$notices[] = $authorized_message;
 				}
 
+				$settings_renderer = $container->get( 'wcgateway.settings.render' );
+				/**
+				 * The settings renderer.
+				 *
+				 * @var SettingsRenderer $settings_renderer
+				 */
+				$messages = $settings_renderer->messages();
+				$notices  = array_merge( $notices, $messages );
+
 				return $notices;
 			}
 		);

woocommerce-paypal-commerce-gateway.php

@@ -22,6 +22,13 @@ use Dhii\Container\DelegatingContainer;
 use Dhii\Container\ProxyContainer;
 use Dhii\Modular\Module\ModuleInterface;
 
+define( 'PAYPAL_API_URL', 'https://api.paypal.com' );
+define( 'PAYPAL_SANDBOX_API_URL', 'https://api.sandbox.paypal.com' );
+
+// @ToDo: Real connect.woocommerce.com production link.
+define( 'CONNECT_WOO_URL', 'http://connect-woo.wpcust.com/ppc' );
+define( 'CONNECT_WOO_SANDBOX_URL', 'http://connect-woo.wpcust.com/ppcsandbox' );
+
 ( function () {
 	include __DIR__ . '/vendor/autoload.php';