diff --git a/assets/javascripts/discourse/controllers/patrons-index.js.es6 b/assets/javascripts/discourse/controllers/patrons-index.js.es6
new file mode 100644
index 0000000..f58dae7
--- /dev/null
+++ b/assets/javascripts/discourse/controllers/patrons-index.js.es6
@@ -0,0 +1,12 @@
+import { ajax } from "discourse/lib/ajax";
+
+export default Ember.Controller.extend({
+  actions: {
+    stripePaymentHandler(paymentMethodId, amount) {
+      return ajax("/donate/charges", {
+        data: { paymentMethodId, amount },
+        method: "post"
+      });
+    },
+  },
+});
diff --git a/assets/javascripts/discourse/controllers/patrons.js.es6 b/assets/javascripts/discourse/controllers/patrons.js.es6
new file mode 100644
index 0000000..cea987b
--- /dev/null
+++ b/assets/javascripts/discourse/controllers/patrons.js.es6
@@ -0,0 +1,5 @@
+import { ajax } from "discourse/lib/ajax";
+
+export default Ember.Controller.extend({
+
+});
diff --git a/assets/javascripts/discourse/templates/patrons/index.hbs b/assets/javascripts/discourse/templates/patrons/index.hbs
index 5eea065..09380fd 100644
--- a/assets/javascripts/discourse/templates/patrons/index.hbs
+++ b/assets/javascripts/discourse/templates/patrons/index.hbs
@@ -1,2 +1,12 @@
 
-index
+<h3>{{i18n 'discourse_donations.title' site_name=siteSettings.title}}</h3>
+
+<div class="donations-page-description">
+  {{cook-text siteSettings.discourse_donations_page_description}}
+</div>
+
+<div class="donations-page-payment">
+  {{donation-form
+    stripePaymentHandler=(action "stripePaymentHandler")
+  }}
+</div>