# @akinon/pz-haso 中文文档

规范地址：https://npmcn.com/package/%40akinon/pz-haso/

版本：2\.0\.165
npm 元数据更新时间：2026-11-12T07:16:15.813Z
中文译文更新时间：2026-11-12T07:22:00.512Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40akinon/pz-haso
原文对照：https://npmcn.com/package/%40akinon/pz-haso/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：19.8 kB，11 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2025-11-25T18:36:19.735Z
- 最新版本发布：2026-11-12T07:16:15.551Z
- 近 30 天下载量：13484（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：710（近 12 个月 710 个）

## 中文简介

HASAO (Hemen Al Sonra Öde / Buy Now Pay Later) 数据汇总 paketi .

## 安装

```sh
npm install @akinon/pz-haso
```

也可以使用：`pnpm add @akinon/pz-haso`、`yarn add @akinon/pz-haso`、`bun add @akinon/pz-haso`

## README

# HaSSO 支付网关扩展

HASAO (Hemen Al Sonra Öde / Buy Now Pay Later) 数据汇总 paketi .

## 安装

您可以使用以下命令安装最新插件的扩展:

```bash
npx @akinon/projectzero@latest --plugins
```

## 使用量

扩展安装后,您可以轻松地将HASO支付网关整合到您的应用程序中. 举个例子如何使用.

1.  导航到 `src/app/[commerce]/[locale]/[currency]/payment-gateway/haso/` 目录.
    
2.  创建名为的文件 `page.tsx` 并包括以下代码:
    

```tsx
import { HasoPaymentGateway } from '@akinon/pz-haso';

const HasoGateway = async ({
  searchParams: { sessionId },
  params: { currency, locale }
}: {
  searchParams: Record<string, string>;
  params: { currency: string; locale: string };
}) => {
  return (
    <HasoPaymentGateway
      sessionId={sessionId}
      currency={currency}
      locale={locale}
      extensionUrl={process.env.HASO_EXTENSION_URL}
      hashKey={process.env.HASO_HASH_KEY}
    />
  );
};

export default HasoGateway;
```

## 自定义 HASO 组件

您可以使用 `renderer` 道具 (英语). 这使得您可以为组件的不同部分提供自定义渲染功能.

### 自定义窗体组件

```tsx
import { HasoPaymentGateway } from '@akinon/pz-haso';

const HasoGateway = async ({
  searchParams: { sessionId },
  params: { currency, locale }
}: {
  searchParams: Record<string, string>;
  params: { currency: string; locale: string };
}) => {
  return (
    <HasoPaymentGateway
      sessionId={sessionId}
      currency={currency}
      locale={locale}
      extensionUrl={process.env.HASO_EXTENSION_URL}
      hashKey={process.env.HASO_HASH_KEY}
      renderer={{
        formComponent: {
          renderForm: ({
            extensionUrl,
            sessionId,
            context,
            csrfToken,
            autoSubmit
          }) => (
            <div className="custom-haso-form-wrapper">
              <h3 className="text-lg font-semibold mb-4">HASO Ödeme</h3>
              <p className="mb-4">
                HASO ödeme sayfasına yönlendiriliyorsunuz...
              </p>
              <form
                action={`${extensionUrl}/form-page/?sessionId=${sessionId}`}
                method="post"
                encType="multipart/form-data"
                id="haso-custom-form"
                className="hidden"
              >
                <input type="hidden" name="csrf_token" value={csrfToken} />
                <input
                  type="hidden"
                  name="data"
                  value={JSON.stringify(context)}
                />
                {autoSubmit && (
                  <script
                    dangerouslySetInnerHTML={{
                      __html:
                        "document.getElementById('haso-custom-form').submit()"
                    }}
                  />
                )}
              </form>
              <div className="loader w-12 h-12 border-4 border-t-4 border-gray-200 border-t-blue-500 rounded-full animate-spin"></div>
            </div>
          )
        },
        paymentGateway: {
          renderContainer: ({ children }) => (
            <div className="p-8 max-w-lg mx-auto bg-white rounded-lg shadow-md">
              {children}
            </div>
          )
        }
      }}
    />
  );
};

export default HasoGateway;
```

## 自定义渲染器 API

渲染器道具接受一个具有下列结构的物体:

```typescript
interface HasoRendererProps {
  formComponent?: {
    renderForm?: (props: {
      extensionUrl: string;
      sessionId: string;
      context: any;
      csrfToken: string;
      autoSubmit: boolean;
    }) => React.ReactNode;
    renderLoading?: () => React.ReactNode;
    renderError?: (error: string) => React.ReactNode;
  };
  paymentGateway?: {
    renderContainer?: (props: { children: React.ReactNode }) => React.ReactNode;
  };
}
```

## 配置

将这些变量添加到您的 `.env` 文件 :

```env
HASO_EXTENSION_URL=<your_extension_url>
HASO_HASH_KEY=<your_hash_key>
```

## 数据汇总流程

本套件执行HASO付款的数据汇总模式:

```
1. start-session → redirectUrl: /payment-gateway/haso/?sessionId=XXX
2. HasoPaymentGateway → Collects data (preOrder, addresses, basket)
3. FormComponent → POST → Extension /form-page/?sessionId=XXX (with SHA-512 hash)
4. Extension → Creates Provider URL → Payment screen
5. Payment completed → return-url → Merchant Store
```

### 已收集数据

该软件包从取出时收集以下数据:

-   **顺序项目**:产品名称、SKU、数量、单价、总额
-   **账单地址**:城市、国家、名称、地址线、电话、电子邮件、邮政编码
-   **航运地址**:城市、国家、名称、地址线、电话、电子邮件、邮政编码
-   **客户信息**: 姓名、电话、电子邮件、身份号码
-   **数额**: 总额、运费、货币

### 警卫

所有数据都用SHA-512散列发送以进行验证:

-   使用 : `salt | sessionId | hashKey`
-   扩展处理前验证散列

## API 路由

### 检查可用性 API

要进行HASO支付可用性检查, 您需要创建 API 路径 。 创建文件于 `src/app/api/haso-check-availability/route.ts` 内容如下:

```typescript
import { POST } from '@akinon/pz-haso/src/pages/api/check-availability';

export { POST };
```

API 端点处理检查 HASO 给定的付款的可用性 :

-   电话号码
-   顺序金额
-   电子邮件( 可选)
-   身份号码( 可选)

端点使用散列式安全措施自动验证请求和响应.

### 使用检查HasoAvailable 突变

扩展提供了Redux突变钩,您可以用来检查HASO支付可用性. 以下是如何执行的一个例子:

```typescript
import { useCheckHasoAvailabilityMutation } from '@akinon/pz-haso';

const YourComponent = () => {
  const [checkHasoAvailability] = useCheckHasoAvailabilityMutation();
  const [isHasoAvailable, setIsHasoAvailable] = useState(false);

  useEffect(() => {
    const checkAvailability = async () => {
      try {
        const response = await checkHasoAvailability({
          amount: '1000.00',
          phone: '+905551234567',
          email: 'customer@example.com',
          identity_number: '12345678901' // TC Kimlik No (optional)
        }).unwrap();

        setIsHasoAvailable(response.is_available);
      } catch (error) {
        console.error('Error checking HASO availability:', error);
        setIsHasoAvailable(false);
      }
    };

    checkAvailability();
  }, [checkHasoAvailability]);

  return (
    // Your component JSX
  );
};
```

变异返回具有以下属性的对象:

-   `is_available`:布尔表示是否可用 HASO 付款
-   `limit`: 数字表示可用的信用限额(可选)
-   `salt`: 用于散列校验的字符串
-   `hash`: 用于响应验证的字符串

## 常见问题

### @akinon/pz-haso 是什么？

HASAO \(Hemen Al Sonra Öde / Buy Now Pay Later\) 数据汇总 paketi \.

### 如何安装 @akinon/pz-haso？

在项目目录运行 npm install @akinon/pz-haso，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @akinon/pz-haso 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/akinon\_\_pz-haso 是否存在。

### @akinon/pz-haso 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @akinon/pz-haso 可以商用吗？

@akinon/pz-haso 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @akinon/pz-haso 的下载量有多少？

根据 npm 官方下载统计，@akinon/pz-haso 在 2026/10/06 – 2026/11/04 这 30 天内被下载 13,484 次，日均约 449 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @akinon/pz-haso 还在维护吗？

最新版本 2\.0\.165 发布于 2026/11/12（今天）；至今共发布 710 个版本，其中过去 12 个月发布了 710 个；首次发布于 2025/11/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。