diff --git a/app/controllers/customers_controller.rb b/app/controllers/customers_controller.rb
index f95299c..3dce949 100644
--- a/app/controllers/customers_controller.rb
+++ b/app/controllers/customers_controller.rb
@@ -13,11 +13,6 @@ module DiscourseSubscriptions
           source: params[:source]
         )
 
-        DiscourseSubscriptions::Customer.create_customer(
-          current_user,
-          customer
-        )
-
         render_json_dump customer
 
       rescue ::Stripe::InvalidRequestError => e
diff --git a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6 b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
index 065df34..be8233e 100644
--- a/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
+++ b/assets/javascripts/discourse/controllers/s-subscribe-show.js.es6
@@ -1,4 +1,5 @@
-import { ajax } from "discourse/lib/ajax";
+import Customer from "discourse/plugins/discourse-subscriptions/discourse/models/customer";
+import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
 
 export default Ember.Controller.extend({
   init() {
@@ -35,17 +36,10 @@ export default Ember.Controller.extend({
           bootbox.alert(result.error.message);
           this.set("loading", false);
         } else {
-          const customerData = {
-            source: result.token.id
-          };
+          const customer = Customer.create({ source: result.token.id });
 
-          return ajax("/s/customers", {
-            method: "post",
-            data: customerData
-          }).then(customer => {
-            const subscription = this.get("model.subscription");
-
-            subscription.setProperties({
+          customer.save().then(customer => {
+            const subscription = Subscription.create({
               customer: customer.id,
               plan: plan.get("id")
             });
diff --git a/assets/javascripts/discourse/models/customer.js.es6 b/assets/javascripts/discourse/models/customer.js.es6
new file mode 100644
index 0000000..b8eb126
--- /dev/null
+++ b/assets/javascripts/discourse/models/customer.js.es6
@@ -0,0 +1,13 @@
+import { ajax } from "discourse/lib/ajax";
+
+const Customer = Discourse.Model.extend({
+  save() {
+    const data = {
+      source: this.source
+    };
+
+    return ajax("/s/customers", { method: "post", data });
+  }
+});
+
+export default Customer;
diff --git a/assets/javascripts/discourse/routes/s-subscribe-show.js.es6 b/assets/javascripts/discourse/routes/s-subscribe-show.js.es6
index d3a21d8..82e92d9 100644
--- a/assets/javascripts/discourse/routes/s-subscribe-show.js.es6
+++ b/assets/javascripts/discourse/routes/s-subscribe-show.js.es6
@@ -1,15 +1,13 @@
 import Product from "discourse/plugins/discourse-subscriptions/discourse/models/product";
 import Plan from "discourse/plugins/discourse-subscriptions/discourse/models/plan";
-import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
 
 export default Discourse.Route.extend({
   model(params) {
     const product_id = params["subscription-id"];
 
     const product = Product.find(product_id);
-    const subscription = Subscription.create();
     const plans = Plan.findAll({ product_id: product_id });
 
-    return Ember.RSVP.hash({ plans, product, subscription });
+    return Ember.RSVP.hash({ plans, product });
   }
 });
diff --git a/assets/javascripts/discourse/patrons-route-map.js.es6 b/assets/javascripts/discourse/subscriptions-route-map.js.es6
similarity index 100%
rename from assets/javascripts/discourse/patrons-route-map.js.es6
rename to assets/javascripts/discourse/subscriptions-route-map.js.es6
diff --git a/assets/javascripts/discourse/templates/components/payment-options.hbs b/assets/javascripts/discourse/templates/components/payment-options.hbs
index 8003a41..62dbd42 100644
--- a/assets/javascripts/discourse/templates/components/payment-options.hbs
+++ b/assets/javascripts/discourse/templates/components/payment-options.hbs
@@ -1,10 +1,19 @@
 
-<button class="btn btn-primary">
+{{#ds-button
+  id="discourse-subscriptions-payment-type-plan"
+  selected=true
+  class="btn-discourse-subscriptions-payment-type"
+}}
   {{i18n "discourse_subscriptions.plans.purchase"}}
-</button>
-{{!-- <button class="btn">
-  Make just one payment
-</button> --}}
+{{/ds-button}}
+
+{{#ds-button
+  id="discourse-subscriptions-payment-type-payment"
+  selected=false
+  class="btn-discourse-subscriptions-payment-type"
+}}
+  {{i18n "discourse_subscriptions.payment.purchase"}}
+{{/ds-button}}
 
 <hr>
 
@@ -18,7 +27,7 @@
       action="clickPlan"
       actionParam=plan
       selected=plan.selected
-      class="btn btn-discourse-subscriptions-subscribe"
+      class="btn-discourse-subscriptions-subscribe"
     }}
       <div class="interval">
         {{i18n (concat "discourse_subscriptions.plans.interval.adverb." plan.interval)}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 5f76a13..a4d3bb3 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -36,6 +36,20 @@ en:
             week: Weekly
             month: Monthly
             year: Yearly
+      payment:
+        purchase: Make just one payment
+      one_time:
+        heading:
+          payment: Make a Payment
+          success: Thank you!
+        payment:
+          optional: Optional
+          receipt_info: A receipt is sent to this email address
+          your_information: Your information
+          payment_information: Payment information
+          payment_confirmation: Confirm information
+        amount: Amount
+        payment_intent_id: Payment ID
       user:
         plans:
           rate: Rate
@@ -58,18 +72,6 @@ en:
           title: Customer Details
         buttons:
           subscribe: Subscribe
-      one_time:
-        heading:
-          payment: Make a Payment
-          success: Thank you!
-        payment:
-          optional: Optional
-          receipt_info: A receipt is sent to this email address
-          your_information: Your information
-          payment_information: Payment information
-          payment_confirmation: Confirm information
-        amount: Amount
-        payment_intent_id: Payment ID
       billing:
         name: Full name
         email: Email
diff --git a/spec/requests/customers_controller_spec.rb b/spec/requests/customers_controller_spec.rb
index 84e563e..71003ac 100644
--- a/spec/requests/customers_controller_spec.rb
+++ b/spec/requests/customers_controller_spec.rb
@@ -20,14 +20,6 @@ module DiscourseSubscriptions
 
           post "/s/customers.json", params: { source: 'tok_interesting' }
         end
-
-        it "saves the customer" do
-          ::Stripe::Customer.expects(:create).returns(id: 'cus_id23456')
-
-          expect {
-            post "/s/customers.json", params: { source: 'tok_interesting' }
-          }.to change { DiscourseSubscriptions::Customer.count }
-        end
       end
     end
   end
diff --git a/test/javascripts/components/payment-options-test.js.es6 b/test/javascripts/components/payment-options-test.js.es6
index 8dbd40f..49f323b 100644
--- a/test/javascripts/components/payment-options-test.js.es6
+++ b/test/javascripts/components/payment-options-test.js.es6
@@ -26,6 +26,26 @@ componentTest("Discourse Subscriptions payment options has content", {
       { currency: "gdp", interval: "month", amountDollars: "9.99" }
     ]);
 
+    assert.equal(
+      find(".btn-discourse-subscriptions-payment-type").length,
+      2,
+      "The payment type buttons are shown"
+    );
+    assert.equal(
+      find("#discourse-subscriptions-payment-type-plan.btn-primary").length,
+      1,
+      "The plan payment type button is selected"
+    );
+    assert.equal(
+      find("#discourse-subscriptions-payment-type-payment.btn-primary").length,
+      0,
+      "The single payment type button is not selected"
+    );
+    assert.equal(
+      find(".btn-discourse-subscriptions-payment-type").length,
+      2,
+      "The payment type buttons are shown"
+    );
     assert.equal(
       find(".btn-discourse-subscriptions-subscribe").length,
       2,
@@ -34,7 +54,7 @@ componentTest("Discourse Subscriptions payment options has content", {
     assert.equal(
       find("#subscribe-buttons .btn-primary").length,
       0,
-      "The none are selected"
+      "No plan buttons are selected by default"
     );
     assert.equal(
       find(".btn-discourse-subscriptions-subscribe:first-child .interval")