diff --git a/app/controllers/discourse_payments/charges_controller.rb b/app/controllers/discourse_payments/charges_controller.rb
index 9285072..a546f99 100644
--- a/app/controllers/discourse_payments/charges_controller.rb
+++ b/app/controllers/discourse_payments/charges_controller.rb
@@ -1,5 +1,9 @@
+require_dependency 'discourse'
+
 module DiscoursePayments
   class ChargesController < ActionController::Base
+    include CurrentUser
+
     skip_before_filter :verify_authenticity_token, only: [:create]
 
     def create
@@ -10,13 +14,13 @@ module DiscoursePayments
       # end
 
       customer = Stripe::Customer.create(
-       :email => 'joe@example.com',
+       :email => current_user.email,
        :source  => params[:stripeToken]
       )
 
       charge = Stripe::Charge.create(
         :customer    => customer.id,
-        :amount      => 1001,
+        :amount      => params[:amount],
         :description => 'Consumer Defender',
         :currency    => 'aud'
       )
diff --git a/assets/javascripts/discourse/components/stripe-card.js.es6 b/assets/javascripts/discourse/components/stripe-card.js.es6
index 3018383..66edbed 100644
--- a/assets/javascripts/discourse/components/stripe-card.js.es6
+++ b/assets/javascripts/discourse/components/stripe-card.js.es6
@@ -1,12 +1,15 @@
+import { ajax } from 'discourse/lib/ajax';
+
 export default Ember.Component.extend({
   stripe: Stripe('pk_test_b8RmhzlL8QPizJRqOrKF3JEV'),
+
   card: function() {
     var elements = this.get('stripe').elements();
     return elements.create('card', { hidePostalCode: true });
   }.property('stripe'),
 
   didInsertElement() {
-    this.get('card').mount('#stripe-card');
+    this.get('card').mount('#card-element');
   },
 
   actions: {
@@ -16,12 +19,14 @@ export default Ember.Component.extend({
           console.log('error yo');
         }
         else {
-          var form = document.getElementById('stripe-card');
-          var hiddenInput = document.createElement('input');
-          // hiddenInput.setAttribute('type', 'hidden');
-          hiddenInput.setAttribute('name', 'stripeToken');
-          hiddenInput.setAttribute('value', result.token.id);
-          form.appendChild(hiddenInput);
+          var data = {
+            stripeToken: result.token.id,
+            amount: 1234
+          };
+
+          ajax('/charges', { data: data, method: 'post' }).then(data => {
+            console.log(data);
+          });
         }
       });
     }
diff --git a/assets/javascripts/discourse/templates/components/stripe-card.hbs b/assets/javascripts/discourse/templates/components/stripe-card.hbs
index 5f76857..499d4c8 100644
--- a/assets/javascripts/discourse/templates/components/stripe-card.hbs
+++ b/assets/javascripts/discourse/templates/components/stripe-card.hbs
@@ -1,5 +1,8 @@
-<div id="stripe-card"></div>
+<form id="payment-form">
+  <div>
+    <label for="card-element">Credit or debit card</label>
+    <div id="card-element"></div>
+  </div>
 
-<button class='btn btn-primary payment-btn' {{action "submitStripeCard"}}>
-  make payment
-</button>
+  <button {{action "submitStripeCard"}}>Submit Payment</button>
+</form>