diff --git a/changelog/dev-10177-convert-shopper-checkout-purchase-spec b/changelog/dev-10177-convert-shopper-checkout-purchase-spec
new file mode 100644
index 00000000000..50cbee9293d
--- /dev/null
+++ b/changelog/dev-10177-convert-shopper-checkout-purchase-spec
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Convert shopper-checkout-purchase spec from Puppeteer to Playwright
diff --git a/tests/e2e-pw/specs/shopper/shopper-checkout-purchase.spec.ts b/tests/e2e-pw/specs/shopper/shopper-checkout-purchase.spec.ts
index b062ab0098a..b2a0246d438 100644
--- a/tests/e2e-pw/specs/shopper/shopper-checkout-purchase.spec.ts
+++ b/tests/e2e-pw/specs/shopper/shopper-checkout-purchase.spec.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
 /**
  * Internal dependencies
@@ -9,34 +9,65 @@ import { test, expect } from '@playwright/test';
 
 import { config } from '../../config/default';
 import * as shopper from '../../utils/shopper';
+import * as devtools from '../../utils/devtools';
+import { getMerchant, getShopper } from '../../utils/helpers';
 
 test.describe( 'Successful purchase', () => {
-	test.beforeEach( async ( { page } ) => {
-		await shopper.addCartProduct( page );
-
-		await page.goto( '/checkout/' );
-		await shopper.fillBillingAddress(
-			page,
-			config.addresses.customer.billing
-		);
-	} );
-
-	test( 'using a basic card', async ( { page } ) => {
-		await shopper.fillCardDetails( page );
-		await shopper.placeOrder( page );
-
-		await expect(
-			page.getByText( 'Order received' ).first()
-		).toBeVisible();
-	} );
-
-	test( 'using a 3DS card', async ( { page } ) => {
-		await shopper.fillCardDetails( page, config.cards[ '3ds' ] );
-		await shopper.placeOrder( page );
-		await shopper.confirmCardAuthentication( page );
-
-		await expect(
-			page.getByText( 'Order received' ).first()
-		).toBeVisible();
-	} );
+	let merchantPage: Page;
+	let shopperPage: Page;
+
+	for ( const ctpEnabled of [ false, true ] ) {
+		test.describe( `Carding protection ${ ctpEnabled }`, () => {
+			test.beforeAll( async ( { browser } ) => {
+				shopperPage = ( await getShopper( browser ) ).shopperPage;
+				merchantPage = ( await getMerchant( browser ) ).merchantPage;
+				if ( ctpEnabled ) {
+					await devtools.enableCardTestingProtection( merchantPage );
+				}
+			} );
+
+			test.afterAll( async () => {
+				if ( ctpEnabled ) {
+					await devtools.disableCardTestingProtection( merchantPage );
+				}
+			} );
+
+			test.beforeEach( async () => {
+				await shopper.addCartProduct( shopperPage );
+				await shopper.setupCheckout(
+					shopperPage,
+					config.addresses.customer.billing
+				);
+				await shopper.expectFraudPreventionToken(
+					shopperPage,
+					ctpEnabled
+				);
+			} );
+
+			test( 'using a basic card', async () => {
+				await shopper.fillCardDetails( shopperPage );
+				await shopper.placeOrder( shopperPage );
+
+				await expect(
+					shopperPage.getByRole( 'heading', {
+						name: 'Order received',
+					} )
+				).toBeVisible();
+			} );
+
+			test( 'using a 3DS card', async () => {
+				await shopper.fillCardDetails(
+					shopperPage,
+					config.cards[ '3ds' ]
+				);
+				await shopper.placeOrder( shopperPage );
+				await shopper.confirmCardAuthentication( shopperPage );
+				await expect(
+					shopperPage.getByRole( 'heading', {
+						name: 'Order received',
+					} )
+				).toBeVisible();
+			} );
+		} );
+	}
 } );
diff --git a/tests/e2e/specs/wcpay/shopper/shopper-checkout-purchase.spec.js b/tests/e2e/specs/wcpay/shopper/shopper-checkout-purchase.spec.js
deleted file mode 100644
index c59c6c6aba9..00000000000
--- a/tests/e2e/specs/wcpay/shopper/shopper-checkout-purchase.spec.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * External dependencies
- */
-import config from 'config';
-
-const { shopper, merchant } = require( '@woocommerce/e2e-utils' );
-
-/**
- * Internal dependencies
- */
-
-import {
-	fillCardDetails,
-	setupProductCheckout,
-	confirmCardAuthentication,
-} from '../../../utils/payments';
-
-import { shopperWCP, merchantWCP } from '../../../utils';
-
-const cardTestingPreventionStates = [
-	{ cardTestingPreventionEnabled: false },
-	{ cardTestingPreventionEnabled: true },
-];
-
-describe.each( cardTestingPreventionStates )(
-	'Successful purchase, non-site builder theme',
-	( { cardTestingPreventionEnabled } ) => {
-		beforeAll( async () => {
-			if ( cardTestingPreventionEnabled ) {
-				await merchant.login();
-				await merchantWCP.enableCardTestingProtection();
-				await merchant.logout();
-			}
-		} );
-
-		beforeEach( async () => {
-			await shopperWCP.emptyCart();
-			await setupProductCheckout(
-				config.get( 'addresses.customer.billing' )
-			);
-		} );
-
-		afterAll( async () => {
-			// Clear the cart at the end so it's ready for another test
-			await shopperWCP.emptyCart();
-			if ( cardTestingPreventionEnabled ) {
-				await merchant.login();
-				await merchantWCP.disableCardTestingProtection();
-				await merchant.logout();
-			}
-		} );
-
-		it( `using a basic card, carding protection ${ cardTestingPreventionEnabled }`, async () => {
-			if ( cardTestingPreventionEnabled ) {
-				const token = await page.evaluate( () => {
-					return window.wcpayFraudPreventionToken;
-				} );
-				expect( token ).not.toBeUndefined();
-			}
-			const card = config.get( 'cards.basic' );
-			await fillCardDetails( page, card );
-			await shopper.placeOrder();
-			await expect( page ).toMatchTextContent( 'Order received' );
-		} );
-
-		it( `using a 3DS card, carding protection ${ cardTestingPreventionEnabled }`, async () => {
-			if ( cardTestingPreventionEnabled ) {
-				const token = await page.evaluate( () => {
-					return window.wcpayFraudPreventionToken;
-				} );
-				expect( token ).not.toBeUndefined();
-			}
-			const card = config.get( 'cards.3ds' );
-			await fillCardDetails( page, card );
-			await expect( page ).toClick( '#place_order' );
-			await confirmCardAuthentication( page );
-			await page.waitForNavigation( {
-				waitUntil: 'networkidle0',
-			} );
-			await expect( page ).toMatchTextContent( 'Order received' );
-		} );
-	}
-);