create the token and make the customer request

assets/javascripts/discourse/components/subscribe-card.js.es6

@@ -0,0 +1,7 @@
+export default Ember.Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+    this.cardElement.mount("#card-element");
+  },
+  didDestroyElement() {}
+});

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
+            }
+          );
+        }
+      });
     }
   }
 });

assets/javascripts/discourse/templates/components/subscribe-card.hbs

@@ -0,0 +1,2 @@
+
+<div id="card-element"></div>

assets/javascripts/discourse/templates/patrons/subscribe.hbs

@@ -13,8 +13,22 @@
   <div class="section-column">
     {{combo-box valueAttribute="id" content=model.plans value=model.plan}}
 
-    {{#d-button class="btn btn-primary btn-payment btn-discourse-patrons"}}
+    {{#d-button
+      action="stripePaymentHandler"
+      class="btn btn-primary btn-payment btn-discourse-patrons"}}
       {{i18n 'discourse_patrons.subscribe.buttons.subscribe'}}
     {{/d-button}}
+
+    <hr>
+
+    <h4>{{i18n 'discourse_patrons.subscribe.card.title'}}</h4>
+    {{subscribe-card cardElement=cardElement}}
+
+    <div id="discourse-patrons-subscribe-customer">
+      <h4>{{i18n 'discourse_patrons.subscribe.customer.title'}}</h4>
+      <div class="discourse-patrons-subscribe-customer-empty">
+        {{i18n 'discourse_patrons.subscribe.customer.empty'}}
+      </div>
+    </div>
   </div>
 </div>