인앱 결제 구현, 문서를 보고 따라가기가 안됩니다

개발
1

아래 문제 해결 되었습니다.. 다른 분들을 위해 남깁니다. ㅠㅠ

원인은 Apps In Toss Sandbox의 버전 문제.

이 개발한 앱이 apps in toss framework와 매칭이 되어야 한다는 것을 알 방법이 없었고.. Apps In Toss Sandbox 업데이트 소식과 버전은 ‘공지사항’에서도 올라오지 않아서 문제 발견이 넘 어려웠습니다.
라이브러리와 샌드박스앱 최신 버전 숫자 정리된 포함된 설치안내/다운로드 페이지 만들어 주면 좋을 것 같습니다.. 뭔가 잘 안되는 문제 생기면 여기부터 방문해 보게요.
Apps in Toss Sandbox이 현재 사용중인 프레임워크를 지원하지 않는 구버전이라면 앱에서 알려줄수 있어도 좋겠습니다.

전 웁니다…………..

ps 상품목록 가져오기 | 앱인토스 개발자센터 에서 “구매 가능한 인앱결제 상품목록 가져오기” 의 결제 소스코드는 업데이트가 필요합니다.
”apps-in-toss-examples 저장소에서 with-in-app-purchase 코드를 내려받아 체험해 보세요.” 여기 소스코드도요~~

안녕하세요?

  1. 여기 샘플을 따라해서 상품 목록 가지고 오기가 제대로 안됩니다.

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

LOG 성공: products로 안나오고 response에 아래와 같이 바로 나옵니다.

[{"description": "소모성 재화 입니다.", "displayAmount": "1100원", "displayName": "테스트 상품 - 1", "iconUrl": "https://static.toss.im/appsintoss/271/fef52836-b08f-49af-b358-05c9f9b83bb6.png", "sku": "ait.0000009586.4788652c.6a01d332fa.1297297638"}, {"description": "소모성 재화 입니다.", "displayAmount": "2200원", "displayName": "테스트 상품 - 2", "iconUrl": "https://static.toss.im/appsintoss/271/fef52836-b08f-49af-b358-05c9f9b83bb6.png", "sku": "ait.0000009586.041973a0.2ba689033a.1297313568"}]

아래와 같은 식으로 처리하면 되기도 하는데 타입에러가 참 신경쓰이고 앞으로 라이브러리가 어떻게 변경될지 모르겠습니다.

      try {
        const response = await IAP.getProductItemList();
        setProducts(response);
        console.log(' 성공', response);
      } catch (error) {
        console.error("상품 목록을 가져오는 데 실패했어요:", error);
      }

어쩌면 샌드박스 테스트에서만 이렇게 나올지도 모르겠네요.

  1. 상품목록 가져오기 | 앱인토스 개발자센터 에서 소개된 아래 결제 진행 코드는 작동을 하지 않습니다.

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

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


// 아래와 같은 이유로...
interface IapCreateOneTimePurchaseOrderOptions {
    options: Sku & {
        processProductGrant: (params: {
            orderId: string;
        }) => boolean | Promise<boolean>;
    };
    onEvent: (event: SuccessEvent) => void | Promise<void>;
    onError: (error: unknown) => void | Promise<void>;
}

import { IAP } from "@apps-in-toss/framework";
import { Button } from "@toss-design-system/react-native";
import { useCallback } from "react";
 
 interface Props {
   sku: string;
 }
 
 function IapCreateOneTimePurchaseOrderButton({ sku }: Props) {
  const handleClick = useCallback(() => {
    const cleanup = IAP.createOneTimePurchaseOrder({
      options: {
        sku,
        processProductGrant: ({ orderId }) => {
          // 상품 지급 로직을 작성해요.
          return true; // 상품 지급 여부를 반환해요.
        }
        },
      onEvent: (event) => {
        console.log(event);
      },
      onError: (error) => {
        console.error(error);
      },
    });

    return cleanup;
  }, []);

   return <Button onPress={handleClick}>구매하기</Button>;
 }

결제하기에서의 결제하기 | 앱인토스 개발자센터 위 코드를 사용하면 될것 같은데.. 빌드는 되나 실행하면 아래와 같은 에러가 납니다.

 ERROR  [Error: 'requestOneTimePurchase' is not defined in AppsInTossModule]

/** @deprecated `requestOneTimePurchase`를 사용해주세요. */

라이브러리 소스에 위와 같은 문구를 발견해서 requestOneTimePurchase를 사용하려고 해봤으나 다시 위와 같은 에러 메세지가 뜹니다.

이정도면.. 제가 사용하는 라이브러리 버전이 꼬인 것 같을 정도인데..

지금 사용 라이브러리는 다음과 같습니다.

├── @apps-in-toss/framework@1.2.0
├── @babel/core@7.23.9
├── @babel/plugin-proposal-class-properties@7.18.6
├── @babel/plugin-proposal-nullish-coalescing-operator@7.18.6
├── @babel/plugin-proposal-numeric-separator@7.18.6
├── @babel/plugin-proposal-optional-chaining@7.21.0
├── @babel/plugin-proposal-private-methods@7.18.6
├── @babel/plugin-proposal-private-property-in-object@7.21.11
├── @babel/plugin-transform-flow-strip-types@7.27.1
├── @babel/preset-env@7.28.3
├── @babel/preset-react@7.27.1
├── @babel/preset-typescript@7.27.1
├── @babel/runtime@7.18.9
├── @granite-js/native@0.1.21
├── @granite-js/plugin-router@0.1.21
├── @granite-js/react-native@0.1.21
├── @testing-library/react-native@12.9.0
├── @toss-design-system/react-native@1.2.1
├── @types/babel__core@7.20.5
├── @types/jest@29.5.14
├── @types/node@22.18.6
├── @types/react@18.3.3
├── jest@29.7.0
├── react-native@0.72.6
├── react-test-renderer@18.2.0
├── react@18.2.0
└── typescript@5.9.2

Apps In Toss Sandbox 202509091913

npm view @apps-in-toss/framework version
1.2.0

npm view @toss-design-system/react-native version 
1.2.1

인앱 결제 잘 사용하고 있는 분들도 있는 거 같은데. 조언 부탁드립니다. ㅠㅠ

1개의 좋아요
2

@Line1 님 안녕하세요

앗 샌드박스 앱 버전도 함께 업데이트드리겠습니다.

샌드박스앱과 SDK 가 대부분 함께 업데이트되는데 SDK만 안내를 드렸네요

샌드박스앱도 함께 챙겨서 공지드릴게요 :folded_hands:

1개의 좋아요