# @depay/widgets 中文文档

规范地址：https://npmcn.com/package/%40depay/widgets/

版本：13\.0\.45
npm 元数据更新时间：2026-03-29T17:59:13.959Z
中文译文更新时间：2026-11-12T00:12:19.669Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40depay/widgets
原文对照：https://npmcn.com/package/%40depay/widgets/?lang=original
项目主页：https://depay.com/
源码仓库：https://github.com/DePayFi/widgets

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

- 包体积（解压后）：35.2 MB，26 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：19 个
- peer 依赖：ethers ^5\.7\.1，react ^18，react-dom ^18
- 首次发布：2021-10-28T09:16:28.867Z
- 最新版本发布：2026-03-29T17:59:13.362Z
- 近 30 天下载量：4340（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：332（近 12 个月 7 个）

## 中文简介

密码支付直接到钱包 DePay为开发者简化了Web3集成,利用DeFi来无心接受任何象征性的尝试. 将无摩擦、实时的代号转换与为无缝用户解码而设计的可定制部件组合在一起

## 安装

```sh
npm install @depay/widgets
```

也可以使用：`pnpm add @depay/widgets`、`yarn add @depay/widgets`、`bun add @depay/widgets`

## README

# [通过 DePay 加密 Web3 支付部件](https://depay.com/)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/DePayFi/widgets/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@depay/widgets.svg?style=flat)](https://www.npmjs.com/package/@depay/widgets) [![Tests](https://github.com/depayfi/widgets/actions/workflows/cypress.yml/badge.svg)](https://github.com/DePayFi/widgets/actions)

![example](https://github.com/user-attachments/assets/afc14f09-3b53-4b22-b8e6-c3eebeb5407f)

## \* 安装

### 通过 CDN

```html
<script defer async src="https://integrate.depay.com/widgets/v13.js"></script>
```

### 通过软件包管理器( 建议)

```sh
yarn add @depay/widgets ethers react react-dom
```

或者说

```sh
npm install @depay/widgets ethers react react-dom --save
```

> \[大 如果尚未安装, 请确保安装对等依赖( 用户、 反应和 反应度) .

## 导入您的 JavaScript 文件

```javascript
import DePayWidgets from '@depay/widgets'
```

## 服务器系统渲染( SSR)

如果您使用像Next.js这样的SSSR框架,请确保只装入客户端的DePay部件.

指南 : [https://dev.to/elisabethleonhardt/如何使用 - 客户端 - 仅限包装 - 有sr-in-gatsby-和-nextjs-3pfa](https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa)

## 演示文稿

配置用户界面 : [https://app.depay.com/ 整合/新](https://app.depay.com/integrations/new)

技术演示: [https://depayfi.github.io/widgets/demo.bundle.html 互联网档案馆的存檔,存档日期2014-12-22](https://depayfi.github.io/widgets/demo.bundle.html)

## 支助

### 平台

-   伊特鲁姆虚拟机(EVM)
-   索拉纳虚拟机(SVM)

#### 平台专用包装

如果只需要特定的平台包装:

##### EVM (Ethereum虚拟机)

```sh
yarn add @depay/widgets-evm
```

或者说

```sh
npm install @depay/widgets-evm --save
```

```javascript
import DePayWidgets from '@depay/widgets-evm'
```

##### SVM (索拉纳虚拟机)

```sh
yarn add @depay/widgets-svm
```

或者说

```sh
npm install @depay/widgets-svm --save
```

```javascript
import DePayWidgets from '@depay/widgets-svm'
```

### 区块链

-   [以利亚](https://ethereum.org/)
-   [BNB 智能链](https://www.binance.org/smartChain)
-   [多边形](https://polygon.technology/)
-   [索拉纳](https://solana.com/)
-   [乐观主义](https://www.optimism.io/)
-   [坐标](https://arbitrum.io/)
-   [雪崩](https://www.avax.network/)
-   [肠道](https://gnosis.io/)
-   [基础](https://base.org/)
-   [世界链](https://world.org/world-chain)

### 钱包

DePay 支持 [大多数加密钱包](https://depay.com/wallets)。 。 。 .

## 支付部件

启用无缝钱包到钱包加密支付 .

### 使用整合标识管理整合

```javascript
DePayWidgets.Payment({
  integration: 'YOUR_INTEGRATION_ID'
})
```

管理集成配置取自app.depay.com.

> \[大 本地配置覆盖远程设置 .

> \[叹息\] 使用其中之一 `integration` (管理)或 `accept` (没有管理),从来没有两者兼有.

#### 动态后端配置的有效载荷

```javascript
DePayWidgets.Payment({
  integration: 'YOUR_INTEGRATION_ID',
  payload: { dynamicKey: 'dynamicValue' }
})
```

将有效载荷转发到您的后端进行动态支付设置, 例如 :

```json
{
  "dynamicKey": "dynamicValue"
}
```

### 未管理的配置

> \[大 未管理的配置不为服务器端动作或集成提供任何回调. 它们仅限于启动和执行付款。 如果您的整合需要回调, 请使用 [管理下的一体化](https://depay.com/docs/payments/integrate/widget)。 。 。 .

```javascript
DePayWidgets.Payment({
  accept: [{
    blockchain: 'ethereum',
    amount: 1,
    token: 'TOKEN_ADDRESS',
    receiver: 'RECEIVER_ADDRESS'
  }]
})
```

多块链支付:

```javascript
DePayWidgets.Payment({
  accept: [
    { // 20 USDT on ethereum
      blockchain: 'ethereum',
      amount: 20,
      token: '0xdac17f958d2ee523a2206206994597c13d831ec7',
      receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
    },{ // 20 BUSD on bsc
      blockchain: 'bsc',
      amount: 20,
      token: '0xe9e7cea3dedca5984780bafc599bd69add087d56',
      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'
    },{ // 20 USDC on polygon
      blockchain: 'polygon',
      amount: 20,
      token: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'
    }
  ]
});
```

### 配置选项

#### 接受

> \[叹息\] 使用其中之一 `integration` (管理)或 `accept` (没有管理),从来没有两者兼有.

```javascript
DePayWidgets.Payment({
  accept: [{
    blockchain: 'ethereum',
    amount: 1,
    token: 'TOKEN_ADDRESS',
    receiver: 'RECEIVER_ADDRESS'
  }]
})
```

`blockchain`

您想要收到付款的区块链 .

`token`

您想要收到的信物地址 .

`amount` (备选)

您想要得到的符号数量 。 需要作为人类可读数字传递,例如:. `20`。 。 。 .

这个 `BigNumber` 在计算该数额时,包括找到给定符号的正确的小数. 所以请以人类可读形式将数量传递给数字/十进制:例如. `20` 20美元或 `20.25` 包括:.

如果您不通过一个数量, 用户可以在部件中选择一个数量 .

`receiver`

接收付款的地址。 总是双重检查你设置了正确的地址.

#### 金额

##### 固定货币数额

如果您希望部件以货币固定付款金额, 请使用 `currency` 财务报告和审定财务报表 `fix`数字 :

`currency`数字 :

实例(收费5.20美元):

```
{
  amount: {
    currency: 'USD',
    fix: 5.20
  }
}
```

确保不会将任何金额转到 `accept` 如果您使用固定货币金额.

部件仍然会显示本地货币转换给用户 。 如果你想改变这个,看 `currency` 配置 .

##### 数额选择(可变更数额)

当您想要控制量选择的表现时, 请通过 `amount` 配置对象, 随同值 `start`, (中文(简体) ), `min` 财务报告和审定财务报表 `step`。 。 。 .

`start`: 最初选择的金额.

`min`: 可选择的最低数量.

`step`: 增加/减少的数额变化.

#### 收费

您可使用自己的专用收费接收地址,为每次付款配置收费.

收费将取自目标符号和目标金额(交换后,取决于您 `accept` 配置).

`amount`: 百分比(例如:. `5%`,或绝对数作为大数字符串('100000000000000000')或纯数(2.5)

`receiver`:应该收取费用的地址.

```javascript
DePayWidgets.Payment({
  accept: [
    {...

      fee: {
        amount: '3%',
        receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
      }
    }
  ],
});
```

##### 收费2

您可配置最多2笔费用,作为支付的一部分:

```javascript
DePayWidgets.Payment({
  accept: [
    {...

      fee: {...},
      fee2: {,
        amount: '5%',
        receiver: '0x08B277154218CCF3380CAE48d630DA13462E3950'
      }
    }
  ],
});
```

##### 协议Fee

向议定书支付的费用:

```javascript
DePayWidgets.Payment({
  
  protocolFee: '1.5%',
  
});
```

#### 标题

`title`

允许您更改部件的标题 :

```javascript
DePayWidgets.Payment({

  title: 'Donation'

  //...
})
```

#### 钱包

您可以排序并允许在初始钱包选择步骤中显示的(列表)钱包如下:

##### 钱包

```
{
  wallets: {
    sort: [
      'Uniswap',
      'Coinbase'
    ]
  }
}
```

这种配置将首先显示Uniswap和Coinbase,然后列出所有其他.

##### 钱包. allow

```
{
  wallets: {
    allow: [
      'Uniswap',
      'Coinbase',
      'Rainbow'
    ]
  }
}
```

此配置只显示 Uniswap 、 Coinbase 和 Rainbow 。 没有显示其他选项/ 钱包 .

#### 钱包

`wallet`

允许通过一个已经连接的钱包实例( 以跳过“ 连接钱包” 流):

```javascript
let { wallet } = DePayWidgets.Connect({})

DePayWidgets.Payment({
  
  wallet: wallet

})
```

#### 供应商

允许设置提供商, 用于给单个块链发送 RPC 调用 :

```javascript
DePayWidgets.Payment({

  providers: {
    ethereum: ['http://localhost:8545'],
    bsc: ['http://localhost:8545'],
    polygon: ['http://localhost:8545']
  }
})
```

#### 货币

允许您执行显示的本地货币( 而不是自动检测) :

```javascript

DePayWidgets.Payment({

  currency: 'USD'

})

```

#### 允许( 列表)

只允许配置的令牌符合支付条件 :

```javacript
DePayWidgets.Payment({
  
  allow: {
    ethereum: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // ETH
      '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT
      '0x6b175474e89094c44da98b954eedeac495271d0f'  // DAI
    ],
    bsc: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // BNB
      '0xe9e7cea3dedca5984780bafc599bd69add087d56', // BUSD
      '0x55d398326f99059ff775485246999027b3197955'  // BSC-USD
    ],
    polygon: [
      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // MATIC
      '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC
    ]
  }

})

```

#### 拒绝

允许拒绝代币,以免其作为支付手段:

```javacript
DePayWidgets.Payment({
  
  deny: {
    ethereum: [
      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap
      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e
      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK
    ],
    bsc: [
      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe
      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe
      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver
      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek
      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX
      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR
      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW
      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN
      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA
      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE
      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX
      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is
      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB
      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA
      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG
      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE
    ]
  }
})
```

#### 集装箱

`container`

允许您通过包含部件的容器元素 :

```javascript
DePayWidgets.Payment({
  container: document.getElementById('my-container')
})
```

确保设置 Css 值 `position: relative;` 用于容器元素。 否则无法包含部件 .

反应示例 :

```javascript
let CustomComponentWithWidget = (props)=>{
    let container = useRef()

    useEffect(()=>{
      if(container.current) {
        DePayWidgets.Payment({ ...defaultArguments, document,
          container: container.current
        })
      }
    }, [container])

    return(
      <div ref={container} style={{ position: 'relative', border: '1px solid black', width: "600px", height: "600px" }}></div>
    )
  }
```

#### 样式

`style`

允许您更改部件的样式 .

```javascript
DePayWidgets.Payment({
  style: {
    colors: {
      primary: '#ffd265',
      text: '#e1b64a',
      buttonText: '#000000',
    },
    fontFamily: '"Cardo", serif !important',
    css: `
      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {
        background: rgba(0,0,0,0.8);
      }
    `
  }
})
```

##### 颜色

`colors`

允许您设置颜色值 :

```javascript
DePayWidgets.Payment({
  
  style: {
    colors: {
      primary: '#ffd265',
      text: '#ffd265',
      buttonText: '#000000',
      icons: '#ffd265'
    }
  }
})
```

##### 颜色暗黑模式

您可以通过适用于暗模式的颜色 :

```javascript
DePayWidgets.Payment({
  
  style: {
    colorsDarkMode: {
      primary: '#000265',
      text: '#000265',
      buttonText: '#FFFFFF',
      icons: '#000265'
    }
  }
})
```

##### 字体家庭

`fontFamily`

允许您设置字体家族 :

```javascript
DePayWidgets.Payment({
  
  style: {
    fontFamily: '"Cardo", serif !important'
  }
})
```

##### 密码

`css`

允许您注射 CSS :

```javascript
DePayWidgets.Payment({
  
  style: {
    css: `
      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {
        background: rgba(0,0,0,0.8);
      }
    `
  }
})
```

###### cssDarkMode (暗号) (暗号)

允许您注射 Css 以调整暗模式 :

```javascript
DePayWidgets.Payment({
  
  style: {
    cssDarkMode: `
      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");

      .ReactDialogBackground {
        background: rgba(0,0,0,0.8);
      }
    `
  }
})
```

#### 卸载

`unmount`

允许您从外部卸载整个部件( React safe way):

```javascript
let { unmount } = await DePayWidgets.Payment({})

unmount()
```

### 客户端召回

> \[叹息\] 不推荐客户端回调和客户端流量管理. 支付流量可以涉及设备的移交(例如桌面到移动)或移动上应用的app到应用的过渡,从而打破客户端-侧控制. 如果交易失败, 部件为用户提供了一个内置方式, 以重试他们的付款, 所以您不需要自己执行此功能 。 因此,不建议只依靠客户端回调处理流程。 相反,您可以管理和控制用户流 [管理下的一体化](https://depay.com/docs/payments/integrate/widget)。 。 。 .

虽有之前的警告,该部件仍提供以下回调:

#### 在此之前

`before`

在支付交给钱包之前调用函数 .

如果此方法返回错误, 您可以停止支付 .

```javascript
DePayWidgets.Payment({

  before: async (payment, from)=> {
    alert('Something went wrong')
    return false // stops payment
  }
})
```

#### 发送

`sent`

一旦将付款发送给网络(但仍需要布雷/确认),则称为函数.

部件将将此函数称为单项交易( 见 : [脱薪网络3-钱包](https://github.com/depayfi/depay-web3-wallets#transaction) 关于结构的更详细情况)

```javascript
DePayWidgets.Payment({

  sent: (transaction)=> {
    // called when payment transaction has been sent to the network
  }
})
```

#### 成功

`succeeded`

一旦支付在网络上成功(检查客户端), 将调用此功能 .

部件将将此函数调用为单个参数( 见 : [脱薪网络3-钱包](https://github.com/depayfi/depay-web3-wallets#transaction) (详细情况)

```javascript
DePayWidgets.Payment({

  succeeded: (transaction, payment)=> {
    // called when payment transaction has been confirmed once by the network
    // might be called multiple times

    // "payment" contains information about what the user selected as payment
  }
})
```

#### 已验证

`validated`

由 DePay 验证付款后将调用此功能 .

```javascript
DePayWidgets.Payment({

  validated: (successful, transaction, payment)=> {
    // successful (true or false)

    // "payment" contains information about what the user selected as payment
  }
})
```

#### 失败

`failed`

如果区块链上的付款执行失败( 发送/ 提交后) , 将调用此功能 .

部件将将此函数调用为单个参数( 见 : [脱薪网络3-钱包](https://github.com/depayfi/depay-web3-wallets#transaction) (详细情况)

```javascript
DePayWidgets.Payment({

  failed: (transaction, error, payment)=> {
    // called when payment transaction failed on the blockchain
    // handled by the widget, no need to display anything
    // might be called multiple times

    // "payment" contains information about what the user selected as payment
  }
})
```

#### 关键事项

`critical`

如果部件扔出无法自行处理和显示的关键性内部错误,则该函数将被称为:

```javascript
DePayWidgets.Payment({
  
  critical: (error)=> {
    // render and display the error with error.toString()
  }
})
```

#### 错误

`error`

如果部件抛出非关键内部错误, 它可以并且将自行处理和显示, 则该函数将被称为 :

```javascript
DePayWidgets.Payment({

  error: (error)=> {
    // maybe do some internal tracking with error.toString()
    // no need to display anything as widget takes care of displaying the error
  }
})
```

## 连接部件

DePay Connect 允许您的用户将密码钱包连接到您的 dApp 或网站 .

已连接的回返 `account` 财务报告和审定财务报表 `wallet` 作为回报.

```javascript
let { account, wallet }  = await DePayWidgets.Connect()
```

见 [网络3 钱包](https://github.com/depayfi/web3-wallets) 关于返回的详情 `wallet`。 。 。 .

### 拒绝

1.  如果用户仅关闭对话框而不连接任何钱包, 则拒绝 :

```javascript

DePayWidgets.Connect().then(()=>{}).catch((error)=>{
  error // "USER_CLOSED_DIALOG"
})

```

## 登录部件

DePay 登录允许您轻松地进行 Web3 钱包登录 .

回返 `account` 如果在信件中成功签名并恢复日志.

```javascript
let message = "Sign to login"
let { account, wallet } = await DePayWidgets.Login({ message })
```

连接钱包并指示连接的钱包签名 `message`之后发送 `signature` 财务报告和审定财务报表 `message` 改为 `POST /login` (或 `endpoint` 如果定义:

```
POST /login
BODY
  {
    "message": "Sign to login",
    "signature": "0x123456" // raw signature
  }
```

这个 `/login` 端点需要恢复地址 `message` 财务报告和审定财务报表 `signature`。 。 。 .

例如,您的后端可以使用节点+醚.js来恢复签名

```javascript
const ethers = require('ethers')
const hashedMessage = ethers.utils.hashMessage(inputs.message)
const address = ethers.utils.recoverAddress(hashedMessage, inputs.signature)
return address
```

请将找到的地址返回部件 :

```
POST /login
RESPONSE
  "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"
```

这将解决 `DePayWidgets.Login` 请访问已解决账户:

```javascript
account // 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
```

也可以通过一个 `recover` 负责恢复签字的函数:

```javascript
DePayWidgets.Login({ message, recover: ({ message, signature })=>{
    return new Promise((resolve, reject)=>{
      fetch('https://example.com/login', {
        method: 'POST',
        body: JSON.stringify({ message, signature })
      })
        .then((response)=>{
          if(response.status == 200) {
            response.text().then((account)=>{
              resolve(account)
            }).catch(reject)
          } else {
            response.text().then((text)=>{
              reject(text || 'Recovering login signature failed!')
            }).catch(reject)
          }
        })
    })
  }
})
```

### 签名包含账户地址的信件

如果您想要在要签名的信件中包含钱包账户标识符, 请将调用函数返回字符串 `message`数字 :

```javascript
let { account } = await DePayWidgets.Login({
  message: (account)=>`Click to log in to DePay and to accept DePay's Terms of Service: https://depay.com/legal/terms\n${dateTime}\n${account}`
})
console.log("Logged in via signature", account)
```

### 拒绝

1.  如果用户仅关闭对话框而不连接任何钱包, 则拒绝 :

```javascript

DePayWidgets.Login().then(()=>{}).catch((error)=>{
  error // "USER_CLOSED_DIALOG"
})

```

## 选择部件

DePay 选择部件允许您打开一个对话框, 允许您选择像符号之类的东西 .

### 选择鼠标

决定由用户选择什么 .

```javascript
let token = await DePayWidgets.Select({ what: 'token' })

// {
//   address: "0xa0bed124a09ac2bd941b10349d8d224fe3c955eb"
//   blockchain: "ethereum"
//   decimals: 18
//   logo: "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb/logo.png"
//   name: "DePay"
//   symbol: "DEPAY",
//   routable: true // information if token is routable through DePay Payment router
// }
```

### 选择 NFT

决定由用户选择什么 .

这只能解决单一区块链上的单一合同.

由于NFT集可以跨越多个区块链,用户需要每个合同地址和区块链选择一个.

```javascript
let collection = await DePayWidgets.Select({ what: 'nft' })

// {
//    address: "0xba30E5F9Bb24caa003E9f2f0497Ad287FDF95623",
//    blockchain: "ethereum",
//    createdAt: "2021-06-18T21:32:25.355263+00:00",
//    image: "https://i.seadn.io/gae/l1wZXP2hHFUQ3turU5VQ9PpgVVasyQ79-ChvCgjoU5xKkBA50OGoJqKZeMOR-qLrzqwIfd1HpYmiv23JWm0EZ14owiPYaufqzmj1?w=500&auto=format",
//    link: "https://opensea.io/collection/bored-ape-kennel-club",
//    name: "BoredApeKennelClub",
//    type: "721",
// }
```

如果NFT合同为1155型,回报中还将包含给定合同地址的NFTs代号:

```javascript
// {
//    address: "0x495f947276749Ce646f68AC8c248420045cb7b5e",
//    blockchain: "ethereum",
//    id: "35347623114821255323888368639026081793120226253597860997754787918389704654849",
//    image: "https://i.seadn.io/gae/IIFck1wOESXNMfCN6nEhFIXReUaSyI68MXNPjvFapbjQXc42ARIcG8k-nEKJjXs1GdCY75ej4qArfy7LDbgGOFSR6zzBIOG-yEw04Q?w=500&auto=format",
//    link: "https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/35347623114821255323888368639026081793120226253597860997754787918389704654849",
//    name: "Genesis Block - 100,000 BC",
//    type: "1155"
// }
```

如果NFT是索拉纳上薄荷的列表:

如果NFT合同为1155型,回报中还将包含给定合同地址的NFTs代号:

```javascript
// {
//    addresses: ["4RYP3yX52g3BawgS4ShHwJqbrm8FcUF8PPA4oP1eP6Cv", "5GAse3WFPMCmbrw5x1RVdRaBttReBrgFLkw7yyqbSqtn"],
//    blockchain: "solana",
//    image: "https://img-cdn.magiceden.dev/rs:fill:400:400:0:0/plain/https%3A%2F%2Farweave.net%2FevHbhPvYxPn3NgtzeHg3WPS-QFwGdibQwTvY8chccrA%3Fext%3Dpng",
//    link: "https://magiceden.io/marketplace/depay",
//    name: "SOL - AD 2020",
//    type: "metaplex"
// }
```

## 实例

### 反应

#### 支付部件

```javascript

import React from 'react'
import DePayWidgets from '@depay/widgets'

export default (props)=>{

  let unmount

  const openPaymentWidget = async ()=>{
    (
      { unmount } = await DePayWidgets.Payment({...})
    )
  }

  useEffect(() => {
    return ()=>{
      // make sure an open widgets gets closed/unmounted as part of this component
      if(unmount) { unmount() }
    }
  }, [])

  return(
    <button onClick={ openPaymentWidget } type="button">
      Pay
    </button>
  )
}

```

## 网络3 付款

未来是 [网络3 付款](https://depay.com/web3-payments)。 。 。 .

板链具有更快,更简单,更聪明的付款潜力.

Web3 支付是无边,对等的,支持多个符和块链.

接受客户在钱包中已经拥有的任何资产类型. [德佩尔](https://depay.com/) 是块链不可知的,可以在任何时候被扩展到任何块链特定插件上. 互通性、可伸缩性和灵活性是我们议定书的基石。 接受用户在钱包中已经拥有的任何资产,无论这些资产被扣在哪个板链上,在执行分散支付时会减少摩擦.

### 链断层(多链)

互通性是我们基础设施建设的关键原则. [德佩尔](https://depay.com/) 可在任何区块链上延伸,确保具有竞争力的跨链未来.

### 无授权

互通性是我们基础设施建设的关键原则. [德佩尔](https://depay.com/) 可在任何区块链上延伸,确保具有竞争力的跨链未来.

### 无信任

大多数 Web3 支付提供商和处理商接收他们自己管理的钱包的支付. 只有在中间阶段才向卖方付款. [德佩尔](https://depay.com/) 不充当中间人。 每个中间步骤由智能合同取而代之,这些合同与分散流动资金池相连。 因此,不再需要信任.

### 易于使用

我们的雄心壮志是创造出比以往更轻松的用户体验,从现在的非crypto电子商务商店购物. 我们认为我们已经做了一个很好的工作.

### 开源

随意使用和贡献我们的代码库 。 我们很高兴你能来我们的车盖下看看 这个 [德佩尔](https://depay.com/) 协议将永远保持开放源码.

### 多链

[德佩尔](https://depay.com/) 计算多个区块链上的支付路由,尽管您的钱包目前连接了什么。 如果需要, 我们的软件会自动检测和切换网络( T) .

## 发展

### 快开始

```
yarn install
yarn dev
```

### 测试

#### 调试 Cypress

开始在 `--headed` 财务报告和审定财务报表 `--no-exit`

```
test:cypress:debug
```

测试并调试单个cypress文件 :

```
yarn test:cypress:debug --spec "cypress/e2e/bundle.js"
```

## 常见问题

### @depay/widgets 是什么？

密码支付直接到钱包 DePay为开发者简化了Web3集成,利用DeFi来无心接受任何象征性的尝试\. 将无摩擦、实时的代号转换与为无缝用户解码而设计的可定制部件组合在一起

### 如何安装 @depay/widgets？

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

### @depay/widgets 支持 TypeScript 吗？

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

### @depay/widgets 支持 ESM 还是 CommonJS？

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

### @depay/widgets 可以商用吗？

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

### @depay/widgets 的下载量有多少？

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

### @depay/widgets 还在维护吗？

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