diff --git a/assets/javascripts/discourse/components/ds-button.js.es6 b/assets/javascripts/discourse/components/ds-button.js.es6
new file mode 100644
index 0000000..581c6f8
--- /dev/null
+++ b/assets/javascripts/discourse/components/ds-button.js.es6
@@ -0,0 +1,12 @@
+import Button from "discourse/components/d-button";
+
+export default Button.extend({
+  seleted: false,
+
+  init() {
+    this._super(...arguments);
+    this.classNameBindings = this.classNameBindings.concat(
+      "selected:btn-primary"
+    );
+  }
+});
diff --git a/assets/javascripts/discourse/components/payment-options.js.es6 b/assets/javascripts/discourse/components/payment-options.js.es6
index c312853..f4a96a3 100644
--- a/assets/javascripts/discourse/components/payment-options.js.es6
+++ b/assets/javascripts/discourse/components/payment-options.js.es6
@@ -1,7 +1,8 @@
 export default Ember.Component.extend({
   actions: {
     clickPlan(plan) {
-      this.selectPlan(plan);
+      this.plans.map(p => p.set("selected", false));
+      plan.set("selected", true);
     }
   }
 });
diff --git a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6 b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
index e90b52e..c492876 100644
--- a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
+++ b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
@@ -9,10 +9,7 @@ export default Ember.Controller.extend({
     );
     const elements = this.get("stripe").elements();
 
-    this.set(
-      "cardElement",
-      elements.create("card", { hidePostalCode: true, disabled: true })
-    );
+    this.set("cardElement", elements.create("card", { hidePostalCode: true }));
   },
 
   actions: {
diff --git a/assets/javascripts/discourse/templates/components/payment-options.hbs b/assets/javascripts/discourse/templates/components/payment-options.hbs
index 76ad56f..bbcd1e4 100644
--- a/assets/javascripts/discourse/templates/components/payment-options.hbs
+++ b/assets/javascripts/discourse/templates/components/payment-options.hbs
@@ -12,9 +12,10 @@
 
 <div id="subscribe-buttons">
   {{#each plans as |plan|}}
-    {{#d-button
+    {{#ds-button
       action="clickPlan"
       actionParam=plan
+      selected=plan.selected
       class="btn btn-discourse-subscriptions-subscribe"
     }}
       <div class="interval">
@@ -23,6 +24,6 @@
       <span class="amount">
         {{format-currency plan.currency plan.amountDollars}}
       </span>
-    {{/d-button}}
+    {{/ds-button}}
   {{/each}}
 </div>
diff --git a/test/javascripts/components/payment-options-test.js.es6 b/test/javascripts/components/payment-options-test.js.es6
index e7e5a96..8dbd40f 100644
--- a/test/javascripts/components/payment-options-test.js.es6
+++ b/test/javascripts/components/payment-options-test.js.es6
@@ -1,4 +1,5 @@
 import componentTest from "helpers/component-test";
+import EmberObject from "@ember/object";
 
 moduleForComponent("payment-options", { integration: true });
 
@@ -53,21 +54,21 @@ componentTest("Discourse Subscriptions payment options has content", {
 });
 
 componentTest("Discourse Subscriptions payment options plan is selected", {
-  template: `{{payment-options plans=plans selectPlan=selectPlan}}`,
+  template: `{{payment-options plans=plans}}`,
 
   beforeEach() {},
 
   async test(assert) {
-    assert.expect(1);
     this.set("plans", [
-      { currency: "aud", interval: "year", amountDollars: "44.99" },
-      { currency: "gdp", interval: "month", amountDollars: "9.99" }
+      EmberObject.create({
+        currency: "aud",
+        interval: "year",
+        amountDollars: "44.99"
+      })
     ]);
 
-    this.set("selectPlan", function(plan) {
-      assert.equal(plan, this.get('plans.firstObject'), "the plan is selected");
-    });
-
     await click(".btn-discourse-subscriptions-subscribe:first-child");
+
+    assert.ok(this.get("plans.firstObject.selected"), "it selected the plan");
   }
 });