In-App Purchases

Quick Start

The SDK is automatically injected as window.gapp.iap once you add items to your app in the Dashboard.

// 1. List items (e.g. on a shop page)
const items = await gapp.iap.getItems()

// 2. Check ownership before showing buy button
const owned = await gapp.iap.isOwned('premium_skin')
if (owned) {
  showUnlockedUI()
} else {
  showBuyButton()
}

// 3. Trigger purchase (from a click handler)
async function onBuyClick() {
  const result = await gapp.iap.purchase('premium_skin')
  if (result.success) {
    unlockItem('premium_skin')
  } else if (result.error === 'cancelled') {
    // user closed the popup — do nothing
  } else {
    alert('Purchase failed: ' + result.error)
  }
}

Setup

API Reference

const items = await gapp.iap.getItems()
// [{ itemKey: 'premium_skin', name: 'Premium Skin', priceCents: 499, ... }]

const item = await gapp.iap.getItem('premium_skin')

if (await gapp.iap.isOwned('premium_skin')) {
  unlockPremiumContent()
}

const purchases = await gapp.iap.getPurchases()

const result = await gapp.iap.purchase('premium_skin')
if (result.success) {
  grantItem('premium_skin')
}

Purchase Event

The SDK fires gapp:iap:purchased when a purchase is verified. Useful when the purchase button lives in a different component from the unlock logic.

window.addEventListener('gapp:iap:purchased', (e) => {
  const { itemKey, purchaseId } = e.detail
  unlockItem(itemKey)
})

Error Codes

Returned in result.error from gapp.iap.purchase().

Full Example

A complete shop page with buy buttons, ownership checks, and event listening.

window.addEventListener('gapp:ready', async () => {
  const items = await gapp.iap.getItems()
  const purchases = await gapp.iap.getPurchases()
  const ownedKeys = new Set(purchases.map(p => p.itemKey))

  for (const item of items) {
    renderItem(item, ownedKeys.has(item.itemKey))
  }
})

function renderItem(item, owned) {
  const el = document.createElement('div')
  el.innerHTML = `
    <h3>${item.name}</h3>
    <p>${item.description}</p>
    <button data-key="${item.itemKey}" ${owned ? 'disabled' : ''}>
      ${owned ? 'Owned' : '$' + (item.priceCents / 100).toFixed(2)}
    </button>
  `
  el.querySelector('button').addEventListener('click', async (e) => {
    const key = e.target.dataset.key
    const result = await gapp.iap.purchase(key)
    if (!result.success && result.error !== 'cancelled') {
      alert('Purchase failed: ' + result.error)
    }
  })
  document.getElementById('shop').appendChild(el)
}

// Unlock immediately on purchase, anywhere in the app
window.addEventListener('gapp:iap:purchased', (e) => {
  grantItem(e.detail.itemKey)
})

Local Development

Test IAP flows locally without real money. Add the dev-proxy script to your HTML and pass mock items via the data-iap-items attribute:

<script
  src="https://gapp.so/dev-proxy.js"
  data-token="YOUR_TOKEN"
  data-iap-items='[
    {"itemKey":"premium_skin","name":"Premium Skin","priceCents":499},
    {"itemKey":"pro_pack","name":"Pro Pack","priceCents":999}
  ]'
></script>

Purchases are stored in localStorage with the prefix gapp_dev_iap_. A browser confirm() dialog simulates the payment. When you publish, the script tag is stripped automatically — no changes needed.

Pricing & Fees

FAQ