From 6c4c8fb7c192e078fb78c9b16cfae875498fe5cd Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Mon, 16 Mar 2020 12:09:29 +0100
Subject: [PATCH] Onboarding: Add toggles to configured payments in task list
 (https://github.com/woocommerce/woocommerce-admin/pull/3801)

* Add isConfigured property to all payment methods

* Remove payment configuration checks from server side

* Add isEnabled flags to all payment methods

* Add payment method toggle methods

* Extract payment methods

* Fix update options selectors

* Add error handling for payment method updates

* Remove configured from saved option

* Add event when payment is toggled

* Check if payment option exists before checking config

* Only fetch PayPal connection URL when plugin is active

* Only fetch Stripe connection URL when plugin is active
---
 .../task-list/tasks/payments/index.js         | 319 +++++++-----------
 .../task-list/tasks/payments/methods.js       | 198 +++++++++++
 .../task-list/tasks/payments/paypal.js        |  32 +-
 .../task-list/tasks/payments/stripe.js        |  15 +
 .../client/wc-api/options/operations.js       |   2 +-
 .../client/wc-api/options/selectors.js        |   6 +
 .../src/Features/Onboarding.php               |   6 +
 .../src/Features/OnboardingTasks.php          |  92 +----
 8 files changed, 377 insertions(+), 293 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js

diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js
index f71905c92ee..6ad044ffbe9 100644
--- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/index.js
@@ -2,9 +2,8 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Fragment, cloneElement, Component } from '@wordpress/element';
+import { cloneElement, Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { get, filter } from 'lodash';
 import { Button, FormToggle } from '@wordpress/components';
 import { withDispatch } from '@wordpress/data';
 
@@ -17,10 +16,6 @@ import {
 	getNewPath,
 	updateQueryString,
 } from '@woocommerce/navigation';
-import {
-	WC_ASSET_URL as wcAssetUrl,
-	getSetting,
-} from '@woocommerce/wc-admin-settings';
 
 /**
  * Internal dependencies
@@ -29,16 +24,21 @@ import { recordEvent } from 'lib/tracks';
 import { getCountryCode } from 'dashboard/utils';
 import withSelect from 'wc-api/with-select';
 import Plugins from '../steps/plugins';
-import Stripe from './stripe';
-import Square from './square';
-import PayPal from './paypal';
 import { pluginNames } from 'wc-api/onboarding/constants';
-import Klarna from './klarna';
-import PayFast from './payfast';
+import { getPaymentMethods } from './methods';
 
 class Payments extends Component {
-	constructor() {
+	constructor( props ) {
 		super( ...arguments );
+		const { methods } = props;
+
+		const enabledMethods = {};
+		methods.forEach(
+			( method ) => ( enabledMethods[ method.key ] = method.isEnabled )
+		);
+		this.state = {
+			enabledMethods,
+		};
 
 		this.recommendedMethod = 'stripe';
 		this.completeTask = this.completeTask.bind( this );
@@ -46,18 +46,43 @@ class Payments extends Component {
 		this.skipTask = this.skipTask.bind( this );
 	}
 
+	componentDidUpdate( prevProps ) {
+		const { createNotice, errors, methods, requesting } = this.props;
+
+		methods.forEach( ( method ) => {
+			const { key, title } = method;
+			if (
+				prevProps.requesting[ key ] &&
+				! requesting[ key ] &&
+				errors[ key ]
+			) {
+				createNotice(
+					'error',
+					sprintf(
+						__(
+							'There was a problem updating settings for %s',
+							'woocommerce-admin'
+						),
+						title
+					)
+				);
+			}
+		} );
+	}
+
 	completeTask() {
-		const { configured, createNotice, options, updateOptions } = this.props;
+		const { createNotice, methods, updateOptions } = this.props;
 
 		updateOptions( {
 			woocommerce_task_list_payments: {
-				...options.woocommerce_task_list_payments,
 				completed: 1,
 			},
 		} );
 
 		recordEvent( 'tasklist_payment_done', {
-			configured,
+			configured: methods
+				.filter( ( method ) => method.isConfigured )
+				.map( ( method ) => method.key ),
 		} );
 
 		createNotice(
@@ -72,199 +97,36 @@ class Payments extends Component {
 	}
 
 	skipTask() {
-		const { options, updateOptions } = this.props;
+		const { methods, updateOptions } = this.props;
 
 		updateOptions( {
 			woocommerce_task_list_payments: {
-				...options.woocommerce_task_list_payments,
 				completed: 1,
 			},
 		} );
 
 		recordEvent( 'tasklist_payment_skip_task', {
-			options: this.getMethodOptions().map( ( method ) => method.key ),
+			options: methods.map( ( method ) => method.key ),
 		} );
 
 		getHistory().push( getNewPath( {}, '/', {} ) );
 	}
 
-	isStripeEnabled() {
-		const { countryCode } = this.props;
-		const stripeCountries = getSetting( 'onboarding', {
-			stripeSupportedCountries: [],
-		} ).stripeSupportedCountries;
-		return stripeCountries.includes( countryCode );
-	}
-
 	markConfigured( method ) {
-		const { options, configured, updateOptions } = this.props;
-
 		getHistory().push( getNewPath( { task: 'payments' }, '/', {} ) );
 
-		if ( configured.includes( method ) ) {
-			return;
-		}
-
 		recordEvent( 'tasklist_payment_connect_method', {
 			payment_method: method,
 		} );
-
-		configured.push( method );
-		updateOptions( {
-			woocommerce_task_list_payments: {
-				...options.woocommerce_task_list_payments,
-				configured,
-			},
-		} );
-	}
-
-	getMethodOptions() {
-		const { countryCode, profileItems } = this.props;
-
-		const methods = [
-			{
-				key: 'stripe',
-				title: __(
-					'Credit cards - powered by Stripe',
-					'woocommerce-admin'
-				),
-				content: (
-					<Fragment>
-						{ __(
-							'Accept debit and credit cards in 135+ currencies, methods such as Alipay, ' +
-								'and one-touch checkout with Apple Pay.',
-							'woocommerce-admin'
-						) }
-					</Fragment>
-				),
-				before: <img src={ wcAssetUrl + 'images/stripe.png' } alt="" />,
-				visible: this.isStripeEnabled(),
-				plugins: [ 'woocommerce-gateway-stripe' ],
-				container: <Stripe markConfigured={ this.markConfigured } />,
-			},
-			{
-				key: 'paypal',
-				title: __( 'PayPal Checkout', 'woocommerce-admin' ),
-				content: (
-					<Fragment>
-						{ __(
-							"Safe and secure payments using credit cards or your customer's PayPal account.",
-							'woocommerce-admin'
-						) }
-					</Fragment>
-				),
-				before: <img src={ wcAssetUrl + 'images/paypal.png' } alt="" />,
-				visible: true,
-				plugins: [ 'woocommerce-gateway-paypal-express-checkout' ],
-				container: <PayPal markConfigured={ this.markConfigured } />,
-			},
-			{
-				key: 'klarna_checkout',
-				title: __( 'Klarna Checkout', 'woocommerce-admin' ),
-				content: __(
-					'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
-					'woocommerce-admin'
-				),
-				before: (
-					<img
-						src={ wcAssetUrl + 'images/klarna-black.png' }
-						alt=""
-					/>
-				),
-				visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
-				plugins: [ 'klarna-checkout-for-woocommerce' ],
-				container: (
-					<Klarna
-						markConfigured={ this.markConfigured }
-						plugin={ 'checkout' }
-					/>
-				),
-			},
-			{
-				key: 'klarna_payments',
-				title: __( 'Klarna Payments', 'woocommerce-admin' ),
-				content: __(
-					'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
-					'woocommerce-admin'
-				),
-				before: (
-					<img
-						src={ wcAssetUrl + 'images/klarna-black.png' }
-						alt=""
-					/>
-				),
-				visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
-				plugins: [ 'klarna-payments-for-woocommerce' ],
-				container: (
-					<Klarna
-						markConfigured={ this.markConfigured }
-						plugin={ 'payments' }
-					/>
-				),
-			},
-			{
-				key: 'square',
-				title: __( 'Square', 'woocommerce-admin' ),
-				content: __(
-					'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
-						'Sell online and in store and track sales and inventory in one place.',
-					'woocommerce-admin'
-				),
-				before: (
-					<img
-						src={ wcAssetUrl + 'images/square-black.png' }
-						alt=""
-					/>
-				),
-				visible:
-					[ 'brick-mortar', 'brick-mortar-other' ].includes(
-						profileItems.selling_venues
-					) &&
-					[ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
-				plugins: [ 'woocommerce-square' ],
-				container: <Square markConfigured={ this.markConfigured } />,
-			},
-			{
-				key: 'payfast',
-				title: __( 'PayFast', 'woocommerce-admin' ),
-				content: (
-					<Fragment>
-						{ __(
-							'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs.',
-							'woocommerce-admin'
-						) }
-						<p>
-							{ __(
-								'Selecting this extension will configure your store to use South African rands as the selected currency.',
-								'woocommerce-admin'
-							) }
-						</p>
-					</Fragment>
-				),
-				before: (
-					<img
-						src={ wcAssetUrl + 'images/payfast.png' }
-						alt="PayFast logo"
-					/>
-				),
-				visible: [ 'ZA' ].includes( countryCode ),
-				plugins: [ 'woocommerce-payfast-gateway' ],
-				container: <PayFast markConfigured={ this.markConfigured } />,
-			},
-		];
-
-		return filter( methods, ( method ) => method.visible );
 	}
 
 	getCurrentMethod() {
-		const { query } = this.props;
+		const { methods, query } = this.props;
 
 		if ( ! query.method ) {
 			return;
 		}
 
-		const methods = this.getMethodOptions();
-
 		return methods.find( ( method ) => method.key === query.method );
 	}
 
@@ -304,9 +166,34 @@ class Payments extends Component {
 		};
 	}
 
+	toggleMethod( key ) {
+		const { methods, options, updateOptions } = this.props;
+		const { enabledMethods } = this.state;
+		const method = methods.find( ( option ) => option.key === key );
+
+		enabledMethods[ key ] = ! enabledMethods[ key ];
+		this.setState( { enabledMethods } );
+
+		recordEvent( 'tasklist_payment_toggle', {
+			enabled: ! method.isEnabled,
+			payment_method: key,
+		} );
+
+		updateOptions( {
+			[ method.optionName ]: {
+				...options[ method.optionName ],
+				enabled: method.isEnabled ? 'no' : 'yes',
+			},
+		} );
+	}
+
 	render() {
 		const currentMethod = this.getCurrentMethod();
-		const { configured, query } = this.props;
+		const { methods, query } = this.props;
+		const { enabledMethods } = this.state;
+		const configuredMethods = methods.filter(
+			( method ) => method.isConfigured
+		).length;
 
 		if ( currentMethod ) {
 			return (
@@ -314,13 +201,12 @@ class Payments extends Component {
 					{ cloneElement( currentMethod.container, {
 						query,
 						installStep: this.getInstallStep(),
+						markConfigured: this.markConfigured,
 					} ) }
 				</Card>
 			);
 		}
 
-		const methods = this.getMethodOptions();
-
 		return (
 			<div className="woocommerce-task-payments">
 				{ methods.map( ( method ) => {
@@ -328,6 +214,7 @@ class Payments extends Component {
 						before,
 						container,
 						content,
+						isConfigured,
 						key,
 						title,
 						visible,
@@ -344,7 +231,7 @@ class Payments extends Component {
 						>
 							<div className="woocommerce-task-payment__before">
 								{ key === this.recommendedMethod &&
-									! configured.includes( key ) && (
+									! isConfigured && (
 										<div className="woocommerce-task-payment__recommended-ribbon">
 											<span>
 												{ __(
@@ -365,7 +252,7 @@ class Payments extends Component {
 								</p>
 							</div>
 							<div className="woocommerce-task-payment__after">
-								{ container ? (
+								{ container && ! isConfigured ? (
 									<Button
 										isPrimary={
 											key === this.recommendedMethod
@@ -377,7 +264,7 @@ class Payments extends Component {
 											recordEvent(
 												'tasklist_payment_setup',
 												{
-													options: this.getMethodOptions().map(
+													options: methods.map(
 														( option ) => option.key
 													),
 													selected: key,
@@ -391,14 +278,20 @@ class Payments extends Component {
 										{ __( 'Set up', 'woocommerce-admin' ) }
 									</Button>
 								) : (
-									<FormToggle />
+									<FormToggle
+										checked={ enabledMethods[ key ] }
+										onChange={ () =>
+											this.toggleMethod( key )
+										}
+										onClick={ ( e ) => e.stopPropagation() }
+									/>
 								) }
 							</div>
 						</Card>
 					);
 				} ) }
 				<div className="woocommerce-task-payments__actions">
-					{ configured.length === 0 ? (
+					{ configuredMethods.length === 0 ? (
 						<Button isLink onClick={ this.skipTask }>
 							{ __(
 								'My store doesn’t take payments',
@@ -418,30 +311,56 @@ class Payments extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getProfileItems, getActivePlugins, getOptions } = select(
-			'wc-api'
-		);
+		const {
+			getProfileItems,
+			getActivePlugins,
+			getOptions,
+			getUpdateOptionsError,
+			isUpdateOptionsRequesting,
+		} = select( 'wc-api' );
 
+		const activePlugins = getActivePlugins();
+		const profileItems = getProfileItems();
 		const options = getOptions( [
-			'woocommerce_task_list_payments',
 			'woocommerce_default_country',
+			'woocommerce_stripe_settings',
+			'woocommerce_ppec_paypal_settings',
+			'woocommerce_payfast_settings',
+			'woocommerce_square_credit_card_settings',
+			'woocommerce_klarna_payments_settings',
+			'woocommerce_kco_settings',
+			'wc_square_refresh_tokens',
 		] );
 		const countryCode = getCountryCode(
 			options.woocommerce_default_country
 		);
 
-		const configured = get(
+		const methods = getPaymentMethods( {
+			activePlugins,
+			countryCode,
 			options,
-			[ 'woocommerce_task_list_payments', 'configured' ],
-			[]
-		);
+			profileItems,
+		} );
+
+		const errors = {};
+		const requesting = {};
+		methods.forEach( ( method ) => {
+			errors[ method.key ] = Boolean(
+				getUpdateOptionsError( [ method.optionName ] )
+			);
+			requesting[ method.key ] = Boolean(
+				isUpdateOptionsRequesting( [ method.optionName ] )
+			);
+		} );
 
 		return {
 			countryCode,
-			profileItems: getProfileItems(),
-			activePlugins: getActivePlugins(),
+			errors,
+			profileItems,
+			activePlugins,
 			options,
-			configured,
+			methods,
+			requesting,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js
new file mode 100644
index 00000000000..fdcd4460013
--- /dev/null
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/methods.js
@@ -0,0 +1,198 @@
+/**
+ * External dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { filter } from 'lodash';
+
+/**
+ * WooCommerce dependencies
+ */
+import {
+	getSetting,
+	WC_ASSET_URL as wcAssetUrl,
+} from '@woocommerce/wc-admin-settings';
+
+/**
+ * Internal dependencies
+ */
+import Stripe from './stripe';
+import Square from './square';
+import PayPal from './paypal';
+import Klarna from './klarna';
+import PayFast from './payfast';
+
+export function getPaymentMethods( {
+	activePlugins,
+	countryCode,
+	options,
+	profileItems,
+} ) {
+	const stripeCountries = getSetting( 'onboarding', {
+		stripeSupportedCountries: [],
+	} ).stripeSupportedCountries;
+
+	const methods = [
+		{
+			key: 'stripe',
+			title: __(
+				'Credit cards - powered by Stripe',
+				'woocommerce-admin'
+			),
+			content: (
+				<Fragment>
+					{ __(
+						'Accept debit and credit cards in 135+ currencies, methods such as Alipay, ' +
+							'and one-touch checkout with Apple Pay.',
+						'woocommerce-admin'
+					) }
+				</Fragment>
+			),
+			before: <img src={ wcAssetUrl + 'images/stripe.png' } alt="" />,
+			visible: stripeCountries.includes( countryCode ),
+			plugins: [ 'woocommerce-gateway-stripe' ],
+			container: <Stripe />,
+			isConfigured:
+				options.woocommerce_stripe_settings &&
+				options.woocommerce_stripe_settings.publishable_key &&
+				options.woocommerce_stripe_settings.secret_key,
+			isEnabled:
+				options.woocommerce_stripe_settings &&
+				options.woocommerce_stripe_settings.enabled === 'yes',
+			optionName: 'woocommerce_stripe_settings',
+		},
+		{
+			key: 'paypal',
+			title: __( 'PayPal Checkout', 'woocommerce-admin' ),
+			content: (
+				<Fragment>
+					{ __(
+						"Safe and secure payments using credit cards or your customer's PayPal account.",
+						'woocommerce-admin'
+					) }
+				</Fragment>
+			),
+			before: <img src={ wcAssetUrl + 'images/paypal.png' } alt="" />,
+			visible: true,
+			plugins: [ 'woocommerce-gateway-paypal-express-checkout' ],
+			container: <PayPal />,
+			isConfigured:
+				options.woocommerce_ppec_paypal_settings &&
+				options.woocommerce_ppec_paypal_settings.api_username &&
+				options.woocommerce_ppec_paypal_settings.api_password,
+			isEnabled:
+				options.woocommerce_ppec_paypal_settings &&
+				options.woocommerce_ppec_paypal_settings.enabled === 'yes',
+			optionName: 'woocommerce_ppec_paypal_settings',
+		},
+		{
+			key: 'klarna_checkout',
+			title: __( 'Klarna Checkout', 'woocommerce-admin' ),
+			content: __(
+				'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
+				'woocommerce-admin'
+			),
+			before: (
+				<img src={ wcAssetUrl + 'images/klarna-black.png' } alt="" />
+			),
+			visible: [ 'SE', 'FI', 'NO', 'NL' ].includes( countryCode ),
+			plugins: [ 'klarna-checkout-for-woocommerce' ],
+			container: <Klarna plugin={ 'checkout' } />,
+			// @todo This should check actual Klarna connection information.
+			isConfigured: activePlugins.includes(
+				'klarna-checkout-for-woocommerce'
+			),
+			isEnabled:
+				options.woocommerce_kco_settings &&
+				options.woocommerce_kco_settings.enabled === 'yes',
+			optionName: 'woocommerce_kco_settings',
+		},
+		{
+			key: 'klarna_payments',
+			title: __( 'Klarna Payments', 'woocommerce-admin' ),
+			content: __(
+				'Choose the payment that you want, pay now, pay later or slice it. No credit card numbers, no passwords, no worries.',
+				'woocommerce-admin'
+			),
+			before: (
+				<img src={ wcAssetUrl + 'images/klarna-black.png' } alt="" />
+			),
+			visible: [ 'DK', 'DE', 'AT' ].includes( countryCode ),
+			plugins: [ 'klarna-payments-for-woocommerce' ],
+			container: <Klarna plugin={ 'payments' } />,
+			// @todo This should check actual Klarna connection information.
+			isConfigured: activePlugins.includes(
+				'klarna-payments-for-woocommerce'
+			),
+			isEnabled:
+				options.woocommerce_klarna_payments_settings &&
+				options.woocommerce_klarna_payments_settings.enabled === 'yes',
+			optionName: 'woocommerce_klarna_payments_settings',
+		},
+		{
+			key: 'square',
+			title: __( 'Square', 'woocommerce-admin' ),
+			content: __(
+				'Securely accept credit and debit cards with one low rate, no surprise fees (custom rates available). ' +
+					'Sell online and in store and track sales and inventory in one place.',
+				'woocommerce-admin'
+			),
+			before: (
+				<img src={ wcAssetUrl + 'images/square-black.png' } alt="" />
+			),
+			visible:
+				[ 'brick-mortar', 'brick-mortar-other' ].includes(
+					profileItems.selling_venues
+				) && [ 'US', 'CA', 'JP', 'GB', 'AU' ].includes( countryCode ),
+			plugins: [ 'woocommerce-square' ],
+			container: <Square />,
+			isConfigured:
+				options.wc_square_refresh_tokens &&
+				options.wc_square_refresh_tokens.length,
+			isEnabled:
+				options.woocommerce_square_credit_card_settings &&
+				options.woocommerce_square_credit_card_settings.enabled ===
+					'yes',
+			optionName: 'woocommerce_square_credit_card_settings',
+		},
+		{
+			key: 'payfast',
+			title: __( 'PayFast', 'woocommerce-admin' ),
+			content: (
+				<Fragment>
+					{ __(
+						'The PayFast extension for WooCommerce enables you to accept payments by Credit Card and EFT via one of South Africa’s most popular payment gateways. No setup fees or monthly subscription costs.',
+						'woocommerce-admin'
+					) }
+					<p>
+						{ __(
+							'Selecting this extension will configure your store to use South African rands as the selected currency.',
+							'woocommerce-admin'
+						) }
+					</p>
+				</Fragment>
+			),
+			before: (
+				<img
+					src={ wcAssetUrl + 'images/payfast.png' }
+					alt="PayFast logo"
+				/>
+			),
+			visible: [ 'ZA' ].includes( countryCode ),
+			plugins: [ 'woocommerce-payfast-gateway' ],
+			container: <PayFast />,
+			isConfigured:
+				options.woocommerce_payfast_settings &&
+				options.woocommerce_payfast_settings.merchant_id &&
+				options.woocommerce_payfast_settings.merchant_key &&
+				options.woocommerce_payfast_settings.pass_phrase,
+			isEnabled:
+				options.woocommerce_payfast_settings &&
+				options.woocommerce_payfast_settings.enabled === 'yes',
+			optionName: 'woocommerce_payfast_settings',
+		},
+	];
+
+	return filter( methods, ( method ) => method.visible );
+}
diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js
index 8c722608968..e313b5fc79f 100644
--- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/paypal.js
@@ -31,7 +31,6 @@ class PayPal extends Component {
 	}
 
 	componentDidMount() {
-		const { autoConnectFailed } = this.state;
 		const { createNotice, markConfigured } = this.props;
 
 		const query = getQuery();
@@ -54,12 +53,35 @@ class PayPal extends Component {
 			return;
 		}
 
-		if ( ! autoConnectFailed ) {
+		this.fetchOAuthConnectURL();
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { activePlugins } = this.props;
+
+		if (
+			! prevProps.activePlugins.includes(
+				'woocommerce-gateway-paypal-express-checkout'
+			) &&
+			activePlugins.includes(
+				'woocommerce-gateway-paypal-express-checkout'
+			)
+		) {
 			this.fetchOAuthConnectURL();
 		}
 	}
 
 	async fetchOAuthConnectURL() {
+		const { activePlugins } = this.props;
+
+		if (
+			! activePlugins.includes(
+				'woocommerce-gateway-paypal-express-checkout'
+			)
+		) {
+			return;
+		}
+
 		this.setState( { isPending: true } );
 		try {
 			const result = await apiFetch( {
@@ -268,13 +290,17 @@ PayPal.defaultProps = {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getOptions, isGetOptionsRequesting } = select( 'wc-api' );
+		const { getActivePlugins, getOptions, isGetOptionsRequesting } = select(
+			'wc-api'
+		);
 		const options = getOptions( [ 'woocommerce_ppec_paypal_settings' ] );
 		const isOptionsRequesting = Boolean(
 			isGetOptionsRequesting( [ 'woocommerce_ppec_paypal_settings' ] )
 		);
+		const activePlugins = getActivePlugins();
 
 		return {
+			activePlugins,
 			options,
 			isOptionsRequesting,
 		};
diff --git a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js
index 367e9073b13..1adeb60a7cc 100644
--- a/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js
+++ b/plugins/woocommerce-admin/client/dashboard/task-list/tasks/payments/stripe.js
@@ -68,6 +68,7 @@ class Stripe extends Component {
 
 	componentDidUpdate( prevProps ) {
 		const {
+			activePlugins,
 			createNotice,
 			isOptionsRequesting,
 			hasOptionsError,
@@ -86,6 +87,15 @@ class Stripe extends Component {
 				);
 			}
 		}
+
+		if (
+			! prevProps.activePlugins.includes(
+				'woocommerce-gateway-stripe'
+			) &&
+			activePlugins.includes( 'woocommerce-gateway-stripe' )
+		) {
+			this.fetchOAuthConnectURL();
+		}
 	}
 
 	requiresManualConfig() {
@@ -113,6 +123,11 @@ class Stripe extends Component {
 	}
 
 	async fetchOAuthConnectURL() {
+		const { activePlugins } = this.props;
+		if ( ! activePlugins.includes( 'woocommerce-gateway-stripe' ) ) {
+			return;
+		}
+
 		try {
 			this.setState( { isPending: true } );
 			const result = await apiFetch( {
diff --git a/plugins/woocommerce-admin/client/wc-api/options/operations.js b/plugins/woocommerce-admin/client/wc-api/options/operations.js
index b9d45e148ba..71e80b9282c 100644
--- a/plugins/woocommerce-admin/client/wc-api/options/operations.js
+++ b/plugins/woocommerce-admin/client/wc-api/options/operations.js
@@ -50,7 +50,7 @@ function updateOptions( resourceNames, data, fetch ) {
 		} )
 			.then( () => optionsToResource( data[ resourceName ], true ) )
 			.catch( ( error ) => {
-				return { [ resourceName ]: { error } };
+				return { [ resourceName ]: { data: {}, error } };
 			} );
 	} );
 }
diff --git a/plugins/woocommerce-admin/client/wc-api/options/selectors.js b/plugins/woocommerce-admin/client/wc-api/options/selectors.js
index a99412e9a0c..04157267ad2 100644
--- a/plugins/woocommerce-admin/client/wc-api/options/selectors.js
+++ b/plugins/woocommerce-admin/client/wc-api/options/selectors.js
@@ -43,6 +43,11 @@ const getOptionsError = ( getResource ) => ( optionNames ) => {
 	return getResource( getResourceName( 'options', optionNames ) ).error;
 };
 
+const getUpdateOptionsError = ( getResource ) => ( optionNames ) => {
+	return getResource( getResourceName( 'options-update', optionNames ) )
+		.error;
+};
+
 const isGetOptionsRequesting = ( getResource ) => ( optionNames ) => {
 	const { lastReceived, lastRequested } = getResource(
 		getResourceName( 'options', optionNames )
@@ -70,6 +75,7 @@ const isUpdateOptionsRequesting = ( getResource ) => ( optionNames ) => {
 export default {
 	getOptions,
 	getOptionsError,
+	getUpdateOptionsError,
 	isGetOptionsRequesting,
 	isUpdateOptionsRequesting,
 };
diff --git a/plugins/woocommerce-admin/src/Features/Onboarding.php b/plugins/woocommerce-admin/src/Features/Onboarding.php
index c22e6430476..e18fff84dc3 100644
--- a/plugins/woocommerce-admin/src/Features/Onboarding.php
+++ b/plugins/woocommerce-admin/src/Features/Onboarding.php
@@ -492,7 +492,13 @@ class Onboarding {
 		$options[] = 'woocommerce_task_list_payments';
 		$options[] = 'woocommerce_allow_tracking';
 		$options[] = 'woocommerce_stripe_settings';
+		$options[] = 'woocommerce_ppec_paypal_settings';
+		$options[] = 'wc_square_refresh_tokens';
+		$options[] = 'woocommerce_square_credit_card_settings';
+		$options[] = 'woocommerce_payfast_settings';
 		$options[] = 'woocommerce_default_country';
+		$options[] = 'woocommerce_kco_settings';
+		$options[] = 'woocommerce_klarna_payments_settings';
 
 		return $options;
 	}
diff --git a/plugins/woocommerce-admin/src/Features/OnboardingTasks.php b/plugins/woocommerce-admin/src/Features/OnboardingTasks.php
index ba2af6d29ab..7b6f5d434a9 100644
--- a/plugins/woocommerce-admin/src/Features/OnboardingTasks.php
+++ b/plugins/woocommerce-admin/src/Features/OnboardingTasks.php
@@ -64,92 +64,6 @@ class OnboardingTasks {
 		add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_tax_notice_admin_script' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_product_import_notice_admin_script' ) );
 		add_action( 'admin_enqueue_scripts', array( $this, 'add_onboarding_menu_experience_script' ) );
-
-		// Update payment cache on payment gateways update.
-		add_action( 'update_option_woocommerce_stripe_settings', array( $this, 'check_stripe_completion' ), 10, 2 );
-		add_action( 'add_option_woocommerce_stripe_settings', array( $this, 'check_stripe_completion' ), 10, 2 );
-		add_action( 'update_option_woocommerce_ppec_paypal_settings', array( $this, 'check_paypal_completion' ), 10, 2 );
-		add_action( 'add_option_woocommerce_ppec_paypal_settings', array( $this, 'check_paypal_completion' ), 10, 2 );
-		add_action( 'add_option_wc_square_refresh_tokens', array( $this, 'check_square_completion' ), 10, 2 );
-	}
-
-	/**
-	 * Check if Square payment settings are complete.
-	 *
-	 * @param string $option Option name.
-	 * @param array  $value Current value.
-	 */
-	public static function check_square_completion( $option, $value ) {
-		if ( empty( $value ) ) {
-			return;
-		}
-
-		self::mark_payment_method_configured( 'square' );
-	}
-
-
-	/**
-	 * Check if Paypal payment settings are complete.
-	 *
-	 * @param mixed $old_value Old value.
-	 * @param array $value Current value.
-	 */
-	public static function check_paypal_completion( $old_value, $value ) {
-		if (
-			! isset( $value['enabled'] ) ||
-			'yes' !== $value['enabled'] ||
-			! isset( $value['api_username'] ) ||
-			empty( $value['api_username'] ) ||
-			! isset( $value['api_password'] ) ||
-			empty( $value['api_password'] )
-		) {
-			return;
-		}
-
-		self::mark_payment_method_configured( 'paypal' );
-	}
-
-	/**
-	 * Check if Stripe payment settings are complete.
-	 *
-	 * @param mixed $old_value Old value.
-	 * @param array $value Current value.
-	 */
-	public static function check_stripe_completion( $old_value, $value ) {
-		if (
-			! isset( $value['enabled'] ) ||
-			'yes' !== $value['enabled'] ||
-			! isset( $value['publishable_key'] ) ||
-			empty( $value['publishable_key'] ) ||
-			! isset( $value['secret_key'] ) ||
-			empty( $value['secret_key'] )
-		) {
-			return;
-		}
-
-		self::mark_payment_method_configured( 'stripe' );
-	}
-
-	/**
-	 * Update the payments cache to complete if not already.
-	 *
-	 * @param string $payment_method Payment method slug.
-	 */
-	public static function mark_payment_method_configured( $payment_method ) {
-		$task_list_payments         = get_option( 'woocommerce_task_list_payments', array() );
-		$payment_methods            = isset( $task_list_payments['methods'] ) ? $task_list_payments['methods'] : array();
-		$configured_payment_methods = isset( $task_list_payments['configured'] ) ? $task_list_payments['configured'] : array();
-
-		if ( ! in_array( $payment_method, $configured_payment_methods, true ) ) {
-			$configured_payment_methods[]     = $payment_method;
-			$task_list_payments['configured'] = $configured_payment_methods;
-		}
-
-		if ( 0 === count( array_diff( $payment_methods, $configured_payment_methods ) ) ) {
-			$task_list_payments['completed'] = 1;
-		}
-
-		update_option( 'woocommerce_task_list_payments', $task_list_payments );
 	}
 
 	/**
@@ -201,8 +115,8 @@ class OnboardingTasks {
 	 * Temporarily store the active task to persist across page loads when neccessary (such as publishing a product). Most tasks do not need to do this.
 	 */
 	public static function set_active_task() {
-		if ( isset( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ) { // WPCS: csrf ok.
-			$task = sanitize_title_with_dashes( wp_unslash( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) );
+		if ( isset( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ) { // phpcs:ignore csrf ok.
+			$task = sanitize_title_with_dashes( wp_unslash( $_GET[ self::ACTIVE_TASK_TRANSIENT ] ) ); // phpcs:ignore csrf ok.
 
 			if ( self::check_task_completion( $task ) ) {
 				return;
@@ -212,7 +126,7 @@ class OnboardingTasks {
 				self::ACTIVE_TASK_TRANSIENT,
 				$task,
 				DAY_IN_SECONDS
-			); // WPCS: csrf ok.
+			);
 		}
 	}