@depay/widgets

中文文档

13.0.45发布于 2026/03/30MITTypeScriptESM + CJS构建来源已验证近 30 天下载 4340

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

文档目录35 节

* 安装
通过 CDN
通过软件包管理器( 建议)
导入您的 JavaScript 文件
服务器系统渲染( SSR)
演示文稿
支助
平台
区块链
钱包
支付部件
使用整合标识管理整合
未管理的配置
配置选项
客户端召回
连接部件
拒绝
登录部件
签名包含账户地址的信件
拒绝
选择部件
选择鼠标
选择 NFT
实例
反应
网络3 付款
链断层(多链)
无授权
无信任
易于使用
开源
多链
发展
快开始
测试

example

* 安装

通过 CDN

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

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

yarn add @depay/widgets ethers react react-dom

或者说

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

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

导入您的 JavaScript 文件

import DePayWidgets from '@depay/widgets'

服务器系统渲染( SSR)

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

指南 : https://dev.to/elisabethleonhardt/如何使用 - 客户端 - 仅限包装 - 有sr-in-gatsby-和-nextjs-3pfa

演示文稿

配置用户界面 : https://app.depay.com/ 整合/新

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

支助

平台

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

平台专用包装

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

EVM (Ethereum虚拟机)

yarn add @depay/widgets-evm

或者说

npm install @depay/widgets-evm --save

import DePayWidgets from '@depay/widgets-evm'

SVM (索拉纳虚拟机)

yarn add @depay/widgets-svm

或者说

npm install @depay/widgets-svm --save

import DePayWidgets from '@depay/widgets-svm'

区块链

钱包

DePay 支持大多数加密钱包。。。 .

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

使用整合标识管理整合

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

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

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

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

动态后端配置的有效载荷

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

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

{
  "dynamicKey": "dynamicValue"
}

未管理的配置

[大未管理的配置不为服务器端动作或集成提供任何回调. 它们仅限于启动和执行付款。如果您的整合需要回调, 请使用管理下的一体化。。。 .

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

多块链支付:

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 (没有管理),从来没有两者兼有.

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:应该收取费用的地址.

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

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

收费2

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

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

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

协议Fee

向议定书支付的费用:

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

标题

title

允许您更改部件的标题 :

DePayWidgets.Payment({

  title: 'Donation'

  //...
})

钱包

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

钱包

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

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

钱包. allow

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

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

钱包

wallet

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

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

DePayWidgets.Payment({
  
  wallet: wallet

})

供应商

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

DePayWidgets.Payment({

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

货币

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


DePayWidgets.Payment({

  currency: 'USD'

})

允许( 列表)

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

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

})

拒绝

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

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

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

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

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

反应示例 :

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

允许您更改部件的样式 .

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

允许您设置颜色值 :

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

颜色暗黑模式

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

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

字体家庭

fontFamily

允许您设置字体家族 :

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

密码

css

允许您注射 CSS :

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 以调整暗模式 :

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):

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

unmount()

客户端召回

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

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

在此之前

before

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

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

DePayWidgets.Payment({

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

发送

sent

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

部件将将此函数称为单项交易( 见 : 脱薪网络3-钱包关于结构的更详细情况)

DePayWidgets.Payment({

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

成功

succeeded

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

部件将将此函数调用为单个参数( 见 : 脱薪网络3-钱包 (详细情况)

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 验证付款后将调用此功能 .

DePayWidgets.Payment({

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

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

失败

failed

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

部件将将此函数调用为单个参数( 见 : 脱薪网络3-钱包 (详细情况)

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

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

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

错误

error

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

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 作为回报.

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

见网络3 钱包关于返回的详情 wallet。。。 .

拒绝

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


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

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

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

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来恢复签名

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 请访问已解决账户:

account // 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045

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

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数字 :

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)

拒绝

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


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

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

选择鼠标

决定由用户选择什么 .

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集可以跨越多个区块链,用户需要每个合同地址和区块链选择一个.

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代号:

// {
//    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代号:

// {
//    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"
// }

实例

反应


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 付款。。。 .

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

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

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

链断层(多链)

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

无授权

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

无信任

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

易于使用

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

开源

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

多链

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

发展

快开始

yarn install
yarn dev

测试

调试 Cypress

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

test:cypress:debug

测试并调试单个cypress文件 :

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

版本与发布记录

@depay/widgets 共发布 332 个版本，首次发布于 2021/10/28；过去 12 个月发布了 7 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本	发布日期	距今
`13.0.45`latest	2026/03/30	7 个月前
`13.0.44`	2026/03/03	8 个月前
`13.0.43`	2026/02/28	8 个月前
`13.0.42`	2026/02/13	8 个月前
`13.0.41`	2026/01/23	9 个月前
`13.0.40`	2025/12/31	10 个月前

关于 @depay/widgets 的常见问题

@depay/widgets 是什么？

如何安装 @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 和提交记录判断。

npm install @depay/widgets

pnpmpnpm add @depay/widgets
yarnyarn add @depay/widgets
bunbun add @depay/widgets

peer 依赖ethers ^5.7.1react ^18react-dom ^18

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

4,340

约 4340 次日均 145 次

统计周期 2026/10/12 – 2026/11/10
数据来自 npm 官方下载统计，今天更新

最新版本13.0.45发布于 7 个月前

开源许可MIT宽松许可

包体积35.2 MB26 个文件 · 解压后

运行依赖19 个另有 3 个 peer 依赖

模块格式ESM + CJS

TypeScript自带类型

发布版本332 个近 12 个月 7 个

首次发布2021/10/285 年前

元数据更新2026/03/30

每一个软件包背后，
都有分享与创造的人。