From 392b88265b394ff99fa48c51b25d0cb6a0efaaa0 Mon Sep 17 00:00:00 2001
From: Faizaan Gagan <faizaan@discourse.org>
Date: Fri, 24 Jun 2022 21:18:38 +0530
Subject: [PATCH] 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
---
 .../discourse/components/subscribe-card.js    | 19 +++++++++++++++++++
 test/javascripts/helpers/stripe.js            |  1 +
 2 files changed, 20 insertions(+)

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