Appearance
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>
);
}