@apps-in-toss/web-bridge 1.11.2 → 1.12.0

package/dist/index.cjs

@@ -406,6 +406,84 @@ var IAP = {
     });
     return unregisterCallbacks;
   },
+  /**
+   * @public
+   * @category 인앱결제
+   * @name createSubscriptionPurchaseOrder
+   * @description
+   * 구독 인앱결제 주문서 페이지로 이동해요. 사용자가 구독 상품 구매 버튼을 누르는 상황 등에 사용할 수 있어요.
+   * @param {CreateSubscriptionPurchaseOrderOptions} params - 구독 인앱결제를 생성할 때 필요한 정보예요.
+   * @returns {() => void} 앱브릿지 cleanup 함수를 반환해요. 인앱결제 기능이 끝나면 반드시 이 함수를 호출해서 리소스를 해제해야 해요.
+   *
+   * ```tsx
+   * import { IAP } from "@apps-in-toss/web-framework";
+   * import { useCallback } from "react";
+   *
+   * interface Props {
+   *   sku: string;
+   *   offerId?: string;
+   * }
+   *
+   * function SubscriptionPurchaseButton({ sku, offerId }: Props) {
+   *   const handleClick = useCallback(async () => {
+   *     const cleanup = IAP.createSubscriptionPurchaseOrder({
+   *       options: {
+   *         sku,
+   *         offerId,
+   *         processProductGrant: ({ orderId, subscriptionId }) => {
+   *           // 상품 지급 로직 작성
+   *           return true; // 상품 지급 여부
+   *         },
+   *       },
+   *       onEvent: (event) => {
+   *         console.log(event);
+   *         cleanup();
+   *       },
+   *       onError: (error) => {
+   *         console.error(error);
+   *         cleanup();
+   *       },
+   *     });
+   *   }, [sku, offerId]);
+   *
+   *   return <button onClick={handleClick}>구독하기</button>;
+   * }
+   * ```
+   */
+  createSubscriptionPurchaseOrder: (params) => {
+    const isSupported = isMinVersionSupported({
+      android: "5.248.0",
+      ios: "5.249.0"
+    });
+    const noop = () => {
+    };
+    if (!isSupported) {
+      return noop;
+    }
+    const { options, onEvent, onError } = params;
+    const { sku, offerId, processProductGrant: handleProcessProductGrant } = options;
+    const unregisterCallbacks = createEventBridge("requestSubscriptionPurchase")({
+      options: { sku, offerId: offerId ?? null },
+      onEvent: async (event) => {
+        if (event.type === "purchased") {
+          const isProductGranted = await handleProcessProductGrant({
+            orderId: event.data.orderId,
+            subscriptionId: event.data.subscriptionId
+          });
+          await processProductGrant({
+            orderId: event.data.orderId,
+            isProductGranted
+          }).catch(onError);
+        } else {
+          onEvent(event);
+        }
+      },
+      onError: (error) => {
+        onError(error);
+      }
+    });
+    return unregisterCallbacks;
+  },
   /**
    * @public
    * @category 인앱결제

package/dist/index.d.cts

@@ -116,10 +116,21 @@ interface IapCreateOneTimePurchaseOrderResult {
     fraction: number;
     miniAppIconUrl: string | null;
 }
+/**
+ * @public
+ * @category 인앱결제
+ * @name IapCreateSubscriptionPurchaseOrderResult
+ * @description 구독 인앱결제가 완료되면 결제 세부 정보와 상품 정보를 담아 반환해요. `IapCreateOneTimePurchaseOrderResult`와 동일한 구조예요.
+ */
+type IapCreateSubscriptionPurchaseOrderResult = IapCreateOneTimePurchaseOrderResult;
 interface SuccessEvent {
     type: 'success';
     data: IapCreateOneTimePurchaseOrderResult;
 }
+interface SubscriptionSuccessEvent {
+    type: 'success';
+    data: IapCreateSubscriptionPurchaseOrderResult;
+}
 /**
  * @public
  * @category 인앱결제
@@ -142,21 +153,85 @@ interface IapCreateOneTimePurchaseOrderOptions {
 /**
  * @public
  * @category 인앱결제
- * @name IapProductListItem
- * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
- * @property {string} sku - 상품의 고유 ID예요. [IAP.createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html)를 호출할때 사용하는 `productId`와 동일한 값이에요.
- * @property {string} displayName - 화면에 표시할 상품 이름이에요. 상품 이름은 앱인토스 콘솔에서 설정한 값이에요.
- * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
- * @property {string} iconUrl - 상품 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요.
- * @property {string} description - 상품에 대한 설명이에요. 설명은 앱인토스 콘솔에서 설정한 값이에요.
+ * @name CreateSubscriptionPurchaseOrderOptions
+ * @description 구독 인앱결제를 생성할 때 필요한 옵션이에요.
+ * @property {object} options - 결제할 구독 상품의 정보예요.
+ * @property {string} options.sku - 주문할 구독 상품의 고유 ID예요.
+ * @property {string | null} [options.offerId] - 적용할 offer ID예요. 없으면 기본 가격이 적용돼요.
+ * @property {(params: { orderId: string, subscriptionId?: string }) => boolean | Promise<boolean>} options.processProductGrant - 주문이 만들어진 뒤 실제로 상품을 지급할 때 호출해요.
+ * @property {(event: SubscriptionSuccessEvent) => void | Promise<void>} onEvent - 결제가 성공했을 때 호출해요.
+ * @property {(error: unknown) => void | Promise<void>} onError - 결제 과정에서 에러가 발생했을 때 호출해요.
  */
-interface IapProductListItem {
+interface CreateSubscriptionPurchaseOrderOptions {
+    options: {
+        sku: string;
+        offerId?: string | null;
+        processProductGrant: (params: {
+            orderId: string;
+            subscriptionId?: string;
+        }) => boolean | Promise<boolean>;
+    };
+    onEvent: (event: SubscriptionSuccessEvent) => void | Promise<void>;
+    onError: (error: unknown) => void | Promise<void>;
+}
+interface BasicProductListItem {
     sku: string;
     displayAmount: string;
     displayName: string;
     iconUrl: string;
     description: string;
 }
+type Offer = {
+    type: 'FREE_TRIAL';
+    offerId: string;
+    period: string;
+} | {
+    type: 'NEW_SUBSCRIPTION';
+    offerId: string;
+    period: string;
+    displayAmount: string;
+} | {
+    type: 'RETURNING';
+    offerId: string;
+    period: string;
+    displayAmount: string;
+};
+/**
+ * @public
+ * @category 인앱결제
+ * @name ConsumableProductListItem
+ * @description 소모품 상품 정보를 담은 객체예요.
+ */
+interface ConsumableProductListItem extends BasicProductListItem {
+    type: 'CONSUMABLE';
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name NonConsumableProductListItem
+ * @description 비소모품 상품 정보를 담은 객체예요.
+ */
+interface NonConsumableProductListItem extends BasicProductListItem {
+    type: 'NON_CONSUMABLE';
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name SubscriptionProductListItem
+ * @description 자동 갱신 구독 상품 정보를 담은 객체예요.
+ */
+interface SubscriptionProductListItem extends BasicProductListItem {
+    type: 'SUBSCRIPTION';
+    renewalCycle: 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+    offers?: Offer[];
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name IapProductListItem
+ * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
+ */
+type IapProductListItem = ConsumableProductListItem | NonConsumableProductListItem | SubscriptionProductListItem;
 /**
  * @public
  * @category 인앱결제
@@ -214,6 +289,51 @@ declare const IAP: {
      * @throw {code: "PRODUCT_NOT_GRANTED_BY_PARTNER"} - 파트너사의 상품 지급이 실패했을 때 발생해요.
      */
     createOneTimePurchaseOrder: (params: IapCreateOneTimePurchaseOrderOptions) => () => void;
+    /**
+     * @public
+     * @category 인앱결제
+     * @name createSubscriptionPurchaseOrder
+     * @description
+     * 구독 인앱결제 주문서 페이지로 이동해요. 사용자가 구독 상품 구매 버튼을 누르는 상황 등에 사용할 수 있어요.
+     * @param {CreateSubscriptionPurchaseOrderOptions} params - 구독 인앱결제를 생성할 때 필요한 정보예요.
+     * @returns {() => void} 앱브릿지 cleanup 함수를 반환해요. 인앱결제 기능이 끝나면 반드시 이 함수를 호출해서 리소스를 해제해야 해요.
+     *
+     * ```tsx
+     * import { IAP } from "@apps-in-toss/web-framework";
+     * import { useCallback } from "react";
+     *
+     * interface Props {
+     *   sku: string;
+     *   offerId?: string;
+     * }
+     *
+     * function SubscriptionPurchaseButton({ sku, offerId }: Props) {
+     *   const handleClick = useCallback(async () => {
+     *     const cleanup = IAP.createSubscriptionPurchaseOrder({
+     *       options: {
+     *         sku,
+     *         offerId,
+     *         processProductGrant: ({ orderId, subscriptionId }) => {
+     *           // 상품 지급 로직 작성
+     *           return true; // 상품 지급 여부
+     *         },
+     *       },
+     *       onEvent: (event) => {
+     *         console.log(event);
+     *         cleanup();
+     *       },
+     *       onError: (error) => {
+     *         console.error(error);
+     *         cleanup();
+     *       },
+     *     });
+     *   }, [sku, offerId]);
+     *
+     *   return <button onClick={handleClick}>구독하기</button>;
+     * }
+     * ```
+     */
+    createSubscriptionPurchaseOrder: (params: CreateSubscriptionPurchaseOrderOptions) => () => void;
     /**
      * @public
      * @category 인앱결제
@@ -906,4 +1026,4 @@ declare const getServerTime: (() => Promise<number | undefined>) & {
     isSupported: () => boolean;
 };
 
-export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };
+export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, type ConsumableProductListItem, type CreateSubscriptionPurchaseOrderOptions, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, type NonConsumableProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type SubscriptionProductListItem, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };

package/dist/index.d.ts

@@ -116,10 +116,21 @@ interface IapCreateOneTimePurchaseOrderResult {
     fraction: number;
     miniAppIconUrl: string | null;
 }
+/**
+ * @public
+ * @category 인앱결제
+ * @name IapCreateSubscriptionPurchaseOrderResult
+ * @description 구독 인앱결제가 완료되면 결제 세부 정보와 상품 정보를 담아 반환해요. `IapCreateOneTimePurchaseOrderResult`와 동일한 구조예요.
+ */
+type IapCreateSubscriptionPurchaseOrderResult = IapCreateOneTimePurchaseOrderResult;
 interface SuccessEvent {
     type: 'success';
     data: IapCreateOneTimePurchaseOrderResult;
 }
+interface SubscriptionSuccessEvent {
+    type: 'success';
+    data: IapCreateSubscriptionPurchaseOrderResult;
+}
 /**
  * @public
  * @category 인앱결제
@@ -142,21 +153,85 @@ interface IapCreateOneTimePurchaseOrderOptions {
 /**
  * @public
  * @category 인앱결제
- * @name IapProductListItem
- * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
- * @property {string} sku - 상품의 고유 ID예요. [IAP.createOneTimePurchaseOrder](https://developers-apps-in-toss.toss.im/bedrock/reference/framework/%EC%9D%B8%EC%95%B1%20%EA%B2%B0%EC%A0%9C/createOneTimePurchaseOrder.html)를 호출할때 사용하는 `productId`와 동일한 값이에요.
- * @property {string} displayName - 화면에 표시할 상품 이름이에요. 상품 이름은 앱인토스 콘솔에서 설정한 값이에요.
- * @property {string} displayAmount - 통화 단위가 포함된 가격 정보예요. 예를 들어 `1,000원`으로 가격과 통화가 함께 표시돼요.
- * @property {string} iconUrl - 상품 아이콘 이미지의 URL이에요. 아이콘은 앱인토스 콘솔에서 설정한 이미지예요.
- * @property {string} description - 상품에 대한 설명이에요. 설명은 앱인토스 콘솔에서 설정한 값이에요.
+ * @name CreateSubscriptionPurchaseOrderOptions
+ * @description 구독 인앱결제를 생성할 때 필요한 옵션이에요.
+ * @property {object} options - 결제할 구독 상품의 정보예요.
+ * @property {string} options.sku - 주문할 구독 상품의 고유 ID예요.
+ * @property {string | null} [options.offerId] - 적용할 offer ID예요. 없으면 기본 가격이 적용돼요.
+ * @property {(params: { orderId: string, subscriptionId?: string }) => boolean | Promise<boolean>} options.processProductGrant - 주문이 만들어진 뒤 실제로 상품을 지급할 때 호출해요.
+ * @property {(event: SubscriptionSuccessEvent) => void | Promise<void>} onEvent - 결제가 성공했을 때 호출해요.
+ * @property {(error: unknown) => void | Promise<void>} onError - 결제 과정에서 에러가 발생했을 때 호출해요.
  */
-interface IapProductListItem {
+interface CreateSubscriptionPurchaseOrderOptions {
+    options: {
+        sku: string;
+        offerId?: string | null;
+        processProductGrant: (params: {
+            orderId: string;
+            subscriptionId?: string;
+        }) => boolean | Promise<boolean>;
+    };
+    onEvent: (event: SubscriptionSuccessEvent) => void | Promise<void>;
+    onError: (error: unknown) => void | Promise<void>;
+}
+interface BasicProductListItem {
     sku: string;
     displayAmount: string;
     displayName: string;
     iconUrl: string;
     description: string;
 }
+type Offer = {
+    type: 'FREE_TRIAL';
+    offerId: string;
+    period: string;
+} | {
+    type: 'NEW_SUBSCRIPTION';
+    offerId: string;
+    period: string;
+    displayAmount: string;
+} | {
+    type: 'RETURNING';
+    offerId: string;
+    period: string;
+    displayAmount: string;
+};
+/**
+ * @public
+ * @category 인앱결제
+ * @name ConsumableProductListItem
+ * @description 소모품 상품 정보를 담은 객체예요.
+ */
+interface ConsumableProductListItem extends BasicProductListItem {
+    type: 'CONSUMABLE';
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name NonConsumableProductListItem
+ * @description 비소모품 상품 정보를 담은 객체예요.
+ */
+interface NonConsumableProductListItem extends BasicProductListItem {
+    type: 'NON_CONSUMABLE';
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name SubscriptionProductListItem
+ * @description 자동 갱신 구독 상품 정보를 담은 객체예요.
+ */
+interface SubscriptionProductListItem extends BasicProductListItem {
+    type: 'SUBSCRIPTION';
+    renewalCycle: 'WEEKLY' | 'MONTHLY' | 'YEARLY';
+    offers?: Offer[];
+}
+/**
+ * @public
+ * @category 인앱결제
+ * @name IapProductListItem
+ * @description 인앱결제로 구매할 수 있는 상품 하나의 정보를 담은 객체예요. 상품 목록을 화면에 표시할 때 사용해요.
+ */
+type IapProductListItem = ConsumableProductListItem | NonConsumableProductListItem | SubscriptionProductListItem;
 /**
  * @public
  * @category 인앱결제
@@ -214,6 +289,51 @@ declare const IAP: {
      * @throw {code: "PRODUCT_NOT_GRANTED_BY_PARTNER"} - 파트너사의 상품 지급이 실패했을 때 발생해요.
      */
     createOneTimePurchaseOrder: (params: IapCreateOneTimePurchaseOrderOptions) => () => void;
+    /**
+     * @public
+     * @category 인앱결제
+     * @name createSubscriptionPurchaseOrder
+     * @description
+     * 구독 인앱결제 주문서 페이지로 이동해요. 사용자가 구독 상품 구매 버튼을 누르는 상황 등에 사용할 수 있어요.
+     * @param {CreateSubscriptionPurchaseOrderOptions} params - 구독 인앱결제를 생성할 때 필요한 정보예요.
+     * @returns {() => void} 앱브릿지 cleanup 함수를 반환해요. 인앱결제 기능이 끝나면 반드시 이 함수를 호출해서 리소스를 해제해야 해요.
+     *
+     * ```tsx
+     * import { IAP } from "@apps-in-toss/web-framework";
+     * import { useCallback } from "react";
+     *
+     * interface Props {
+     *   sku: string;
+     *   offerId?: string;
+     * }
+     *
+     * function SubscriptionPurchaseButton({ sku, offerId }: Props) {
+     *   const handleClick = useCallback(async () => {
+     *     const cleanup = IAP.createSubscriptionPurchaseOrder({
+     *       options: {
+     *         sku,
+     *         offerId,
+     *         processProductGrant: ({ orderId, subscriptionId }) => {
+     *           // 상품 지급 로직 작성
+     *           return true; // 상품 지급 여부
+     *         },
+     *       },
+     *       onEvent: (event) => {
+     *         console.log(event);
+     *         cleanup();
+     *       },
+     *       onError: (error) => {
+     *         console.error(error);
+     *         cleanup();
+     *       },
+     *     });
+     *   }, [sku, offerId]);
+     *
+     *   return <button onClick={handleClick}>구독하기</button>;
+     * }
+     * ```
+     */
+    createSubscriptionPurchaseOrder: (params: CreateSubscriptionPurchaseOrderOptions) => () => void;
     /**
      * @public
      * @category 인앱결제
@@ -906,4 +1026,4 @@ declare const getServerTime: (() => Promise<number | undefined>) & {
     isSupported: () => boolean;
 };
 
-export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };
+export { type AddAccessoryButtonOptions, type AppsInTossEvent, type AppsInTossGlobals, type CompletedOrRefundedOrdersResult, type ConsumableProductListItem, type CreateSubscriptionPurchaseOrderOptions, GoogleAdMob, type GraniteEvent, IAP, type IapCreateOneTimePurchaseOrderOptions, type IapProductListItem, type NonConsumableProductListItem, SafeAreaInsets$1 as SafeAreaInsets, Storage, type SubscriptionProductListItem, type TdsEvent, TossAds, type AttachBannerOptions as TossAdsAttachBannerOptions, type AttachBannerResult as TossAdsAttachBannerResult, type AttachOptions as TossAdsAttachOptions, type BannerSlotCallbacks as TossAdsBannerSlotCallbacks, type BannerSlotErrorPayload as TossAdsBannerSlotErrorPayload, type BannerSlotEventPayload as TossAdsBannerSlotEventPayload, type InitializeOptions as TossAdsInitializeOptions, appsInTossEvent, env, fetchAlbumPhotos, fetchContacts, getAppsInTossGlobals, getClipboardText, getCurrentLocation, getSafeAreaInsets, getServerTime, graniteEvent, isMinVersionSupported, loadFullScreenAd, openCamera, partner, setClipboardText, showFullScreenAd, startUpdateLocation, tdsEvent };

package/dist/index.js

@@ -355,6 +355,84 @@ var IAP = {
     });
     return unregisterCallbacks;
   },
+  /**
+   * @public
+   * @category 인앱결제
+   * @name createSubscriptionPurchaseOrder
+   * @description
+   * 구독 인앱결제 주문서 페이지로 이동해요. 사용자가 구독 상품 구매 버튼을 누르는 상황 등에 사용할 수 있어요.
+   * @param {CreateSubscriptionPurchaseOrderOptions} params - 구독 인앱결제를 생성할 때 필요한 정보예요.
+   * @returns {() => void} 앱브릿지 cleanup 함수를 반환해요. 인앱결제 기능이 끝나면 반드시 이 함수를 호출해서 리소스를 해제해야 해요.
+   *
+   * ```tsx
+   * import { IAP } from "@apps-in-toss/web-framework";
+   * import { useCallback } from "react";
+   *
+   * interface Props {
+   *   sku: string;
+   *   offerId?: string;
+   * }
+   *
+   * function SubscriptionPurchaseButton({ sku, offerId }: Props) {
+   *   const handleClick = useCallback(async () => {
+   *     const cleanup = IAP.createSubscriptionPurchaseOrder({
+   *       options: {
+   *         sku,
+   *         offerId,
+   *         processProductGrant: ({ orderId, subscriptionId }) => {
+   *           // 상품 지급 로직 작성
+   *           return true; // 상품 지급 여부
+   *         },
+   *       },
+   *       onEvent: (event) => {
+   *         console.log(event);
+   *         cleanup();
+   *       },
+   *       onError: (error) => {
+   *         console.error(error);
+   *         cleanup();
+   *       },
+   *     });
+   *   }, [sku, offerId]);
+   *
+   *   return <button onClick={handleClick}>구독하기</button>;
+   * }
+   * ```
+   */
+  createSubscriptionPurchaseOrder: (params) => {
+    const isSupported = isMinVersionSupported({
+      android: "5.248.0",
+      ios: "5.249.0"
+    });
+    const noop = () => {
+    };
+    if (!isSupported) {
+      return noop;
+    }
+    const { options, onEvent, onError } = params;
+    const { sku, offerId, processProductGrant: handleProcessProductGrant } = options;
+    const unregisterCallbacks = createEventBridge("requestSubscriptionPurchase")({
+      options: { sku, offerId: offerId ?? null },
+      onEvent: async (event) => {
+        if (event.type === "purchased") {
+          const isProductGranted = await handleProcessProductGrant({
+            orderId: event.data.orderId,
+            subscriptionId: event.data.subscriptionId
+          });
+          await processProductGrant({
+            orderId: event.data.orderId,
+            isProductGranted
+          }).catch(onError);
+        } else {
+          onEvent(event);
+        }
+      },
+      onError: (error) => {
+        onError(error);
+      }
+    });
+    return unregisterCallbacks;
+  },
   /**
    * @public
    * @category 인앱결제

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apps-in-toss/web-bridge",
   "type": "module",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Web Bridge for Apps In Toss",
   "scripts": {
     "typecheck": "tsc --noEmit",
@@ -27,11 +27,11 @@
     "dist"
   ],
   "dependencies": {
-    "@apps-in-toss/types": "1.11.2"
+    "@apps-in-toss/types": "1.12.0"
   },
   "devDependencies": {
-    "@apps-in-toss/bridge-core": "1.11.2",
-    "@apps-in-toss/native-modules": "^1.11.2",
+    "@apps-in-toss/bridge-core": "1.12.0",
+    "@apps-in-toss/native-modules": "^1.12.0",
     "@swc/core": "^1.12.7",
     "picocolors": "^1.1.1",
     "ts-morph": "^26.0.0",