diff --git a/assets/javascripts/discourse/components/subscribe-google-pay.js b/assets/javascripts/discourse/components/subscribe-google-pay.js
index e975e96..53bb7fb 100644
--- a/assets/javascripts/discourse/components/subscribe-google-pay.js
+++ b/assets/javascripts/discourse/components/subscribe-google-pay.js
@@ -1,25 +1,114 @@
+import Transaction from "discourse/plugins/discourse-subscriptions/discourse/models/transaction";
+import Subscription from "discourse/plugins/discourse-subscriptions/discourse/models/subscription";
 import Component from "@ember/component";
+import { observes } from "discourse-common/utils/decorators";
+import { inject as service } from "@ember/service";
 
 export default Component.extend({
-  didInsertElement() {
-    this._super(...arguments);
-    this.paymentRequest.canMakePayment().then((result)=> {
-      if(result) {
+  dialog: service(),
+
+  @observes("selectedPlan", "plans")
+  setupButtonElement() {
+    const plan = this.plans
+      .filterBy("id", this.selectedPlan)
+      .get("firstObject");
+
+    if (!plan) {
+      this.alert("plans.validate.payment_options.required");
+      return;
+    }
+
+    if (this.selectedPlan) {
+      const elements = this.stripe.elements();
+      const paymentRequest = this.stripe.paymentRequest({
+        currency: plan.currency,
+        country: "US",
+        requestPayerName: true,
+        requestPayerEmail: true,
+        total: {
+          label: plan.subscriptionRate,
+          amount: plan.unit_amount,
+        }
+      });
+      this.set("buttonElement",
+        elements.create('paymentRequestButton', {
+          paymentRequest: paymentRequest,
+        })
+      );
+      this.set("paymentRequest", paymentRequest);
+    }
+
+    this.paymentRequest.canMakePayment().then((result) => {
+      if (result) {
         // mount the element
         this.buttonElement.mount("#payment-request-button");
       } else {
         //hide the button
         document.getElementById("payment-request-button").style.display = "none";
-        console.log("GooglePay is unvailable")
+        console.log("GooglePay and ApplePay is unvailable");
       }
     });
-    
-    this.paymentRequest.on("paymentMethod", async (e) => {
+
+    this.paymentRequest.on('token', (result) => {
+      console.log("on token result", result);
+      const subscription = Subscription.create({
+        source: result.token.id,
+        plan: plan.get("id"),
+        promo: this.promoCode,
+      });
+
+      this.set("transaction", subscription.save());
+    });
+
+    this.paymentRequest.on("paymentmethod", async (e) => {
       // create a payment intent on the server
+      this.transaction
+        .then((result) => {
+          console.log("on paymentmethod transaction result", result);
+          if (result.error) {
+            this.dialog.alert(result.error.message || result.error);
+          } else if (
+            result.status === "incomplete" ||
+            result.status === "open"
+          ) {
+            const transactionId = result.id;
+            const planId = this.selectedPlan;
+            this.handleAuthentication(plan, result).then(
+              (authenticationResult) => {
+                if (authenticationResult && !authenticationResult.error) {
+                  return Transaction.finalize(transactionId, planId).then(
+                    () => {
+                      this.advanceSuccessfulTransaction(plan);
+                      e.complete("success");
+                      console.log(`Success: ${authenticationResult.paymentIntent.id}`);
+                    }
+                  );
+                } else if (authenticationResult.error) {
+                  console.log("Payment fail");
+                  e.complete("fail");
+                }
+              }
+            );
+          } else {
+            this.advanceSuccessfulTransaction(plan);
+            e.complete("success");
+            console.log(`Success`);
+          }
+        })
+        .catch((result) => {
+          e.complete("fail");
+          console.log("Payment fail");
+          this.dialog.alert(
+            result.jqXHR.responseJSON?.errors[0] || result.errorThrown
+          );
+        });
+
       // confirm the payment on the client
       console.log(e);
     });
   },
 
-  didDestroyElement() {},
+  didInsertElement() {
+    this._super(...arguments);
+  },
 });
diff --git a/assets/javascripts/discourse/controllers/subscribe-show.js b/assets/javascripts/discourse/controllers/subscribe-show.js
index 0efb4a4..7f07cb8 100644
--- a/assets/javascripts/discourse/controllers/subscribe-show.js
+++ b/assets/javascripts/discourse/controllers/subscribe-show.js
@@ -21,28 +21,6 @@ export default Controller.extend({
     const elements = this.get("stripe").elements();
 
     this.set("cardElement", elements.create("card", { hidePostalCode: true }));
-  
-    this.initButtonPay();
-  },
-
-  initButtonPay() {
-    const elements = this.get("stripe").elements();
-    const paymentRequest = this.get("stripe").paymentRequest({
-      currency: "usd",
-      country: "US",
-      requestPayerName: true,
-      requestPayerEmail: true,
-      total: {
-        label: "test payment apple",
-        amount: 99,
-      }
-    });
-    this.set("buttonElement", 
-      elements.create('paymentRequestButton', {
-        paymentRequest: paymentRequest,
-      })
-    );
-    this.set("paymentRequest", paymentRequest);
   },
 
   alert(path) {
@@ -105,6 +83,15 @@ export default Controller.extend({
   },
 
   actions: {
+    alert(path) {
+      this.alert(path)
+    },
+    handleAuthentication(plan, transaction) {
+      this.handleAuthentication(plan, transaction)
+    },
+    advanceSuccessfulTransaction(plan) {
+      this._advanceSuccessfulTransaction(plan)
+    },
     stripePaymentHandler() {
       this.set("loading", true);
       const plan = this.get("model.plans")
diff --git a/assets/javascripts/discourse/templates/subscribe/show.hbs b/assets/javascripts/discourse/templates/subscribe/show.hbs
index 03fa83e..595aabc 100644
--- a/assets/javascripts/discourse/templates/subscribe/show.hbs
+++ b/assets/javascripts/discourse/templates/subscribe/show.hbs
@@ -45,7 +45,16 @@
           label="discourse_subscriptions.plans.payment_button"
         }}
         
-        {{subscribe-google-pay buttonElement=buttonElement paymentRequest=paymentRequest}}
+        {{subscribe-google-pay
+          alert=alert
+          stripe=stripe
+          plans=model.plans
+          selectedPlan=selectedPlan
+          promoCode=promoCode
+          advanceSuccessfulTransaction=(action "advanceSuccessfulTransaction")
+          handleAuthentication=(action "handleAuthentication")
+        }}
+        
       {{/if}}
     {{else}}
       <h2>{{i18n "discourse_subscriptions.subscribe.already_purchased"}}</h2>