create the token and make the customer request

assets/javascripts/discourse/controllers/patrons-index.js.es6

@@ -13,7 +13,7 @@ export default Ember.Controller.extend({
     },
 
     paymentSuccessHandler(paymentIntentId) {
-      DiscourseURL.redirectTo(`patrons/${paymentIntentId}`);
+      // DiscourseURL.redirectTo(`patrons/${paymentIntentId}`);
     }
   }
 });

assets/javascripts/discourse/controllers/patrons-subscribe.js.es6

@@ -1,11 +1,37 @@
-export default Ember.Controller.extend({
-  actions: {
-    stripePaymentHandler(/* data */) {
-      // console.log('stripePaymentHandler', data);
-    },
+import { ajax } from "discourse/lib/ajax";
 
-    paymentSuccessHandler(/* paymentIntentId */) {
-      // console.log('paymentSuccessHandler');
+export default Ember.Controller.extend({
+  init() {
+    this._super(...arguments);
+    this.set(
+      "stripe",
+      Stripe(Discourse.SiteSettings.discourse_patrons_public_key)
+    );
+    const elements = this.get("stripe").elements();
+    this.set("cardElement", elements.create("card", { hidePostalCode: true }));
+  },
+
+  actions: {
+    stripePaymentHandler() {
+      // https://stripe.com/docs/billing/subscriptions/payment#signup-flow
+
+      this.stripe.createToken(this.get("cardElement")).then(result => {
+        if (result.error) {
+          // Inform the customer that there was an error.
+          // var errorElement = document.getElementById('card-errors');
+          // errorElement.textContent = result.error.message;
+        } else {
+          const data = {
+            source: result.token.id
+          };
+
+          return ajax("/patrons/customers", { method: "post", data }).then(
+            result => {
+              // create subscription
+            }
+          );
+        }
+      });
     }
   }
 });