Add google pay button

assets/javascripts/discourse/components/subscribe-google-pay.js

@@ -0,0 +1,42 @@
+import Component from "@ember/component";
+
+export default Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+    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")
+      }
+    });
+    this.setbuttonElementStyles();
+    this.paymentRequest.on("paymentMethod", async (e) => {
+      // create a payment intent on the server
+      // confirm the payment on the client
+      console.log(e);
+    });
+  },
+
+  setbuttonElementStyles() {
+    const root = document.querySelector(":root");
+    const computedStyle = getComputedStyle(root);
+    const primaryColor = computedStyle.getPropertyValue("--primary");
+    const placeholderColor =
+      computedStyle.getPropertyValue("--secondary-medium");
+    this.buttonElement.update({
+      style: {
+        base: {
+          color: primaryColor,
+          "::placeholder": {
+            color: placeholderColor,
+          },
+        },
+      },
+    });
+  },
+  didDestroyElement() {},
+});

assets/javascripts/discourse/controllers/subscribe-show.js

@@ -21,6 +21,28 @@ 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) {

assets/javascripts/discourse/templates/components/subscribe-apple-pay.hbs

@@ -0,0 +1 @@
+<div id="payment-request-button"></div>

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

@@ -24,6 +24,7 @@
       <hr />
 
       {{subscribe-card cardElement=cardElement}}
+      {{subscribe-google-pay buttonElement=buttonElement paymentRequest=paymentRequest}}
 
       {{#if loading}}
         {{loading-spinner}}