# @artaio/arta-browser 中文文档

规范地址：https://npmcn.com/package/%40artaio/arta-browser/

版本：2\.23\.2
npm 元数据更新时间：2026-11-02T15:42:46.136Z
中文译文更新时间：2026-11-06T20:36:10.342Z
软件包许可：ISC

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

原始 npm 页面：https://www.npmjs.com/package/%40artaio/arta-browser
原文对照：https://npmcn.com/package/%40artaio/arta-browser/?lang=original
项目主页：https://github.com/artaio/arta-browser#readme
源码仓库：https://github.com/artaio/arta-browser

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

- 包体积（解压后）：538 kB，140 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2023-01-10T19:36:40.705Z
- 最新版本发布：2026-10-20T22:15:53.340Z
- 近 30 天下载量：7736（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：103（近 12 个月 18 个）

## 中文简介

arta-浏览器是一款TypeScript SDK,为Arta的估算和跟踪部件以及Arta付费取出提供方便的设置.

## 安装

```sh
npm install @artaio/arta-browser
```

也可以使用：`pnpm add @artaio/arta-browser`、`yarn add @artaio/arta-browser`、`bun add @artaio/arta-browser`

## README

# 艺术浏览器

arta-浏览器是一款TypeScript SDK,为Arta的估算和跟踪部件以及Arta付费取出提供方便的设置.

-   使用 [阿尔塔估计数](https://manual.arta.io/guides/solutions/no-code/estimates/estimates-widget) 可在自己的网站上动态生成航运估计数(不可登录).
-   使用 [阿尔塔追踪](https://manual.arta.io/guides/solutions/no-code/post-sale/tracking) 方便在自己的网站上提供清晰和最新的跟踪信息.
-   使用 [阿尔塔薪酬](https://npmcn.com/package/%40artaio/arta-browser/#readme-arta-pay-checkout) 让买家支付押金 用他们的阿尔塔信贷额度来支付其余的 方式在你的退票页上.

## 安装

### 与 `<script>` 标签

在关闭前复制并粘贴以下片断 `</body>` HTML 标签, 用于用户的“ 估计” 部件( 通常在产品页面上):

```html
<script
  src="https://cdn.jsdelivr.net/npm/@artaio/arta-browser@2.23.2/dist/bundle.js"
  integrity="sha384-a9afvobPsoQi9Ygps92oxPjOQvNuZRlG1UFvnsO4V6e+wC3IqPni1HqXvayY/IgK"
  crossorigin="anonymous"
></script>
```

一旦上面的剧本装入 `Arta` 对象应该可用.

片段标出最新出版的版本并用 [分资源](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity); 版本和 `integrity` 上面的散列会在每次发行时自动更新.

### 与 `npm`

在您的项目运行中

```
npm install @artaio/arta-browser
```

然后可以导入 `Arta` 例如,对象:

```js
import Arta from '@artaio/arta-browser';
```

## 基本用途

### 估计部件

```jsx
// On page load, initialize the Arta SDK with your publishable API key
Arta.init('<YOUR_API_KEY>');

// Set up origin and object details, request preferences as well as
// your widget configuration overrides
const origin = {
  city: 'Brooklyn',
  region: 'NY',
  country: 'US',
  postal_code: '11249',
};

const objects = [
  {
    depth: 2,
    width: 36,
    height: 24,
    subtype: 'painting_unframed',
    unit_of_measurement: 'in',
    value_currency: 'USD',
    value: 500.0,
  },
];

const requestPreferences = { currency: 'EUR' };

const widgetConfig = {
  style: {
    position: 'center',
    pricingDisplay: 'range',
  },
};

// Setup an instance of the estimates widget
const estimate = Arta.estimate(
  { origin, objects, requestPreferences },
  widgetConfig
);

// Validate the widget before rendering it
await esimate.validate();

// `estimate.isReady` will be true if validations pass and false if
// they do not. You can choose to render a button to open the widget
// when the widget has been validated.
//
// `estimate.open()` will render the widget on your page.
esimate.isReady && (
  <Button onClick={() => estimate.open()}>Estimate Shipping</Button>
);

```

Arta 估计部件有许多配置选项来自定义部件的外观和感觉 。 您可以在 [/lib/估计数](https://npmcn.com/lib/estimateConfig.ts) 并查看现场演示 [手册. arta.io/ 估计数-民主](https://manual.arta.io/estimates-demo/)。 。 。 .

使用不同前端框架的额外示例请检查 [gitHub 上的艺术浏览器实例](https://github.com/artaio/arta-browser-examples)。 。 。 .

### 用于跟踪部件

```jsx
// On page load, initialize the Arta SDK with your publishable API key
Arta.init('<YOUR_API_KEY>');

// Optionally, build your Tracking widget configuration
const config = {
  animation: {
    in: {
      type: 'slide',
      duration: 500,
      easing: 'ease-in-out',
    },
    out: {
      type: 'slide',
      duration: 250,
      easing: 'ease-in-out',
    },
  },
  style: {
    color: {
      iconPrimary: 'blue',
    },
  },
};

// Setup an instance of the tracking widget
const tracking = Arta.tracking('<SHIPMENT_ID>', config);

// Validate the widget before rendering it
await tracking.validate();
// `tracking.isReady` will be true if validations pass and false if
// they do not. You can choose to render a button to open the widget
// when the widget has been validated.
//
// `tracking.open()` will render the widget on your page.
tracking.isReady && <Button onClick={() => tracking.open()}>Track</Button>;
```

Arta 跟踪部件有许多配置选项来自定义部件的外观和感觉. 您可以在 [/lib/跟踪](https://npmcn.com/lib/trackingConfig.ts)。 。 。 .

### 阿尔塔付账

Arta Pay让买主按你的订单支付押金,用他们的Arta信贷额度,在你的页面上以Arta主持的方式为其余部分融资. 它有一个服务器半页半:

1.  **您的服务器** 与您创建购买请求 **私营** API 密钥( E)`POST https://api.arta.io/purchase_requests`,加上订单金额、买方电子邮件和细列项目),然后返回 `id` 和短暂的生命 `client_token`。仅通过 `{ purchaseRequestId, clientToken }` 到页面——私人密钥永远不会离开您的服务器.
2.  **您的页面** 初始化为您的 **公开** 键并打开取出 :

```js
Arta.init('<PUBLIC_KEY>');

const checkout = Arta.pay(
  { purchaseRequestId, clientToken },
  {
    onReady: () => (payButton.disabled = false),
    onComplete: ({ purchaseRequestId, purchaseId, status }) => {
      // status: 'confirmed' | 'processing' | 'declined' — confirm server-side
    },
    onClose: ({ reason }) => {}, // 'customer' | 'complete' | 'error'
    onError: ({ code, message, recoverable }) => {},
  },
  { position: 'center' }
);

payButton.addEventListener('click', () => checkout.open());
```

部件挂载并验证购买请求, 所以 `onReady` 意思是"准备打开". `open()` 显示模式, `close()` 隐藏它(重新打开简历)和 `destroy()` 将取去. `onComplete` 当结果已知时, 点火一次; 回调是咨询的, 因此确认服务器端的命令 `GET /purchase_requests/:id`。 。 。 . `position` 接受 `'center'` (违约), `'left'`, (中文(简体) ), `'right'` 或者说 `'full_screen'`编辑 `PayCompletion`, (中文(简体) ), `PayCloseEvent` 财务报告和审定财务报表 `PayError` 从软件包中导出类型.

## 捐款

请确保提供所有实例 [github.com/artaio/arta-浏览器实例](https://github.com/artaio/arta-browser-examples) 在公关开业前还在工作.

### 发展

要开发 SDK 上的新功能, 运行 `npm install` 以安装所有依赖,然后运行 `npm run build` 编译的JS代码将存放于 `dist/` 文件夹,包含向国家预防机制发布的内容.

请注意,目前的CI设置既公布编译的JS代码,也公布捆绑版. 然后,我们使用 [https://www.jsdelivr.com/ (中文(简体) )](https://www.jsdelivr.com/) 分发存放在国家预防机制的捆绑版本.

## 常见问题

### @artaio/arta-browser 是什么？

arta-浏览器是一款TypeScript SDK,为Arta的估算和跟踪部件以及Arta付费取出提供方便的设置\.

### 如何安装 @artaio/arta-browser？

在项目目录运行 npm install @artaio/arta-browser，或使用 pnpm add / yarn add / bun add。

### @artaio/arta-browser 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @artaio/arta-browser 支持 ESM 还是 CommonJS？

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

### @artaio/arta-browser 可以商用吗？

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

### @artaio/arta-browser 的下载量有多少？

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

### @artaio/arta-browser 还在维护吗？

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