Skip to content

getProductItemList

인앱 결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.

시그니처

typescript
interface IapProductListItem {
  sku: string;
  displayAmount: string;
  displayName: string;
  iconUrl: string;
  description: string;

프로퍼티

  • sku필수 · string

    상품의 고유 ID예요. `productId`와 동일한 값이에요.


    displayAmount필수 · string

    화면에 표시할 상품 이름이에요. 상품 이름은 앱인토스 콘솔에서 설정한 값이에요.


    displayName필수 · string

    통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.


    iconUrl필수 · string

    상품 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요.


    description필수 · string

    상품에 대한 설명이에요. 설명은 앱인토스 콘솔에서 설정한 값이에요.


예제

구매 가능한 인앱결제 상품목록 가져오기

tsx
import { useEffect, useState } from 'react';
import { List, ListRow, Txt } from '@toss-design-system/react-native';
import { IAP } from '@apps-in-toss/framework';

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

  useEffect(() => {
    async function fetchProducts() {
      try {
        const response = await IAP.getProductItemList();
        setProducts(response?.products ?? []);
      } catch (error) {
        console.error('상품 목록을 가져오는 데 실패했어요:', error);
      }
    }

    fetchProducts();
  }, []);
  
  return (
    <List>
      {products.map((product) => (
        <ListRow
          key={product.sku}
          contents={<Txt>{product.displayName}</Txt>}
        />
      ))}
    </List>
  );
}