diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
new file mode 100644
index 0000000..e69de29
diff --git a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6 b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
index c492876..5d03e60 100644
--- a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
+++ b/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: {
diff --git a/assets/javascripts/discourse/templates/components/payment-options.hbs b/assets/javascripts/discourse/templates/components/payment-options.hbs
new file mode 100644
index 0000000..a66f111
--- /dev/null
+++ b/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>
diff --git a/assets/javascripts/discourse/templates/s/subscribe/show.hbs b/assets/javascripts/discourse/templates/s/subscribe/show.hbs
index dce5b9d..cfd0bc3 100644
--- a/assets/javascripts/discourse/templates/s/subscribe/show.hbs
+++ b/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}}
diff --git a/assets/stylesheets/common/main.scss b/assets/stylesheets/common/main.scss
index a42e7b3..e498c21 100644
--- a/assets/stylesheets/common/main.scss
+++ b/assets/stylesheets/common/main.scss
@@ -98,7 +98,3 @@ table.discourse-subscriptions-user-table {
     white-space: nowrap;
   }
 }
-
-.btn-discourse-patrons {
-  white-space: nowrap;
-}
diff --git a/assets/stylesheets/common/stripe.scss b/assets/stylesheets/common/subscribe.scss
similarity index 64%
rename from assets/stylesheets/common/stripe.scss
rename to assets/stylesheets/common/subscribe.scss
index e453a15..00cc06b 100644
--- a/assets/stylesheets/common/stripe.scss
+++ b/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;
 
diff --git a/plugin.rb b/plugin.rb
index 41b1512..ba1f385 100644
--- a/plugin.rb
+++ b/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)
 
diff --git a/test/javascripts/components/payment-options-test.js.es6 b/test/javascripts/components/payment-options-test.js.es6
new file mode 100644
index 0000000..5783f08
--- /dev/null
+++ b/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"
+    );
+  }
+});