diff --git a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js
index 8a17927d7..22bd175de 100644
--- a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js
+++ b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js
@@ -158,7 +158,7 @@ class CheckoutActionHandler {
 		};
 		return {
 			createOrder,
-			onApprove: onApprove( this, this.errorHandler, this.spinner ),
+			onApprove: onApprove( this, this.errorHandler ),
 			onCancel: () => {
 				spinner.unblock();
 			},
diff --git a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js b/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js
index 629e8871a..3b3c9af2f 100644
--- a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js
+++ b/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js
@@ -1,5 +1,8 @@
-const onApprove = ( context, errorHandler, spinner ) => {
+import Spinner from '../Helper/Spinner';
+
+const onApprove = ( context, errorHandler ) => {
 	return ( data, actions ) => {
+		const spinner = Spinner.fullPage();
 		spinner.block();
 		errorHandler.clear();
 
@@ -19,7 +22,6 @@ const onApprove = ( context, errorHandler, spinner ) => {
 				return res.json();
 			} )
 			.then( ( data ) => {
-				spinner.unblock();
 				if ( ! data.success ) {
 					if ( data.data.code === 100 ) {
 						errorHandler.message( data.data.message );
@@ -35,6 +37,9 @@ const onApprove = ( context, errorHandler, spinner ) => {
 					throw new Error( data.data.message );
 				}
 				document.querySelector( '#place_order' ).click();
+			} )
+			.finally( () => {
+				spinner.unblock();
 			} );
 	};
 };