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}}

assets/stylesheets/common/main.scss

@@ -98,7 +98,3 @@ table.discourse-subscriptions-user-table {
     white-space: nowrap;
   }
 }
-
-.btn-discourse-patrons {
-  white-space: nowrap;
-}

assets/stylesheets/common/subscribe.scss

@@ -1,3 +1,20 @@
+
+#subscribe-buttons {
+  display: flex;
+  justify-content: space-around;
+
+  .btn-discourse-subscriptions-subscribe {
+    padding: 10px 20px;
+    div {
+      margin-bottom: 5px;
+    }
+  }
+}
+
+.btn-payment {
+  width: 100%;
+}
+
 .StripeElement {
   box-sizing: border-box;
 

plugin.rb

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

test/javascripts/components/payment-options-test.js.es6

@@ -0,0 +1,36 @@
+import componentTest from "helpers/component-test";
+
+moduleForComponent("payment-options", { integration: true });
+
+componentTest("Discourse Subscriptions has no plans", {
+  template: `{{payment-options plans=plans}}`,
+
+  async test(assert) {
+    this.set('plans', false);
+
+    assert.equal(
+      find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
+      0,
+      "The plan buttons are not shown"
+    );
+  }
+});
+
+componentTest("Discourse Subscriptions has content", {
+  template: `{{payment-options plans=plans}}`,
+
+  async test(assert) {
+    this.set('plans', [1, 2]);
+
+    assert.equal(
+      find("#subscribe-buttons .btn-discourse-subscriptions-subscribe").length,
+      2,
+      "The plan buttons are shown"
+    );
+    assert.equal(
+      find("#subscribe-buttons .btn-primary").length,
+      0,
+      "The none are selected"
+    );
+  }
+});