상품목록 가져오기

getProductItemList

getProductItemList 는 인앱 결제로 구매할 수 있는 상품 목록을 담은 함수예요. 상품 목록을 화면에 표시할 때 사용해요.

시그니처

function getProductItemList(): Promise<{ products: IapProductListItem[] } | undefined>;

반환값

• Promise<{ products: IapProductListItem[] } | undefined>
  

  상품 목록을 포함한 객체를 반환해요. 앱 버전이 최소 지원 버전(5.219.0)보다 낮으면 undefined를 반환해요.

프로퍼티

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

• IapProductListItem
  

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

• sku필수 · string
  

  상품의 고유 ID예요. IAP.createOneTimePurchaseOrder를 호출할때 사용하는 productId와 동일한 값이에요.

  
  displayAmount필수 · string
  

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

  
  displayName필수 · string
  

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

  
  iconUrl필수 · string
  

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

  
  description필수 · string
  

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

  
  

예제

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

React

import { IAP, IapProductListItem } from "@apps-in-toss/web-framework";
import { Button, List, ListRow } from "@toss-design-system/mobile";
import { useEffect, useState } from "react";

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

  async function buyIapProduct (productId: string) {
    try {
      await IAP.createOneTimePurchaseOrder({
        productId,
      });

      console.error("인앱결제에 성공했어요");
    } catch (error) {
      console.error("인앱결제에 실패했어요:", error);
    }
  };

  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}
          left={<ListRow.Image type="square" src={product.iconUrl} />}
          contents={
            <ListRow.Texts
              type="3RowTypeA"
              top={product.displayName}
              middle={product.description}
              bottom={product.displayAmount}
            />
          }
          right={
            <Button size="medium" onClick={() => buyIapProduct(product.sku)}>
              구매하기
            </Button>
          }
        />
      ))}
    </List>
  );
}

React Native

import { IAP, IapProductListItem } from "@apps-in-toss/framework";
import { Button, List, ListRow } from "@toss-design-system/react-native";
import { useEffect, useState } from "react";

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

  async function buyIapProduct (productId: string) {
    try {
      await IAP.createOneTimePurchaseOrder({
        productId,
      });

      console.error("인앱결제에 성공했어요");
    } catch (error) {
      console.error("인앱결제에 실패했어요:", error);
    }
  };

  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}
          left={
            <ListRow.Image type="square" source={{ uri: product.iconUrl }} />
          }
          right={
            <Button size="medium" onPress={() => buyIapProduct(product.sku)}>
              구매하기
            </Button>
          }
          contents={
            <ListRow.Texts
              type="3RowTypeA"
              top={product.displayName}
              middle={product.description}
              bottom={product.displayAmount}
            />
          }
        />
      ))}
    </List>
  );
}