diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
index dc5035383..4fec241f1 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
@@ -8,6 +8,7 @@ class CreditCardRenderer {
         this.spinner = spinner;
         this.cardValid = false;
         this.formValid = false;
+        this.currentHostedFieldsInstance = null;
     }
 
     render(wrapper, contextConfig) {
@@ -31,6 +32,12 @@ class CreditCardRenderer {
             return;
         }
 
+        if (this.currentHostedFieldsInstance) {
+            this.currentHostedFieldsInstance.teardown()
+                .catch(err => console.error(`Hosted fields teardown error: ${err}`));
+            this.currentHostedFieldsInstance = null;
+        }
+
         const gateWayBox = document.querySelector('.payment_box.payment_method_ppcp-credit-card-gateway');
         const oldDisplayStyle = gateWayBox.style.display;
         gateWayBox.style.display = 'block';
@@ -92,6 +99,7 @@ class CreditCardRenderer {
                 }
             }
         }).then(hostedFields => {
+            this.currentHostedFieldsInstance = hostedFields;
             const submitEvent = (event) => {
                 this.spinner.block();
                 if (event) {