개발환경 인앱결제 상품 조회 관련

개발
1

안녕하세요.

webview에서 IAP.getProductItemList() 를 이용해서 상품 조회 시 문서상으로는 개발환경의 경우 mock 데이터가 전달되는 것으로 되어있지만 샌드박스 앱에서 조회하면 빈 배열이 오는 것 같습니다.

혹시 개발환경에서 상품 결제 테스트를 진행하려면 어떤 식으로 구성해야할까요?

추가 정보 공유드립니다.

  • host: localhost
  • @apps-in-toss/web-framework : 0.0.40
2

안녕하세요 :slight_smile:

image
image696×1346 103 KB

샌드박스앱에서 조회 시 잘 mock 데이터로 잘 내려오는 것 같습니다 :cry:
샌드박스앱 버전을 최신화 후 다시 시도 해봐주시겠어요 ?

테스트한 코드 샘플을 전달드려요

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

export default function IapProductList() {
  const [products, setProducts] = useState<IapProductListItem[]>([]);
  const [lastSuccessResponse, setLastSuccessResponse] = useState<unknown | null>(null);
  const [lastErrorResponse, setLastErrorResponse] = useState<unknown | null>(null);

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

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


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

    fetchProducts();
  }, []);

  return (
    <div style={{ padding: "16px" }}>
      <div style={{ marginBottom: "16px" }}>
        <h2 style={{ margin: 0, marginBottom: "8px" }}>최근 인앱 결제 응답</h2>
        {lastSuccessResponse !== null ? (
          <div style={{
            border: "1px solid #e5e8eb",
            borderRadius: 8,
            padding: 12,
            background: "#f9fafb",
            marginBottom: 12,
            overflow: "auto",
          }}>
            <strong style={{ display: "block", marginBottom: 8 }}>성공</strong>
            <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
{JSON.stringify(lastSuccessResponse, null, 2) ?? 'undefined'}
            </pre>
          </div>
        ) : null}
        {lastErrorResponse !== null ? (
          <div style={{
            border: "1px solid #ffe4e6",
            borderRadius: 8,
            padding: 12,
            background: "#fff1f2",
            overflow: "auto",
          }}>
            <strong style={{ display: "block", marginBottom: 8, color: '#e11d48' }}>실패</strong>
            <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: '#9f1239' }}>
{JSON.stringify(lastErrorResponse, null, 2) ?? 'undefined'}
            </pre>
          </div>
        ) : null}
        <div>
          <Button size="medium" onClick={() => { setLastSuccessResponse(null); setLastErrorResponse(null); }}>
            로그 지우기
          </Button>
        </div>
      </div>

      <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>
    </div>
  );
}
1개의 좋아요
3

아 말씀주신대로 샌드박스 앱의 버전이 낮았던 것이 원인이었습니다. 감사합니다!

1개의 좋아요
4

개발자센터에 기능별로 샌드박스앱, 토스앱 최소 지원 버전을 기재해두겠습니다

2개의 좋아요