IAP.getProductItemList

Fetches the list of products available for in-app purchase. Call this when the user enters your product list screen. Returns an array of IapProductListItem covering consumable, non-consumable, and subscription types.

Signature

getProductItemList is a member of the IAP namespace object.

import { IAP } from '@apps-in-toss/web-framework';

declare const IAP: {
  getProductItemList(): Promise<{
    products: IapProductListItem[];
  }>;
  // ...see overview
};

Parameters

None.

Returns

Promise<{ products: IapProductListItem[] }> — product list.

IapProductListItem is the union type ConsumableProductListItem | NonConsumableProductListItem | SubscriptionProductListItem.

Shared fields (BasicProductListItem)

Field	Type	Description
sku	string	Unique product ID.
displayName	string	Product name for display.
displayAmount	string	Price with currency symbol (e.g. ₩1,000).
iconUrl	string	Product icon URL.
description	string	Product description.

Type-specific additional fields

Type	Extra fields
CONSUMABLE	type: 'CONSUMABLE'
NON_CONSUMABLE	type: 'NON_CONSUMABLE'
SUBSCRIPTION	type: 'SUBSCRIPTION', renewalCycle: 'WEEKLY' | 'MONTHLY' | 'YEARLY', offers?: Offer[]

May return undefined on app versions below the minimum (Android 5.219.0 / iOS 5.219.0).

Permission

No permission required — the IAP namespace is not bound to a PermissionName.

Examples

Minimal

import { IAP } from '@apps-in-toss/web-framework';

const result = await IAP.getProductItemList();
const products = result?.products ?? [];
console.log(products);

Realistic — render by type

import type { IapProductListItem } from '@apps-in-toss/web-framework';
import { IAP } from '@apps-in-toss/web-framework';
import { useEffect, useState } from 'react';

function ProductList() {
  const [products, setProducts] = useState<IapProductListItem[]>([]);

  useEffect(() => {
    IAP.getProductItemList().then((result) => {
      setProducts(result?.products ?? []);
    });
  }, []);

  return (
    <ul>
      {products.map((product) => (
        <li key={product.sku}>
          <span>{product.displayName}</span>
          <span>{product.displayAmount}</span>
          {product.type === 'SUBSCRIPTION' && (
            <span>Renews: {product.renewalCycle}</span>
          )}
        </li>
      ))}
    </ul>
  );
}

Try it live

Run getProductItemList on the IAP page in sdk-example to inspect the product list.

→Open in sdk-example

Related APIs

• IAP.createOneTimePurchaseOrder — one-time purchase after viewing the list.
• IAP.createSubscriptionPurchaseOrder — subscription purchase.
• IAP.getCompletedOrRefundedOrders — completed and refunded order history.

Related guides

• Guides — IAP state queries — managing product list, pending orders, refund sync, and subscription state at entry in one place.

External references

• @apps-in-toss/web-framework — SDK package. The actual exports are re-exported from @apps-in-toss/web-bridge.