FIX: set Discourse consistent styles on Stripe card element (#124)

* FIX: set Discourse consistent styles on Stripe card element

* use correct placeholder color

* applied prettier

* mock update method for cardElement

* minor formatting

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() {},
 });

test/javascripts/helpers/stripe.js

@@ -15,6 +15,7 @@ export function stubStripe() {
               on() {},
               card() {},
               mount() {},
+              update() {},
             };
           },
         };