diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js
index fddc82a57..9fb626eaa 100644
--- a/modules/ppcp-button/resources/js/button.js
+++ b/modules/ppcp-button/resources/js/button.js
@@ -18,6 +18,7 @@ import {hide, setVisible} from "./modules/Helper/Hiding";
 import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
 
 const buttonsSpinner = new Spinner('.ppc-button-wrapper');
+const cardsSpinner = new Spinner('#ppcp-hosted-fields');
 
 const bootstrap = () => {
     const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@@ -118,8 +119,9 @@ document.addEventListener(
 
             const currentPaymentMethod = getCurrentPaymentMethod();
             const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL;
+            const isCards = currentPaymentMethod === PaymentMethods.CARDS;
 
-            setVisible(ORDER_BUTTON_SELECTOR, !isPaypal, true);
+            setVisible(ORDER_BUTTON_SELECTOR, !isPaypal && !isCards, true);
 
             if (isPaypal) {
                 // stopped after the first rendering of the buttons, in onInit
@@ -127,8 +129,18 @@ document.addEventListener(
             } else {
                 buttonsSpinner.unblock();
             }
+
+            if (isCards) {
+                cardsSpinner.block();
+            } else {
+                cardsSpinner.unblock();
+            }
         }
 
+        jQuery(document).on('hosted_fields_loaded', () => {
+            cardsSpinner.unblock();
+        });
+
         let bootstrapped = false;
 
         hideOrderButtonIfPpcpGateway();
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
index 5e4138118..d7cd9849c 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
@@ -1,4 +1,5 @@
 import dccInputFactory from "../Helper/DccInputFactory";
+import {show} from "../Helper/Hiding";
 
 class CreditCardRenderer {
 
@@ -32,6 +33,8 @@ class CreditCardRenderer {
             return;
         }
 
+        const buttonSelector = wrapper + ' button';
+
         if (this.currentHostedFieldsInstance) {
             this.currentHostedFieldsInstance.teardown()
                 .catch(err => console.error(`Hosted fields teardown error: ${err}`));
@@ -121,8 +124,10 @@ class CreditCardRenderer {
 
             });
 
+            show(buttonSelector);
+
             if (document.querySelector(wrapper).getAttribute('data-ppcp-subscribed') !== true) {
-                document.querySelector(wrapper + ' button').addEventListener(
+                document.querySelector(buttonSelector).addEventListener(
                     'click',
                     event => {
                         event.preventDefault();
diff --git a/modules/ppcp-button/src/Assets/SmartButton.php b/modules/ppcp-button/src/Assets/SmartButton.php
index 2420b9277..866ee4063 100644
--- a/modules/ppcp-button/src/Assets/SmartButton.php
+++ b/modules/ppcp-button/src/Assets/SmartButton.php
@@ -597,8 +597,10 @@ class SmartButton implements SmartButtonInterface {
 
 		printf(
 			'<div id="%1$s" style="display:none;">
-                        <button type="submit" class="button alt ppcp-dcc-order-button">%2$s</button>
-                    </div><div id="payments-sdk__contingency-lightbox"></div><style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
+						<button type="submit" class="button alt ppcp-dcc-order-button" style="display: none;">%2$s</button>
+					</div>
+                    <div id="payments-sdk__contingency-lightbox"></div>
+                    <style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
 			esc_attr( $id ),
 			esc_html( $label )
 		);