fix: restore PayPal payment flows

Author: Sebastian Fellner 💯

components/ChatVisualization/Payment.vue

@@ -19,8 +19,9 @@ export default {
       type: Number,
     },
   },
-  data() {
-    return {};
+  setup() {
+    const config = useRuntimeConfig();
+    return { paypalClientId: config.public.paypalClientId };
   },
   mounted() {
     this.loadPayPalScript();
@@ -34,20 +35,24 @@ export default {
 
       const script = document.createElement("script");
       script.id = "paypal-sdk";
-      script.src =
-        "https://www.paypal.com/sdk/js?currency=" +
-        this.currency +
-        "&client-id=" +
-        this.$config.paypalClientId;
+      const params = new URLSearchParams({
+        currency: this.currency,
+        "client-id": this.paypalClientId,
+      });
+      script.src = `https://www.paypal.com/sdk/js?${params}`;
       script.defer = true;
       script.addEventListener("load", () => this.initPayPalButton(this), {
         once: true,
       });
+      script.addEventListener(
+        "error",
+        (error) => this.$emit("onError", error),
+        { once: true }
+      );
       document.head.appendChild(script);
     },
     initPayPalButton(context) {
-      // eslint-disable-next-line no-undef
-      paypal
+      window.paypal
         .Buttons({
           style: {
             size: "small",

components/ChatVisualization/PdfDownloadPopup.vue

@@ -24,7 +24,7 @@
 
     <!-- Download dialog -->
     <v-dialog v-model="showDownloadPopup" width="550">
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props: activatorProps }">
         <!-- Pricing Section -->
         <v-btn v-if="isValidSubscription" @click="downloadFull" color="success">
           <span v-html="$t('downloadNow')"></span>
@@ -72,9 +72,8 @@
                 <v-btn
                   color="success"
                   class="mt-3 mb-4"
-                  v-bind="attrs"
+                  v-bind="activatorProps"
                   @click="gtagEvent('full_pdf_pressed', GTAG_PAYMENT)"
-                  v-on="on"
                 >
                   <v-icon class="mr-1">mdi-download</v-icon>
                   <span v-html="$t('downloadFullChatPDF')"></span>

components/SubscribeBtn.vue

@@ -13,6 +13,10 @@
 <script>
 import { GTAG_PAYMENT, gtagEvent } from "~/utils/gtagValues";
 export default {
+  setup() {
+    const config = useRuntimeConfig();
+    return { paypalClientId: config.public.paypalClientId };
+  },
   data() {
     return {
       isLoading: false,
@@ -23,16 +27,23 @@ export default {
       if (this.isLoading) return;
       gtagEvent("subscription_pressed", GTAG_PAYMENT);
       this.isLoading = true;
-      const response = await this.$firebase.callFunction("helloworld", {
-        client_id: this.$config.paypalClientId,
-      });
-      // call fetch with https://www.sandbox.paypal.com/webapps/billing/subscriptions?ba_token=BA-2MW88471JV556644J
-      if (!response.data.approveLink) {
-        alert("Error opening paypal: " + response.error);
+
+      try {
+        const response = await this.$firebase.callFunction("helloworld", {
+          client_id: this.paypalClientId,
+        });
+        const approveLink = response.data?.approveLink;
+        if (!approveLink) {
+          throw new Error(response.data?.error || "No approval link returned");
+        }
+
+        window.location.assign(approveLink);
+      } catch (error) {
+        console.error("Error opening PayPal", error);
+        this.$sentry?.captureException(error);
+        alert("Error opening PayPal. Please try again.");
         this.isLoading = false;
       }
-
-      location.href = response.data.approveLink;
     },
   },
 };

components/SubscriptionChecker.vue

@@ -3,6 +3,10 @@
 <script>
 export default {
   props: ["email", "id"],
+  setup() {
+    const config = useRuntimeConfig();
+    return { paypalClientId: config.public.paypalClientId };
+  },
   data() {
     return {
       subscription_id: null,
@@ -56,7 +60,7 @@ export default {
         "checksubscriberstatus",
         {
           ...data,
-          client_id: this.$config.paypalClientId,
+          client_id: this.paypalClientId,
         }
       );
 

pages/subscribe.vue

@@ -54,6 +54,10 @@ import { getSubscriptionParams } from "~/utils/subscription";
 export default {
   name: "Subscriptions",
   components: { SubscriptionChecker },
+  setup() {
+    const config = useRuntimeConfig();
+    return { paypalClientId: config.public.paypalClientId };
+  },
   data() {
     return {
       ba_token: null,
@@ -90,7 +94,7 @@ export default {
         "checksubscriberstatus",
         {
           ...data,
-          client_id: this.$config.paypalClientId,
+          client_id: this.paypalClientId,
         }
       );
 

tests/e2e/home.spec.js

@@ -28,7 +28,25 @@ test("analyzes the example chat without uploading its contents", async ({
   page,
 }) => {
   const requests = [];
+  let paypalSdkUrl;
   page.on("request", (request) => requests.push(request));
+  await page.route("https://www.paypal.com/sdk/js?**", async (route) => {
+    paypalSdkUrl = new URL(route.request().url());
+    await route.fulfill({
+      contentType: "text/javascript",
+      body: `
+        window.paypal = {
+          Buttons: () => ({
+            render: (selector) => {
+              document.querySelector(selector).innerHTML =
+                '<button type="button">Pay with PayPal</button>';
+              return Promise.resolve();
+            }
+          })
+        };
+      `,
+    });
+  });
 
   await page.locator("#uploadmytextfile").setInputFiles(exampleChat);
 
@@ -50,6 +68,15 @@ test("analyzes the example chat without uploading its contents", async ({
     .getByRole("button", { name: /Download free preview PDF/i })
     .click();
   await downloadPromise;
+
+  await page.getByRole("button", { name: /Download full chat PDF/i }).click();
+  await expect(page.getByText("Nice!!", { exact: true })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Pay with PayPal" })
+  ).toBeVisible();
+  expect(paypalSdkUrl.origin).toBe("https://www.paypal.com");
+  expect(paypalSdkUrl.searchParams.get("currency")).toBe("EUR");
+  expect(paypalSdkUrl.searchParams.get("client-id")).toBeTruthy();
 });
 
 test("switches to a localized route", async ({ page }) => {
@@ -61,6 +88,46 @@ test("switches to a localized route", async ({ page }) => {
   ).toBeVisible();
 });
 
+test("starts a subscription through the Firebase PayPal endpoint", async ({
+  page,
+}) => {
+  let functionRequest;
+  await page.route("**/helloworld", async (route) => {
+    const request = route.request();
+    if (request.method() === "OPTIONS") {
+      await route.fulfill({
+        status: 204,
+        headers: {
+          "access-control-allow-origin": "*",
+          "access-control-allow-headers": "content-type",
+        },
+      });
+      return;
+    }
+
+    functionRequest = request;
+    await route.fulfill({
+      contentType: "application/json",
+      headers: { "access-control-allow-origin": "*" },
+      body: JSON.stringify({
+        data: { approveLink: "https://paypal.test/approve" },
+      }),
+    });
+  });
+  await page.route("https://paypal.test/approve", (route) =>
+    route.fulfill({ contentType: "text/html", body: "PayPal approval" })
+  );
+
+  await page.goto("/subscribe");
+  await page.getByRole("button", { name: "Subscribe Now" }).click();
+
+  await expect(page).toHaveURL("https://paypal.test/approve");
+  expect(functionRequest.url()).toBe(
+    "https://us-central1-whatsanalyze-80665.cloudfunctions.net/helloworld"
+  );
+  expect(functionRequest.postDataJSON().data.client_id).toBeTruthy();
+});
+
 test("renders migrated markdown content", async ({ page }) => {
   await page.goto("/how-to-export-your-whatsapp-chat");