Skip to content

Resources for testing the WooCommerce Stripe Payment Gateway

James Allan edited this page Jul 8, 2024 · 4 revisions

Enabling Test Mode

You'll need to log into your Stripe Account to find your API keys. To find the API keys, first toggle the View test data checkbox, and you'll see your test API keys on the front page.

image

Follow the instructions in our official documentation to enable test mode in your store.

All of the test flows should be executed while the WooCommerce Stripe Payment Gateway is in Test Mode. If Live Mode is ever required it will be noted explicitly in the testing instructions.

Finding your webhook secret

Please follow the instructions in our official documentation.

In versions of the Stripe extension 8.5.0 or greater, copying and pasting the webhook secret is no longer necessary. Use the configure webhook button to automatically configure webhooks.

346453169-1321e6db-4bf0-45d1-abd1-440b8217b8af
Enter the Publishable and Secret key, click Configure webhooks, then Save test keys.

Plugin setup

You must enable Test Mode and set your API keys and webhook secret in the plugin settings. You'll find the plugin settings in WooCommerce > Settings > Payments > Stripe — Credit Card (Stripe).

To successfully complete some of the tests after you set up the WooCommerce Stripe Payment Gateway the site must be served with a publicly accessible URL (HTTPS is required for some tests, e.g. Payment Request Buttons).

Testing with WooCommerce Blocks

Some of the Critical Flows need to be tested with the WooCommerce Blocks plugin. Those Blocks flows have corresponding flows running on the default cart and checkout pages. To test the flows with WooCommerce Blocks:

  1. Install latest version of WooCommerce Blocks on the site.
  2. Create a custom page on the site, add Cart and Checkout blocks to it and publish the page.
  3. Follow the instructions for corresponding Critical flows but use the page you just created for purchases on behalf of the Shopper.

Add the Stripe Dev plugin

To manage the feature flags for UPE and the new Settings redesign, install the Code Snippets plugin and add the following snippet. This will add a new page named WC Stripe Dev in the sidebar menu, with 3 options:

  • UPE preview (show the Enable the new Stripe checkout experience early access banner)
  • UPE enabled (enable UPE)
  • UPE redesign (enable the new settings user interfase)
WC Stripe Dev code snippet
add_action( 'admin_menu', function () {
	$render_cb = function () {
		$action = $_POST['wc-stripe-action'] ?? '';
		switch ( $action ) {
			case 'enable-upe-preview':
				update_option( '_wcstripe_feature_upe', 'yes' );
				break;

			case 'disable-upe-preview':
				update_option( '_wcstripe_feature_upe', 'no' );
				break;

			case 'enable-upe':
				$stripe_settings = get_option( 'woocommerce_stripe_settings', [] );
				$stripe_settings['upe_checkout_experience_enabled'] = 'yes';
				update_option( 'woocommerce_stripe_settings', $stripe_settings );
				break;

			case 'disable-upe':
				$stripe_settings = get_option( 'woocommerce_stripe_settings', [] );
				$stripe_settings['upe_checkout_experience_enabled'] = 'no';
				update_option( 'woocommerce_stripe_settings', $stripe_settings );
				break;

			case 'enable-upe-redesign':
				update_option( '_wcstripe_feature_upe_settings', 'yes' );
				break;

			case 'disable-upe-redesign':
				update_option( '_wcstripe_feature_upe_settings', 'no' );
				break;
		}

		?>
		<div class="wrap">
			<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
			<form action="admin.php?page=wc-stripe-dev" method="post">
				<p>
					<strong>UPE preview (ability to enable UPE):</strong>
					<?php echo esc_html( get_option( '_wcstripe_feature_upe', 'no' ) ) ?>
					<button type="submit" name="wc-stripe-action" value="enable-upe-preview">enable</button>
					<button type="submit" name="wc-stripe-action" value="disable-upe-preview">disable</button>
				</p>
				<p>
					<strong>UPE enabled:</strong>
					<?php echo esc_html( get_option( 'woocommerce_stripe_settings', [] )['upe_checkout_experience_enabled'] ?? 'no' ) ?>
					<button type="submit" name="wc-stripe-action" value="enable-upe">enable</button>
					<button type="submit" name="wc-stripe-action" value="disable-upe">disable</button>
				</p>
				<p>
					<strong>UPE redesign:</strong>
					<?php echo esc_html( get_option( '_wcstripe_feature_upe_settings', 'no' ) ) ?>
					<button type="submit" name="wc-stripe-action" value="enable-upe-redesign">enable</button>
					<button type="submit" name="wc-stripe-action" value="disable-upe-redesign">disable</button>
				</p>
			</form>
		</div>
		<?php
	};

	add_menu_page(
		'WC Stripe Dev',
		'WC Stripe Dev',
		'manage_options',
		'wc-stripe-dev',
		$render_cb
	);
} );

Resources and mock data

Clone this wiki locally