Appearance

결제하기 ​

createOneTimePurchaseOrder ​

createOneTimePurchaseOrder 함수는 인앱 결제 결제창을 띄우고, 사용자가 결제를 진행해요. 만약 결제 중에 에러가 발생하면 에러 유형에 따라 에러 페이지로 이동해요.

시그니처 ​

typescript
function createOneTimePurchaseOrder(params: IapCreateOneTimePurchaseOrderOptions): Promise<IapCreateOneTimePurchaseOrderResult>;

파라미터 ​

typescript
interface IapCreateOneTimePurchaseOrderOptions {
  productId: string;
}
  • params필수 · IapCreateOneTimePurchaseOrderOptions

    인앱 결제 결제창을 띄울 때 필요한 옵션이에요.

    • params.productId필수 · string

      주문할 상품의 ID예요.

반환값 ​

  • Promise<IapCreateOneTimePurchaseOrderResult | undefined>

    결제 성공 여부를 포함한 결과를 반환해요. 앱 버전이 최소 지원 버전(5.219.0)보다 낮으면 undefined를 반환해요.

프로퍼티 ​

typescript
interface IapCreateOneTimePurchaseOrderResult {
  orderId: string;
  displayName: string;
  displayAmount: string;
  amount: number;
  currency: string;
  fraction: number;
  miniAppIconUrl: string | null;
}
  • IapCreateOneTimePurchaseOrderResult

    인앱 결제가 완료되면 결제 세부 정보와 상품 정보를 담아 반환해요. 반환된 정보로 결제한 상품의 정보를 화면에 표시할 때 사용할 수 있어요.

  • orderId필수 · string

    결제 주문 ID이에요. 결제 완료 후 결제 상태를 조회할 때 사용해요.

  • displayName필수 · string

    화면에 표시할 상품 이름이에요.

  • displayAmount필수 · string

    통화 단위가 포함된 가격 정보예요.

  • amount필수 · number

    상품 가격 숫자 값이에요.

  • currency필수 · string

    상품 가격 통화 단위예요.

  • fraction필수 · number

    가격을 표시할 때 소수점 아래 몇 자리까지 보여줄지 정하는 값이에요.

  • miniAppIconUrlstring | null

    미니앱 아이콘 이미지의 URL이에요.

에러코드 ​

  • INVALID_PRODUCT_ID

    유효하지 않은 상품 ID이거나, 해당 상품이 존재하지 않을 때 발생해요.


    PAYMENT_PENDING

    사용자가 요청한 결제가 아직 승인을 기다리고 있을 때 발생해요.


    NETWORK_ERROR

    서버 내부 문제로 요청을 처리할 수 없을 때 발생해요.


    INVALID_USER_ENVIRONMENT

    특정 기기, 계정 또는 설정 환경에서 구매할 수 없는 상품일 때 발생해요.


    APP_MARKET_VERIFICATION_FAILED

    사용자가 결제를 완료했지만, 앱스토어에서 사용자 정보 검증에 실패했을 때 발생해요. 사용자가 앱스토어에 문의해서 환불을 요청해야해요.


    TOSS_SERVER_VERIFICATION_FAILED

    사용자가 결제를 완료했지만, 서버 전송에 실패해서 결제 정보를 저장할 수 없을 때 발생해요.


    INTERNAL_ERROR

    서버 내부 문제로 요청을 처리할 수 없을 때 발생해요.


    KOREAN_ACCOUNT_ONLY

    iOS 환경에서 사용자의 계정이 한국 계정이 아닐 때 발생해요.


    USER_CANCELED

    사용자가 결제를 완료하지 않고 주문서 페이지를 이탈했을 때 발생해요.


예제 ​

특정 인앱결제 주문서 페이지로 이동하기 ​

tsx
import { IAP } from "@apps-in-toss/web-framework";
import { Button } from "@toss-design-system/mobile";
 
 interface Props {
   productId: string;
 }
 
 function IapCreateOneTimePurchaseOrderButton({ productId }: Props) {
   async function handleClick() {
    try {
      await IAP.createOneTimePurchaseOrder({
         productId,
       });
       
       console.error("인앱결제에 성공했어요");
     } catch (error) {
       console.error('인앱결제에 실패했어요:', error);
     }
   }

   return <Button onClick={handleClick}>구매하기</Button>;
 }
tsx
import { IAP } from "@apps-in-toss/framework";
import { Button } from "@toss-design-system/react-native";
 
 interface Props {
   productId: string;
 }
 
 function IapCreateOneTimePurchaseOrderButton({ productId }: Props) {
   async function handleClick() {
    try {
      await IAP.createOneTimePurchaseOrder({
         productId,
       });

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

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