# @dwolla/react-drop-ins 中文文档

规范地址：https://npmcn.com/package/%40dwolla/react-drop-ins/

版本：1\.2\.0
npm 元数据更新时间：2026-04-27T15:35:16.068Z
中文译文更新时间：2026-11-13T01:39:59.118Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40dwolla/react-drop-ins
原文对照：https://npmcn.com/package/%40dwolla/react-drop-ins/?lang=original
项目主页：https://github.com/Dwolla/react-drop-ins
源码仓库：https://github.com/Dwolla/react-drop-ins

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

- 包体积（解压后）：59.3 kB，50 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2023-03-21T21:19:48.845Z
- 最新版本发布：2026-04-27T15:35:15.925Z
- 近 30 天下载量：4231（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 1 个）

## 中文简介

Dwolla 滴入组件的反应绑定

## 安装

```sh
npm install @dwolla/react-drop-ins
```

也可以使用：`pnpm add @dwolla/react-drop-ins`、`yarn add @dwolla/react-drop-ins`、`bun add @dwolla/react-drop-ins`

## README

# 反应- 滴入 [![npm version](https://badge.fury.io/js/@dwolla%2Freact-drop-ins.svg)](https://badge.fury.io/js/@dwolla%2Freact-drop-ins)

Dwolla 的反应绑定 [滴入组件](https://developers.dwolla.com/concepts/drop-in-components)。这个库提供了用于导入 `dwolla-web.js` 库和一组用于使用滴入组件的 React 组件.

## 目录

-   [安装](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-installation)
-   [实例](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-examples)
    -   [故事书](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-storybook)
-   [使用量](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-usage)
-   [更改日志](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-changelog)
-   [社区](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-community)
-   [额外资源](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-additional-resources)

## 安装

```shell
# using npm
$ npm i @dwolla/react-drop-ins

# using yarn
$ yarn add @dwolla/react-drop-ins

# using pnpm
$ pnpm add @dwolla/react-drop-ins
```

## 实例

一个实例 React 组件, 演示如何使用库和 `DwollaCustomerCreate` 组件可见于 [实例](https://github.com/Dwolla/react-drop-ins/tree/main/src/examples) 目录.

### [故事书](https://dwolla.github.io/react-drop-ins/)

查看所有组件的活演示 。 切换到 `Docs` 选项卡并单击 `Show code` 查看每个组件的执行代码.

## 使用量

要使用此软件包, 您首先需要设置您的应用程序才能给 Dwolla API 打电话 。 你可以用我们的一个 [SDKs 软件](https://developers.dwolla.com/sdks-tools) 用你喜欢的语言快速起起跑.

然后您需要设置一个服务器端点来生成客户端符 。 你可以通过遵循步骤来做到这一点 [生成客户端](https://developers.dwolla.com/guides/drop-ins/generate-client-token) 向导.

你现在可以开始使用包裹了!

为此项创建配置对象 `useDwollaWeb` 钩子,如下代码示例所示。 此钩将导入 `dwolla-web.js` 库并处理导入时可能出现的任何错误.

_勾钩配置选项的完整列表可见于 [图表](https://npmcn.com/package/%40dwolla/react-drop-ins/#readme-configuration-options-for-usedwollaweb) 见下文._

```typescript
// Import the useDwollaWeb hook and the DwollaCustomerCreate component
import { DwollaCustomerCreate, useDwollaWeb } from '@dwolla/react-drop-ins';
import type { DwollaWebOptions } from '@dwolla/react-drop-ins';

// Create configuration for the useDwollaWeb hook
const config: DwollaWebOptions = {
environment: 'sandbox',
onError: function error() {
    console.log('Error');
},
onSuccess: function success() {
    console.log('Success');
},
tokenUrl: '/yourTokenUrl'
};

const App = () => {
  // Initialize the useDwollaWeb hook
  const { ready, error } = useDwollaWeb(config);

  // Wait for the hook to be ready
  if (!ready) return <div>Loading...</div>;

  // Handle errors
  if (error) return <div>Error</div>;

  // Render the DwollaCustomerCreate component when ready
  return (
    <>
      <DwollaCustomerCreate />
    </>
  );
};

export default App;
```

### 配置选项 `useDwollaWeb`

| 参数 | 类型 | 需要吗? | 说明 |
| --- | --- | --- | --- |
| 环境 | 字符串 | 对 | 可接受值为: `sandbox` 或者说 `production` |
| 样式 | 字符串 | 没有 | 可选的 连接到包含组件样式的主机样式表的相对或绝对 URL . |
| 符号 | 函数 | 有条件 | 函数被组件调用来获取整个流程中所需的客户端.  
示例用法: `token: (req) => Promise.resolve(dwollaAPIToken(req, {blah: "abcd"}))`  
如果 `tokenUrl` 已使用. |
| 符号Url | 函数 | 有条件 | URL指向服务器侧端点,可用于生成客户端-token.  
示例用法: `tokenUrl: "tokenUrl"`。 。 。 .  
如果 `token` 已使用. |
| 成功 | 函数 | 没有 | 应构成部分成功请求调用的职能. |
| 错误 | 函数 | 没有 | 当组件发生错误时调用函数 . |

**说明:** 你也可以用这个 `token` 或者说 `tokenUrl` 在生成客户端符号的配置选项中,但不同时使用。 看看这个 [符号Url 相对于符号配置](https://developers.dwolla.com/guides/drop-ins/generate-client-token#token-url-vs-token-configuration) 关于两者之间差异的更多信息.

## 更改日志

-   **1.2.0 (中文(简体) )** 更新了 Dwolla Web 到 v3.0.0. **断开 :** `<DwollaCustomerCreate>` 与 `type="receive-only"` 现在需要 `privacy` 财务报告和审定财务报表 `terms` 道具(服务条件和隐私政策).
-   **[1.1.0 国家](https://github.com/Dwolla/react-drop-ins/releases/tag/v1.1.0)** 将Dwolla Web更新为v2.2.0并添加了新的组件执行. 更多信息请参见 GitHub Releases.
-   **1.0.1 (中文(简体) )** 初始发布 React 绑定 Dwolla 滴入组件.

## 社区

-   有反馈请联系我们 [我们的论坛](https://discuss.dwolla.com/) 或通过 [创建 GitHub 问题](https://github.com/Dwolla/react-drop-ins/issues)。 。 。 .
-   如果你愿意为图书馆捐钱, [错误报告](https://github.com/Dwolla/react-drop-ins/issues) 财务报告和审定财务报表 [拖动请求](https://github.com/Dwolla/react-drop-ins/pulls) 永远感激!

## 额外资源

为了了解更多德沃拉,以及如何将我们的产品融入你的应用,请考虑访问以下的一些资源并成为我们社区的一员!

-   [德沃尔拉](https://www.dwolla.com/)
-   [Dwolla 开发者](https://developers.dwolla.com/)
-   [开发者支持论坛](https://discuss.dwolla.com/)

## 常见问题

### @dwolla/react-drop-ins 是什么？

Dwolla 滴入组件的反应绑定

### 如何安装 @dwolla/react-drop-ins？

在项目目录运行 npm install @dwolla/react-drop-ins，或使用 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 需要手动安装。

### @dwolla/react-drop-ins 支持 TypeScript 吗？

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

### @dwolla/react-drop-ins 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dwolla/react-drop-ins 可以商用吗？

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

### @dwolla/react-drop-ins 的下载量有多少？

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

### @dwolla/react-drop-ins 还在维护吗？

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