useIAP

<script setup>
import { ref } from '@thelacanians/vue-native-runtime'
import { useIAP } from '@thelacanians/vue-native-runtime'

const { products, getProducts, purchase, restorePurchases, isReady, error } = useIAP()

// Load products when ready
async function loadProducts() {
  await getProducts(['com.myapp.premium', 'com.myapp.coins100'])
}

async function buyPremium() {
  const result = await purchase('com.myapp.premium')
  if (result) {
    console.log('Purchased:', result.transactionId)
  }
}
</script>

<template>
  <VView :style="{ flex: 1, padding: 20 }">
    <VButton :onPress="loadProducts">
      <VText>Load Products</VText>
    </VButton>

    <VView v-for="product in products" :key="product.id" :style="{ marginTop: 10 }">
      <VText>{{ product.displayName }} - {{ product.displayPrice }}</VText>
      <VButton :onPress="() => purchase(product.id)">
        <VText>Buy</VText>
      </VButton>
    </VView>

    <VText v-if="error" :style="{ color: 'red', marginTop: 10 }">{{ error }}</VText>
  </VView>
</template>

<script setup>
import { ref } from '@thelacanians/vue-native-runtime'
import { useIAP } from '@thelacanians/vue-native-runtime'

const { restorePurchases, error } = useIAP()
const restoredCount = ref(0)

async function handleRestore() {
  const restored = await restorePurchases()
  restoredCount.value = restored.length
}
</script>

<template>
  <VView :style="{ padding: 20 }">
    <VButton :onPress="handleRestore">
      <VText>Restore Purchases</VText>
    </VButton>
    <VText v-if="restoredCount > 0">Restored {{ restoredCount }} purchase(s)</VText>
    <VText v-if="error" :style="{ color: 'red' }">{{ error }}</VText>
  </VView>
</template>

<script setup>
import { ref, onMounted } from '@thelacanians/vue-native-runtime'
import { useIAP } from '@thelacanians/vue-native-runtime'

const { getProducts, purchase, getActiveSubscriptions, products, error } = useIAP()
const activeSubs = ref([])

onMounted(async () => {
  await getProducts(['com.myapp.monthly', 'com.myapp.yearly'])
  activeSubs.value = await getActiveSubscriptions()
})

async function subscribe(sku) {
  const result = await purchase(sku)
  if (result) {
    activeSubs.value = await getActiveSubscriptions()
  }
}
</script>

<template>
  <VView :style="{ flex: 1, padding: 20 }">
    <VText :style="{ fontSize: 20, fontWeight: 'bold' }">Subscriptions</VText>

    <VView v-for="product in products" :key="product.id" :style="{ marginTop: 10 }">
      <VText>{{ product.displayName }} - {{ product.displayPrice }}</VText>
      <VButton :onPress="() => subscribe(product.id)">
        <VText>Subscribe</VText>
      </VButton>
    </VView>

    <VText :style="{ marginTop: 20, fontWeight: 'bold' }">
      Active Subscriptions: {{ activeSubs.length }}
    </VText>
  </VView>
</template>