initial payment buttons component

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

@@ -9,7 +9,7 @@ export default Ember.Controller.extend({
     );
     const elements = this.get("stripe").elements();
 
-    this.set("cardElement", elements.create("card", { hidePostalCode: true }));
+    this.set("cardElement", elements.create("card", { hidePostalCode: true, disabled: true }));
   },
 
   actions: {

assets/javascripts/discourse/templates/components/payment-options.hbs

@@ -0,0 +1,20 @@
+
+<button class="btn btn-primary btn-discourse-subscriptions-subscribe">
+  Purchase a subscription
+</button>
+<button class="btn btn-discourse-subscriptions-subscribe">
+  Make just one payment
+</button>
+
+<hr>
+
+<p>Select subscription period</p>
+
+<div id="subscribe-buttons">
+  {{#each plans as plan}}
+    <button class="btn btn-discourse-subscriptions-subscribe">
+      <div>Monthly</div>
+      AUD $5.00
+    </button>
+  {{/each}}
+</div>

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

@@ -14,19 +14,21 @@
         {{i18n 'discourse_subscriptions.subscribe.card.title'}}
       </h2>
 
+      {{payment-options plans=model.plans}}
+
+      <hr>
+
       {{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"}}
+          class="btn btn-primary btn-payment"}}
           {{i18n 'discourse_subscriptions.subscribe.buttons.subscribe'}}
-          {{/d-button}}
+        {{/d-button}}
       {{/if}}
 
     {{/unless}}