@virgodev/iap 1.0.1 → 1.0.3

package/components/StripeCheckout.vue

@@ -1,19 +1,33 @@
 <template>
-  <div v-if="!sessionResponse" id="payment-form p-4">Loading...</div>
+  <Message
+    v-if="!sessionResponse && messageText"
+    id="payment-message"
+    :class="{ hidden: !messageText }"
+    class="p-1 message"
+    severity="error"
+  >
+    <b>Failed to create payment session. Please try again later.</b>
+    <div>{{ messageText }}</div>
+  </Message>
+  <div v-else-if="!sessionResponse" id="payment-form p-4">Loading...</div>
   <form
     v-else
     id="payment-form"
-    class="p-3-t flex-row flex-wrap gap-2"
+    class="p-3-t flex-wrap gap-2"
+    :class="{
+      'flex-row': !props.vertical,
+      'flex-column': props.vertical,
+    }"
     @submit.prevent="handleSubmit"
   >
-    <div
-      v-if="showMessage"
+    <Message
+      v-if="messageText"
       id="payment-message"
-      :class="{ hidden: !showMessage }"
       class="message"
+      severity="error"
     >
       {{ messageText }}
-    </div>
+    </Message>
 
     <div class="cart flex-column flex-stretch p-1">
       <div v-for="item in cart.items" :key="item.id" class="flex-column p-1">
@@ -48,11 +62,11 @@
         <!-- Stripe.js injects the Payment Element -->
       </div>
 
-      <slot name="button">
-        <div class="flex-row justify-center p-2">
-          <button id="submit" :disabled="isLoading" type="submit">
+      <slot name="default">
+        <div class="flex-row justify-right p-2">
+          <Button id="submit" :disabled="isLoading" type="submit">
             Pay Now
-          </button>
+          </Button>
         </div>
       </slot>
     </div>
@@ -65,62 +79,43 @@ import type {
   StripeCheckoutLoadActionsResult,
 } from "@stripe/stripe-js";
 import api from "@virgodev/bazaar/functions/api";
-import { onMounted, ref } from "vue";
-import { ProductType, useIapStore } from "../main";
+import { onMounted, ref, watch, nextTick } from "vue";
+import { ProductType, useIapStore } from "../index";
 import type { StripeCart } from "../stores/iap";
+import Message from "primevue/message";
+import Button from "primevue/button";
 
 const props = defineProps<{
   cart: StripeCart;
   returnUrl: string;
+  email: string;
+  vertical: false;
 }>();
 
 const iap = useIapStore();
 
 const isLoading = ref<boolean>(false);
-const showMessage = ref(false);
 const messageText = ref("");
 const sessionResponse = ref<any>();
 
 let checkout: StripeCheckout | null = null;
 let loadActionsResult: StripeCheckoutLoadActionsResult | null = null;
+let paymentElement = undefined;
 
-const showPaymentMessage = (messageContent: string) => {
-  messageText.value = messageContent;
-  showMessage.value = true;
-
-  setTimeout(() => {
-    showMessage.value = false;
-    messageText.value = "";
-  }, 4000);
-};
-
-const setLoading = (loading: boolean) => {
-  isLoading.value = loading;
-};
-
-const handleSubmit = async () => {
-  setLoading(true);
-
-  if (loadActionsResult?.type === "success") {
-    const result = await loadActionsResult.actions.confirm({
-      returnUrl:
-        props.returnUrl + "?stripe_session_id=" + sessionResponse.value.id,
-    });
-
-    if (result.type === "error") {
-      showPaymentMessage(`${result.error.code}: ${result.error.message}`);
-    } else {
-      // TODO: verify with server
-      // TODO: connect purchaseItem with a promise resolve function
-    }
+watch(
+  () => props.cart,
+  () => {
+    getSession();
   }
-
-  setLoading(false);
-};
+);
 
 onMounted(async () => {
-  try {
-    if (iap.stripe) {
+  getSession();
+});
+
+async function getSession() {
+  if (iap.stripe.client) {
+    try {
       // Fetch client secret from backend
       const clientSecretResponse = await api({
         url: "purchases/session/",
@@ -135,7 +130,7 @@ onMounted(async () => {
       if (clientSecretResponse.ok) {
         sessionResponse.value = clientSecretResponse.body;
 
-        checkout = await iap.stripe.initCheckout({
+        checkout = await iap.stripe.client.initCheckout({
           clientSecret: sessionResponse.value.client_secret,
           elementsOptions: { appearance: { theme: "stripe" } },
         });
@@ -151,21 +146,63 @@ onMounted(async () => {
           showPaymentMessage("Failed to load payment actions");
         }
 
-        const paymentElement = checkout.createPaymentElement();
+        if (paymentElement) {
+          await paymentElement.destroy();
+          await nextTick();
+        }
+        paymentElement = checkout.createPaymentElement();
         paymentElement.mount("#payment-element");
+      } else {
+        const errorContent = clientSecretResponse.body.error;
+        iap.stripe.error = new Error(errorContent);
+        messageText.value = errorContent;
       }
+    } catch (error) {
+      iap.stripe.error = error;
+      console.error("Error initializing checkout:", error);
+      showPaymentMessage("Failed to initialize payment form");
     }
-  } catch (error) {
-    console.error("Error initializing checkout:", error);
-    showPaymentMessage("Failed to initialize payment form");
   }
-});
+}
+
+function showPaymentMessage(messageContent: string) {
+  messageText.value = messageContent;
+
+  setTimeout(() => {
+    messageText.value = "";
+  }, 8000);
+}
+
+function setLoading(loading: boolean) {
+  isLoading.value = loading;
+}
+
+async function handleSubmit() {
+  setLoading(true);
+
+  if (loadActionsResult?.type === "success") {
+    const result = await loadActionsResult.actions.confirm({
+      email: props.email,
+      returnUrl:
+        props.returnUrl + "?stripe_session_id=" + sessionResponse.value.id,
+    });
+    if (result.type === "error") {
+      showPaymentMessage(`${result.error.code}: ${result.error.message}`);
+    } else {
+      // TODO: verify with server
+      // TODO: connect purchaseItem with a promise resolve function
+    }
+  }
+
+  setLoading(false);
+}
 </script>
 
 <style scoped>
 #payment-form {
-  min-width: 400px;
-  max-width: 600px;
+  min-width: 300px;
+  width: 600px;
+  flex: 1 1 600px;
 }
 .cart {
   min-width: 250px;

package/components/StripePopup.vue

@@ -1,20 +1,20 @@
 <template>
   <Dialog
-    v-if="iap.stripeStatus && iap.stripeCart"
-    :visible="!!iap.stripeCart"
+    v-if="iap.stripe.status && iap.stripe.cart"
+    :visible="!!iap.stripe.cart"
     :dismissable-mask="true"
     :modal="true"
     :show-header="false"
     @update:visible="closeDialog"
   >
     <div
-      v-if="iap.stripeStatus === 'verified' && iap.stripeCart"
+      v-if="iap.stripe.status === 'verified' && iap.stripe.cart"
       class="complete flex-column justify-center align-items-center p-3"
     >
       <h2 class="text-center p-1">Payment Complete!</h2>
       <i class="pi pi-check-circle text-success p-2 text-center" />
       <div class="cart p-3-x p-1-y">
-        <div v-for="item of iap.stripeCart.items" class="flex-row">
+        <div v-for="item of iap.stripe.cart.items" class="flex-row">
           <div class="flex-stretch">
             <b>{{ item.product?.name }}</b>
           </div>
@@ -22,7 +22,12 @@
         </div>
       </div>
     </div>
-    <StripeCheckout v-else :cart="iap.stripeCart" :return-url="returnUrl">
+    <StripeCheckout
+      v-else
+      :cart="iap.stripe.cart"
+      :return-url="returnUrl"
+      :email="props.email"
+    >
       <template #button>
         <div class="flex-row justify-stretch p-1-y">
           <Button type="submit" class="flex-stretch">Pay Now</Button>
@@ -43,43 +48,24 @@ const router = useRouter();
 const iap = useIapStore();
 const visible = ref(false);
 
+const props = defineProps<{ email: string }>();
+
 const returnUrl = computed(() => {
   return `${location.protocol}//${location.host}${router.currentRoute.value.fullPath}`;
 });
 
-router.beforeResolve(async (to, from, next) => {
-  if (to.query.stripe_session_id) {
-    const cart = iap.stripeCart;
-    await nextTick();
-    if (cart && cart.items.length > 0) {
-      const item = cart.items[0];
-      const result = await iap.verify({
-        products: [{ id: item.product.id }],
-        platform: Platform.STRIPE,
-        transactionId: `${to.query.stripe_session_id}`,
-        purchaseId: item.product.id,
-        finish: function (): void {},
-      });
-      if (result) {
-        iap.stripeStatus = "verified";
-        delete to.query.stripe_session_id;
-      }
-      next(to);
-    } else {
-      console.warn("Found stripe session, but cart is empty");
-      next();
-    }
-  } else {
-    next();
-  }
-});
-
 onMounted(() => {});
 
 function closeDialog(v: boolean): void {
   if (v === false) {
-    iap.stripeCart = undefined;
-    iap.stripeStatus = undefined;
+    if (iap.stripe.callback) {
+      iap.stripe.callback(undefined);
+    }
+    iap.stripe.callback = undefined;
+    iap.stripe.result = undefined;
+    iap.stripe.cart = undefined;
+    iap.stripe.status = undefined;
+    iap.stripe.error = undefined;
     visible.value = false;
   }
 }

package/{main.ts → index.ts}

@@ -3,3 +3,15 @@ export { Platform, ProductType, useIapStore } from "./stores/iap";
 export { default as StripeCheckout } from "./components/StripeCheckout.vue";
 export { default as StripeComplete } from "./components/StripeComplete.vue";
 export { default as StripePopup } from "./components/StripePopup.vue";
+
+import { catchVerifiedPayments } from "./utils";
+
+export default {
+  install(app, options) {
+    if (!options.router) {
+      console.error("Vue Router is required for the IAP plugin.");
+      return;
+    }
+    catchVerifiedPayments(options.router);
+  },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@virgodev/iap",
-  "version": "1.0.1",
-  "main": "./main.ts",
+  "version": "1.0.3",
+  "main": "./index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -10,14 +10,15 @@
   "description": "",
   "dependencies": {
     "@stripe/stripe-js": "^8.2.0",
+    "@virgodev/iap": "^1.0.1",
     "cordova-plugin-purchase": "^13.12.1"
   },
   "peerDependencies": {
-    "@virgodev/bazaar": "^1.2.7",
     "@capacitor/app": "^7.1.0",
     "@capacitor/device": "^7.0.2",
-    "vue-router": "^4.6.3",
+    "@virgodev/bazaar": "^1.2.7",
+    "pinia": "^3.0.3",
     "primevue": "^4.4.1",
-    "pinia": "^3.0.3"
+    "vue-router": "^4.6.3"
   }
 }

package/stores/iap.ts

@@ -6,7 +6,7 @@ import api from "@virgodev/bazaar/functions/api";
 import { localRef } from "@virgodev/bazaar/functions/localstorage/localRef";
 import { createStore } from "@virgodev/vue-models/utils/create_store";
 import { defineStore } from "pinia";
-import { computed, ref, shallowRef } from "vue";
+import { computed, ref, shallowRef, watch } from "vue";
 import { useRouter } from "vue-router";
 
 export enum ProductType {
@@ -125,6 +125,10 @@ export const useIapStore = defineStore("iap", () => {
   const stripeLoaded = ref(false);
   const stripeCart = localRef<StripeCart | undefined>("stripe-cart", undefined);
   const stripeStatus = ref<undefined | "cart" | "verified">();
+  const stripeResult = ref<undefined | Transaction>();
+  const stripeCallback =
+    ref<(t: Transaction | undefined) => Transaction | undefined>();
+  const stripeError = ref<undefined | string>();
 
   const storePlatform = computed(() => {
     if (platform.value === "android") {
@@ -134,6 +138,14 @@ export const useIapStore = defineStore("iap", () => {
     }
   });
 
+  watch(stripeResult, () => {
+    if (stripeCallback.value) {
+      stripeCallback.value(stripeResult.value);
+      stripeCallback.value = undefined;
+      stripeResult.value = undefined;
+    }
+  });
+
   async function initialize(loadProducts: IapProduct[]) {
     products.value = loadProducts;
 
@@ -162,11 +174,12 @@ export const useIapStore = defineStore("iap", () => {
 
       store.initialize();
     } else {
-      console.warn("CdvPurchase not found, skipping ios/android payments");
+      console.debug("CdvPurchase not found, skipping ios/android payments");
+      isReady.value = true;
     }
   }
 
-  async function purchaseItem(code: string) {
+  async function purchaseItem(code: string): Promise<any | undefined> {
     const product = products.value.find((p) => p.id === code);
     if (product) {
       if (product.platform === Platform.STRIPE) {
@@ -174,6 +187,9 @@ export const useIapStore = defineStore("iap", () => {
         stripeCart.value = {
           items: [{ product, price: product.stripePrice, quantity: 1 }],
         };
+        return await new Promise<Transaction | undefined>((resolve) => {
+          stripeCallback.value = resolve;
+        });
         // this should trigger the <StripePopup /> component
       } else if (
         product.platform === Platform.GOOGLE_PLAY ||
@@ -218,6 +234,8 @@ export const useIapStore = defineStore("iap", () => {
   }
 
   async function verify(p: Transaction) {
+    await ready();
+
     let productId = p.products[0].id;
     const product = products.value.find((p) => p.id === productId);
     if (product) {
@@ -254,7 +272,22 @@ export const useIapStore = defineStore("iap", () => {
     return store.products;
   }
 
+  function ready(): boolean {
+    return new Promise((resolve) => {
+      watch(
+        isReady,
+        (ready) => {
+          if (isReady.value) {
+            resolve(ready);
+          }
+        },
+        { immediate: true }
+      );
+    });
+  }
+
   return {
+    products,
     platform,
     storePlatform,
     initialize,
@@ -263,12 +296,18 @@ export const useIapStore = defineStore("iap", () => {
     findPurchases,
     verify,
     purchases,
-
-    STRIP_KEY,
-    stripe,
-    stripeLoaded,
-    stripeCart,
-    stripeStatus,
+    ready,
+
+    stripe: {
+      key: STRIP_KEY,
+      client: stripe,
+      loaded: stripeLoaded,
+      cart: stripeCart,
+      status: stripeStatus,
+      result: stripeResult,
+      callback: stripeCallback,
+      error: stripeError,
+    },
   };
 });
 

package/utils.ts

@@ -0,0 +1,35 @@
+import { useRouter } from "vue-router";
+import { useIapStore, Platform } from "./stores/iap";
+import { nextTick } from "vue";
+
+export function catchVerifiedPayments(router) {
+  router.beforeResolve(async (to, from, next) => {
+    if (to.query.stripe_session_id) {
+      const iap = useIapStore();
+      const cart = iap.stripe.cart;
+      await nextTick();
+      if (cart && cart.items.length > 0) {
+        const item = cart.items[0];
+        const transaction = {
+          products: [{ id: item.product.id }],
+          platform: Platform.STRIPE,
+          transactionId: `${to.query.stripe_session_id}`,
+          purchaseId: item.product.id,
+          finish: function (): void {},
+        };
+        const result = await iap.verify(transaction);
+        if (result) {
+          iap.stripe.result = transaction;
+          iap.stripe.status = "verified";
+          delete to.query.stripe_session_id;
+        }
+        next(to);
+      } else {
+        console.warn("Found stripe session, but cart is empty");
+        next();
+      }
+    } else {
+      next();
+    }
+  });
+}