diff --git a/assets/javascripts/discourse/components/subscribe-card.js b/assets/javascripts/discourse/components/subscribe-card.js
index 7b98896..58dd4da 100644
--- a/assets/javascripts/discourse/components/subscribe-card.js
+++ b/assets/javascripts/discourse/components/subscribe-card.js
@@ -4,6 +4,25 @@ export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
     this.cardElement.mount("#card-element");
+    this.setCardElementStyles();
+  },
+
+  setCardElementStyles() {
+    const root = document.querySelector(":root");
+    const computedStyle = getComputedStyle(root);
+    const primaryColor = computedStyle.getPropertyValue("--primary");
+    const placeholderColor =
+      computedStyle.getPropertyValue("--secondary-medium");
+    this.cardElement.update({
+      style: {
+        base: {
+          color: primaryColor,
+          "::placeholder": {
+            color: placeholderColor,
+          },
+        },
+      },
+    });
   },
   didDestroyElement() {},
 });
diff --git a/test/javascripts/helpers/stripe.js b/test/javascripts/helpers/stripe.js
index 0578a4c..fbfd186 100644
--- a/test/javascripts/helpers/stripe.js
+++ b/test/javascripts/helpers/stripe.js
@@ -15,6 +15,7 @@ export function stubStripe() {
               on() {},
               card() {},
               mount() {},
+              update() {},
             };
           },
         };