@virgodev/iap 1.0.5 → 1.0.7

package/components/StripeCheckout.vue

@@ -46,7 +46,7 @@
           <span
             v-if="
               cart.items.some(
-                (i) => i.product.type === ProductType.PAID_SUBSCRIPTION
+                (i) => i.product.type === ProductType.PAID_SUBSCRIPTION,
               )
             "
           >
@@ -54,6 +54,38 @@
           </span>
         </div>
       </div>
+      <div v-if="showCoupon" class="coupon-row flex-row p-1 gap-1 align-center">
+        <template v-if="appliedCoupon">
+          <div class="flex-stretch coupon-applied">
+            Coupon <b>{{ appliedCoupon.id }}</b
+            >:
+            {{
+              appliedCoupon.percent_off
+                ? appliedCoupon.percent_off + "% off"
+                : "$" + appliedCoupon.amount_off + " off"
+            }}
+          </div>
+          <Button size="small" severity="secondary" @click="removeCoupon"
+            >Remove</Button
+          >
+        </template>
+        <template v-else>
+          <InputText
+            v-model="couponInput"
+            placeholder="Coupon code"
+            size="small"
+            class="flex-stretch"
+            :disabled="couponLoading"
+            @keyup.enter="applyCoupon"
+          />
+          <Button size="small" :loading="couponLoading" @click="applyCoupon">
+            Apply
+          </Button>
+        </template>
+      </div>
+      <div v-if="couponError" class="p-1-x">
+        <Message severity="error" size="small">{{ couponError }}</Message>
+      </div>
     </div>
 
     <div class="payments flex-stretch">
@@ -84,15 +116,17 @@ import { ProductType, useIapStore } from "../index";
 import type { StripeCart } from "../stores/iap";
 import Message from "primevue/message";
 import Button from "primevue/button";
+import InputText from "primevue/inputtext";
 
 const props = withDefaults(
   defineProps<{
     cart: StripeCart;
     returnUrl: string;
     email: string;
-    vertical: boolean;
+    vertical?: boolean;
+    showCoupon?: boolean;
   }>(),
-  { vertical: false }
+  { vertical: false, showCoupon: true },
 );
 
 const emits = defineEmits<{
@@ -105,17 +139,18 @@ const iap = useIapStore();
 const isLoading = ref<boolean>(false);
 const messageText = ref("");
 const sessionResponse: any = ref<any>();
+const couponInput = ref("");
+const couponLoading = ref(false);
+const couponError = ref("");
+const appliedCoupon = ref<any>(null);
 
 let checkout: StripeCheckout | null = null;
 let loadActionsResult: StripeCheckoutLoadActionsResult | null = null;
-let paymentElement = undefined;
+let paymentElement: any | undefined = undefined;
 
-watch(
-  () => props.cart,
-  () => {
-    getSession();
-  }
-);
+watch([() => props.cart, () => iap.stripe.coupon], () => {
+  getSession();
+});
 
 onMounted(async () => {
   getSession();
@@ -123,6 +158,7 @@ onMounted(async () => {
 
 async function getSession() {
   if (iap.stripe.client) {
+    messageText.value = "";
     try {
       // Fetch client secret from backend
       const clientSecretResponse = await api({
@@ -131,8 +167,9 @@ async function getSession() {
         json: {
           items: props.cart.items,
           sub: props.cart.items.some(
-            (i) => i.product.type === ProductType.PAID_SUBSCRIPTION
+            (i) => i.product.type === ProductType.PAID_SUBSCRIPTION,
           ),
+          coupon_code: iap.stripe.coupon,
         },
       });
       if (clientSecretResponse.ok) {
@@ -142,24 +179,39 @@ async function getSession() {
           clientSecret: sessionResponse.value.client_secret,
           elementsOptions: { appearance: { theme: "stripe" } },
         });
+        if (checkout && checkout !== null) {
+          checkout.on("change", (session: any) => {
+            // Handle changes to the checkout session
+            console.log("session changed:", session);
+          });
+          checkout.on("error", (error: any) => {
+            console.error("Error initializing checkout:", error);
+          });
+          checkout.on("ready", (...args: any) => {
+            console.info("ready?:", args);
+          });
 
-        checkout.on("change", (session: any) => {
-          // Handle changes to the checkout session
-          console.log("session changed:", session);
-        });
+          console.log("session created:", sessionResponse.value, checkout);
 
-        loadActionsResult = await checkout.loadActions();
+          loadActionsResult = await checkout.loadActions();
 
-        if (loadActionsResult.type !== "success") {
-          showPaymentMessage("Failed to load payment actions");
-        }
+          if (
+            loadActionsResult.type === "error" &&
+            /^No such payment_page: /.test(loadActionsResult.error.message)
+          ) {
+          } else if (loadActionsResult.type !== "success") {
+            showPaymentMessage("Failed to load payment actions");
+          }
 
-        if (paymentElement) {
-          await paymentElement.destroy();
-          await nextTick();
+          if (paymentElement) {
+            await paymentElement.destroy();
+            await nextTick();
+          }
+          paymentElement = checkout.createPaymentElement();
+          paymentElement.mount("#payment-element");
+        } else {
+          console.error("failed to create checkout");
         }
-        paymentElement = checkout.createPaymentElement();
-        paymentElement.mount("#payment-element");
       } else {
         const errorContent = clientSecretResponse.body.error;
         iap.stripe.error = new Error(errorContent);
@@ -173,6 +225,34 @@ async function getSession() {
   }
 }
 
+async function applyCoupon() {
+  if (!couponInput.value.trim()) return;
+  couponLoading.value = true;
+  couponError.value = "";
+  try {
+    const response = await api({
+      url: `purchases/coupon/?code=${encodeURIComponent(couponInput.value.trim())}`,
+      method: "GET",
+    });
+    if (response.ok) {
+      appliedCoupon.value = response.body;
+      iap.stripe.coupon = couponInput.value.trim();
+      couponInput.value = "";
+    } else {
+      couponError.value = response.body.error || "Invalid coupon";
+    }
+  } catch (e) {
+    console.log("e", e);
+    couponError.value = "Failed to validate coupon";
+  }
+  couponLoading.value = false;
+}
+
+function removeCoupon() {
+  appliedCoupon.value = null;
+  iap.stripe.coupon = "";
+}
+
 function showPaymentMessage(messageContent: string) {
   messageText.value = messageContent;
 
@@ -186,7 +266,6 @@ function setLoading(loading: boolean) {
 }
 
 async function handleSubmit() {
-  console.log("Submitting payment");
   setLoading(true);
   emits("start");
 
@@ -210,7 +289,6 @@ async function handleSubmit() {
   }
 
   setLoading(false);
-  console.log("done Submitting payment");
 }
 </script>
 
@@ -223,4 +301,7 @@ async function handleSubmit() {
 .cart {
   min-width: 250px;
 }
+.coupon-applied {
+  color: green;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@virgodev/iap",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "main": "./index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,9 +9,11 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "@capacitor/core": "^7.4.4",
     "@stripe/stripe-js": "^8.2.0",
     "@virgodev/iap": "^1.0.1",
-    "cordova-plugin-purchase": "^13.12.1"
+    "cordova-plugin-purchase": "^13.12.1",
+    "localforage": "^1.10.0"
   },
   "peerDependencies": {
     "@capacitor/app": "^7.1.0",

package/stores/iap.ts

@@ -129,6 +129,9 @@ export const useIapStore = defineStore("iap", () => {
   const stripeCallback =
     ref<(t: Transaction | undefined) => Transaction | undefined>();
   const stripeError = ref<undefined | string>();
+  const stripeCoupon = ref("");
+
+  const mobileCoupon = ref("");
 
   const storePlatform = computed(() => {
     if (platform.value === "android") {
@@ -199,8 +202,9 @@ export const useIapStore = defineStore("iap", () => {
           const { store } = window.CdvPurchase;
           const product = store.get(code, storePlatform.value);
           if (product) {
-            const offer = product.getOffer();
-            return offer.order();
+            const coupon = mobileCoupon.value || undefined;
+            const offer = product.getOffer(coupon) ?? product.getOffer();
+            return offer.order(coupon ? { applicationUsername: coupon } : undefined);
           } else {
             console.error("Product not found");
           }
@@ -258,6 +262,7 @@ export const useIapStore = defineStore("iap", () => {
           transaction: p,
           platform: p.platform,
           subscription: sub,
+          coupon_code: mobileCoupon.value || undefined,
         },
       });
 
@@ -267,6 +272,21 @@ export const useIapStore = defineStore("iap", () => {
     }
   }
 
+  async function redeemAppleCode(): Promise<void> {
+    if (platform.value !== "ios") {
+      throw new Error("Offer code redemption is only supported on iOS");
+    }
+    if (!window.CdvPurchase) {
+      throw new Error("CdvPurchase not available");
+    }
+    const { store } = window.CdvPurchase;
+    if (typeof store.presentCodeRedemptionSheet === "function") {
+      await store.presentCodeRedemptionSheet();
+    } else {
+      throw new Error("presentCodeRedemptionSheet is not supported in this version of CdvPurchase");
+    }
+  }
+
   function getCdvProducts(): any[] {
     const { store } = window.CdvPurchase;
     return store.products;
@@ -309,6 +329,11 @@ export const useIapStore = defineStore("iap", () => {
     purchases,
     ready,
 
+    mobile: {
+      coupon: mobileCoupon,
+      redeemAppleCode,
+    },
+
     stripe: {
       key: STRIP_KEY,
       client: stripe,
@@ -318,6 +343,7 @@ export const useIapStore = defineStore("iap", () => {
       result: stripeResult,
       callback: stripeCallback,
       error: stripeError,
+      coupon: stripeCoupon,
       reset,
     },
   };