css the card

assets/javascripts/discourse/controllers/patrons-subscribe-show.js.es6

@@ -8,6 +8,7 @@ export default Ember.Controller.extend({
       Stripe(Discourse.SiteSettings.discourse_patrons_public_key)
     );
     const elements = this.get("stripe").elements();
+
     this.set("cardElement", elements.create("card", { hidePostalCode: true }));
   },
 

assets/javascripts/discourse/templates/patrons/subscribe/show.hbs

@@ -10,26 +10,23 @@
   </div>
   <div class="section-column">
     {{#unless model.product.subscribed}}
-
+      <h2>
-      {{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
-
-      {{#d-button
-        disabled=loading
-        action="stripePaymentHandler"
-        class="btn btn-primary btn-payment btn-discourse-patrons"}}
-        {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
-      {{/d-button}}
-
-      <hr>
-
-      <h4>
         {{i18n 'discourse_patrons.subscribe.card.title'}}
-      </h4>
+      </h2>
 
       {{subscribe-card cardElement=cardElement}}
 
       {{#if loading}}
         {{loading-spinner}}
+      {{else}}
+        {{combo-box valueAttribute="id" content=model.plans value=model.product.plan}}
+
+        {{#d-button
+          disabled=loading
+          action="stripePaymentHandler"
+          class="btn btn-primary btn-payment btn-discourse-patrons pull-right"}}
+          {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
+          {{/d-button}}
       {{/if}}
 
     {{/unless}}

assets/stylesheets/common/discourse-patrons.scss

@@ -43,10 +43,6 @@ table.discourse-patrons-user-table {
   background-color: $primary-very-low;
 }
 
-#card-element {
-  padding: 20px 0;
-}
-
 .discourse-patrons-payment-details {
   border: 1px $primary-low-mid solid;
   background-color: $primary-low;

assets/stylesheets/common/stripe.scss

@@ -0,0 +1,26 @@
+
+.StripeElement {
+  box-sizing: border-box;
+
+  padding: 10px;
+  height: 40px;
+  margin-bottom: 20px;
+
+  border: 1px $primary solid;
+  background-color: $secondary;
+
+  font-size: $base-font-size;
+  font-family: $base-font-family;
+}
+
+.StripeElement--focus {
+  box-shadow: shadow("focus");
+}
+
+.StripeElement--invalid {
+  border-color: $danger;
+}
+
+.StripeElement--webkit-autofill {
+  color: $quaternary;
+}

plugin.rb

@@ -12,6 +12,7 @@ gem 'stripe', '5.11.0'
 
 register_asset "stylesheets/common/discourse-patrons.scss"
 register_asset "stylesheets/common/discourse-patrons-layout.scss"
+register_asset "stylesheets/common/stripe.scss"
 register_asset "stylesheets/mobile/discourse-patrons.scss"
 register_svg_icon "credit-card" if respond_to?(:register_svg_icon)