@flare-engine/义工店

重新使用原生UI原始来进行应用程序购买流. 消费 @flare-engine/iap (单位:千美元)IAPContext + 键 EntitlementStore + 键 ProductCatalog(中文(简体) ) 财务报告和审定财务报表 @flare-engine/ui (面板/按钮/标签/Modal)用于渲染.

安装

bun add @flare-engine/ui-shop @flare-engine/iap @flare-engine/ui

使用量

import { useState } from 'react';
import {
  IAPContext,
  NoopIAPProvider,
  createEntitlementStore,
  createProductCatalog,
} from '@flare-engine/iap';
import { ShopScreen, PaywallModal, RestorePurchasesButton } from '@flare-engine/ui-shop';
import type { PaywallStrings, RestoreStrings, ShopPanelStrings } from '@flare-engine/ui-shop';

const catalog = createProductCatalog([
  { productId: 'game.full', grants: ['full_game'], type: 'non-consumable' },
]);
const store = createEntitlementStore(catalog);

const shopStrings: ShopPanelStrings = {
  headingKey: 'shop.heading', emptyKey: 'shop.empty',
  loadingKey: 'shop.loading', errorKey: 'shop.error',
  ownedSectionKey: 'shop.owned', availableSectionKey: 'shop.available',
};
const paywallStrings: PaywallStrings = {
  headingKey: 'pw.heading', bodyKey: 'pw.body', ctaKey: 'pw.cta',
  dismissKey: 'pw.dismiss', loadingKey: 'pw.loading', errorKey: 'pw.error',
};
const restoreStrings: RestoreStrings = {
  ctaKey: 'restore.cta', loadingKey: 'restore.loading',
  successKey: 'restore.success', emptyKey: 'restore.empty', errorKey: 'restore.error',
};

function t(key: string): string { return key; }

// Swap NoopIAPProvider for a concrete adapter (e.g. createRevenueCatProvider)
function ShopExample() {
  const [paywallOpen, setPaywallOpen] = useState(false);

  return (
    <IAPContext.Provider value={NoopIAPProvider}>
      <ShopScreen
        catalog={catalog}
        entitlementStore={store}
        copy={{ 'game.full': { titleKey: 'p.full.title', descriptionKey: 'p.full.desc', ctaKey: 'p.full.cta', ownedLabelKey: 'p.full.owned' } }}
        strings={shopStrings}
        localize={t}
        onPurchase={(id, result) => console.log(id, result.status)}
      />

      <PaywallModal
        visible={paywallOpen}
        productId="game.full"
        entitlementStore={store}
        strings={paywallStrings}
        localize={t}
        onDismiss={() => setPaywallOpen(false)}
        onPurchased={(result) => console.log('purchased', result)}
      />

      <RestorePurchasesButton
        entitlementStore={store}
        strings={restoreStrings}
        localize={t}
        onComplete={(results) => console.log('restored', results.length)}
      />
    </IAPContext.Provider>
  );
}

测试

此包装入 react-native (直接和通过) @flare-engine/ui因此导入到下面 bun test 需要四个 mock.module 说明的根 在包子测试下测试ui和ui-shop。 。 。 .