{"id":19854169,"url":"https://github.com/depayfi/widgets","last_synced_at":"2026-04-02T18:08:47.514Z","repository":{"id":37823229,"uuid":"299589318","full_name":"DePayFi/widgets","owner":"DePayFi","description":"💸 Payments directly into your wallet. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion and state-of-the-art widgets.","archived":false,"fork":false,"pushed_at":"2025-03-20T18:03:03.000Z","size":228160,"stargazers_count":99,"open_issues_count":2,"forks_count":38,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-12T14:18:17.913Z","etag":null,"topics":["blockchain","crypto","cryptocurrencies","dapp","defi","payment","react","wallet","web3","widgets"],"latest_commit_sha":null,"homepage":"https://depay.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DePayFi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://tip.depay.com/6KFBECVsokSt0UKOAug8CI"}},"created_at":"2020-09-29T10:59:27.000Z","updated_at":"2025-03-29T03:59:30.000Z","dependencies_parsed_at":"2023-02-17T19:45:53.433Z","dependency_job_id":"7148b7a3-b2df-40ee-ad7f-cf216b390fb3","html_url":"https://github.com/DePayFi/widgets","commit_stats":{"total_commits":678,"total_committers":6,"mean_commits":113.0,"dds":0.2359882005899705,"last_synced_commit":"49daaabbd82115946fe4489db734f93527768b99"},"previous_names":["depayfi/depay-widgets"],"tags_count":350,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DePayFi%2Fwidgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DePayFi","download_url":"https://codeload.github.com/DePayFi/widgets/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578876,"owners_count":21127714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","crypto","cryptocurrencies","dapp","defi","payment","react","wallet","web3","widgets"],"created_at":"2024-11-12T14:08:49.363Z","updated_at":"2026-04-02T18:08:47.468Z","avatar_url":"https://github.com/DePayFi.png","language":"JavaScript","funding_links":["https://tip.depay.com/6KFBECVsokSt0UKOAug8CI"],"categories":[],"sub_categories":[],"readme":"![Screenshot 2023-09-16 at 11 22 22](https://github.com/DePayFi/widgets/assets/851393/d05674d0-8e84-4062-bc7e-f4135b8ecc54)\n\n## Installation\n\nYou can either load the `@depay/widgets` package via CDN:\n\n```\n\u003cscript defer async src=\"https://integrate.depay.com/widgets/v12.js\"\u003e\u003c/script\u003e\n```\n\nor you install `@depay/widgets` via the package manager of your choice and ship it as part of your application bundle:\n\n```\nyarn add @depay/widgets\n```\n\nor\n\n```\nnpm install @depay/widgets --save\n```\n\nand load the DePayWidgets package wherever you need it:\n\n```\nimport DePayWidgets from '@depay/widgets'\n```\n\nMake sure you install DePay widgets peer dependencies, too, in case your project does not have them installed already:\n\n```\nyarn add ethers react react-dom\n```\n\nor\n\n```\nnpm install ethers react react-dom --save\n```\n\n## Platform specific packaging\n\nIn case you want to use and package only specific platforms, use the platform-specific package:\n\n### EVM platform specific packaging\n\n```\nyarn add @depay/widgets-evm\n```\n\n```javascript\nimport DePayWidgets from '@depay/widgets-evm'\n```\n\n### Solana platform specific packaging\n\n```\nyarn add @depay/widgets-solana\n```\n\n```javascript\nimport DePayWidgets from '@depay/widgets-solana'\n```\n\n## Server-side rendering\n\nMake sure you load this library as a client-side script for client-side rendering (CSR), in case you are using a server-side rendering (SSR) framework like next.js.\n\nNext.js: https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa\n\n## Demo\n\nTo easily integrate the DePay Payment Widgets please use our configurator here:\n\nhttps://app.depay.com/integrations/new\n\nFor a more low-key technical example/demo page have a look at:\n\nhttps://depayfi.github.io/widgets/demo.bundle.html\n\n## Support\n\n### Blockchains\n\n- [Ethereum](https://ethereum.org)\n- [BNB Smart Chain](https://www.binance.org/smartChain)\n- [Polygon](https://polygon.technology)\n- [Solana](https://solana.com)\n- [Optimism](https://www.optimism.io)\n- [Arbitrum](https://arbitrum.io)\n- [Fantom](https://fantom.foundation)\n- [Avalanche](https://www.avax.network)\n- [Gnosis](https://gnosis.io)\n- [Base](https://base.org)\n\n### Wallets\n\nDePay supports [most crypto wallets](https://depay.com/wallets).\n\n## DePayWidgets: Payments\n\nDePay Payments allows you to accept and perform crypto payments.\n\n### Integration\n\n`integration`\n\nConnects the widget to a DePay integration managed via https://app.depay.com:\n\n```javascript\nDePayWidgets.Payment({\n  integration: 'fe690fbc-1740-4894-b12c-23a72abec54d'\n})\n```\n\nThe configuration of the integration managed via https://app.depay.com will be fetched and applied before applying any additional local configurations.\n\nYou can fully manage an integration via https://app.depay.com. Passing any additional configuration is not necessary.\n\nLocally applied configurations overwrite remotely stored configurations.\n\nIf your integration relies on processing dynamic from your backend (e.g. pricing), and you are not managing a fixed configuration via https://app.depay.com,\nyou need to pass the data that is supposed to be forwarded to your backend for dynamic configurations to the widget:\n\n```javascript\nDePayWidgets.Payment({\n  integration: 'fe690fbc-1740-4894-b12c-23a72abec54d',\n  payload: {\n    whatever: 'you want to forward to your backend for dynamic configurations'\n  }\n})\n```\n\nThis will forward:\n\n```\n{\n  whatever: 'you want to forward to your backend for dynamic configurations'\n}\n```\n\nto your backend in order to receive a payment configuration for the widget.\n\n\u003e [!CAUTION]\n\u003e You have the option to utilize managed integrations along with the `integration` attribute for payment validations (refer to the previous section). Alternatively, if payment validations are not necessary, you may opt for basic configurations using `accept` (see next section). However, it's important to note that `integration` and `accept` cannot be used simultaneously.\n\n### Configuration\n\n```javascript\nDePayWidgets.Payment({\n  accept: [{\n    blockchain: 'ethereum',\n    amount: 20,\n    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',\n    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'\n  }]\n});\n```\n\nYou can also accept multiple payments on multiple blockchains:\n\n```javascript\nDePayWidgets.Payment({\n  accept: [\n    { // 20 USDT on ethereum\n      blockchain: 'ethereum',\n      amount: 20,\n      token: '0xdac17f958d2ee523a2206206994597c13d831ec7',\n      receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'\n    },{ // 20 BUSD on bsc\n      blockchain: 'bsc',\n      amount: 20,\n      token: '0xe9e7cea3dedca5984780bafc599bd69add087d56',\n      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'\n    },{ // 20 USDC on polygon\n      blockchain: 'polygon',\n      amount: 20,\n      token: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',\n      receiver: '0x552C2a5a774CcaEeC036d41c983808E3c76477e6'\n    }\n  ]\n});\n```\n\n#### accept\n\n`blockchain`\n\nThe blockchain you want to receive the payment on.\n\n`token`\n\nThe address of the token you want to receive.\n\n`amount` (Optional)\n\nThe amount of tokens you want to receive. Needs to be passed as a human readable number e.g. `20`.\n\nThe `BigNumber` of that amount will be calculated internally including finding the right amount of decimals for the given token.\nSo please just pass the amount in a human readable form as Number/Decimal: e.g. `20` for 20 USDT or `20.25` etc.\n\nIf you do not pass an amount, the user will be able to select an amount within the widget.\n\n`receiver`\n\nThe address receiving the payment. Always double check that you've set the right address.\n\n#### wallets\n\nYou can sort and whitelist wallets displayed during the initial wallet selection step as follows:\n\n##### wallets.sort\n\n```\n{\n  wallets: {\n    sort: [\n      'Uniswap',\n      'Coinbase'\n    ]\n  }\n}\n```\n\nThis configuration would display Uniswap and Coinbase first, then would list all the others.\n\n##### wallets.whitelist\n\n```\n{\n  wallets: {\n    whitelist: [\n      'Uniswap',\n      'Coinbase',\n      'Rainbow'\n    ]\n  }\n}\n```\n\nThis configuration would only display Uniswap, Coinbase and Rainbow. No other options/wallets are displayed.\n\n\n#### amount\n\n##### fixed currency amounts\n\nIf you want the widget to fix a payment amount in a currency, use `currency` and `fix`:\n\n`currency`: \n\nExample (charge US$5.20):\n\n```\n{\n  amount: {\n    currency: 'USD',\n    fix: 5.20\n  }\n}\n```\n\nMake sure to not pass any amounts to `accept` if you use fix currency amounts.\n\nThe widget will still display local currency conversions to users. If you want to change this see `currency` configuration.\n\n##### amount selection (changeable amounts)\n\nWhen you want to control how the amount selection behaves, pass the `amount` configuration object,\nalongside values for `start`, `min` and `step`.\n\n`start`: The amount that is initially selected.\n\n`min`: The minimum amount selectable.\n\n`step`: The number by which to increment/decrement changes to the amount.\n\n#### fee\n\nYou can configure a fee which will be applied to every payment with its own dedicated fee receiver address.\n\nThe fee will be taken from the target token and target amount (after swap, depending on your `accept` configuration).\n\n`amount`: Either percentage (e.g. `5%`, or absolute amount as BigNumber string ('100000000000000000') or pure number (2.5)\n\n`receiver`: The address that is supposed to receive the fee.\n\n```javascript\nDePayWidgets.Payment({\n  accept: [\n    {...\n\n      fee: {\n        amount: '3%',\n        receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'\n      }\n    }\n  ],\n});\n```\n\n#### title\n\n`title`\n\nAllows you to change the title of the widget:\n\n```javascript\nDePayWidgets.Payment({\n\n  title: 'Donation'\n\n  //...\n})\n```\n\n#### track\n\n`track`\n\nAllows to track payments via any backend endpoint.\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    endpoint: '/track/payments'\n  }\n})\n```\n\n\u003e [!CAUTION]\n\u003e `track` is not possible using managed integrations via app.depay.com!\n\nOnce a user clicks \"Pay\" in the widget, and before the transaction is handed over to the wallet, the widget will send a payment trace (without transaction_id) to the configured endpoint.\n\nThis is where the payment tracing starts:\n\n```\nPOST /track/payments\nBODY:\n  {\n    \"blockchain\": \"ethereum\",\n    \"sender\": \"0x769794c94e9f113e357023dab73e81dbd6db201c\",\n    \"nonce\": 103,\n    \"after_block\": 13230369,\n    \"from_token\": \"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48\",\n    \"from_amount\": \"1100000000000000000\",\n    \"from_decimals\": 18,\n    \"to_token\": \"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48\",\n    \"to_amount\": \"1000000000000000000\",\n    \"to_decimals\": 18,\n    \"fee_amount\": \"100000000000000000\"\n  }\n```\n\nOnce the payment has been submitted by the widget, it will call the configured endpoint again.\n\nThis is where the payment tracking starts:\n\n```\nPOST /track/payments\nBODY:\n  {\n    \"blockchain\": \"ethereum\",\n    \"transaction\": \"0x4311a9820195c2a5af99c45c72c88848ed403a4020863c913feed81d15855ae4\",\n    \"sender\": \"0x769794c94e9f113e357023dab73e81dbd6db201c\",\n    \"nonce\": 103,\n    \"after_block\": 13230369,\n    \"from_token\": \"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48\",\n    \"from_amount\": \"1100000000000000000\",\n    \"from_decimals\": 18,\n    \"to_token\": \"0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48\",\n    \"to_amount\": \"1000000000000000000\",\n    \"to_decimals\": 18,\n    \"fee_amount\": \"100000000000000000\"\n  }\n```\n\nAlternatively you can pass a method to track that performs the tracking request to your backend if you need to handle the request yourself (e.g. to add additional headers etc.):\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    method: async (payment)=\u003e{\n      let response = await fetch('/track/payments', {\n        method: 'POST',\n        body: JSON.stringify(payment),\n        headers: { \"Content-Type\": \"application/json\", \"X-CSRF-TOKEN\": document.querySelector('[name=csrf-token]').content }\n      })\n      if(response.status != 200) {\n        throw 'TRACKING FAILED'\n      }\n    }\n  }\n})\n```\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    method: (payment)=\u003eaxios('/track/payments', payment)\n  }\n})\n```\n\nIn case you pass a tracking method it needs to return a promise. \n\nIf that promise resolves, the widget assumes the tracking initialization was successful. If the promise rejects it will retry the tracking initialization over and over again.\n\nMake sure to evaluate within your tracking method if the response succeeded or not and throw an error accordingly.\n\nPayment tracking requests will be attempted indefinitely. After 2 minutes a warning dialog will be presented to users asking them to ensure an internet connection so that the payment tracking can be performed.\n\n##### Asynchronous Validation\n\nFor user flows where you can release the user immediately, we recommend performing payment validation asynchronously as in certain situations it can take up to multiple minutes to validate a payment:\n\nYou can configure the widget to track/validate the payment asynchronously:\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    endpoint: '/track',\n    async: true\n  }\n})\n```\n\nWhich will release the user right after the payment transaction has been confirmed on the user's machine.\n\nIt still tracks and validates the payment asynchronously (in the background) and calls back your endpoints as soon as it has been validated.\n\nThis allows you to release the user immediately, showing him some confirmation and reconfirming his payment in an asynchronous step (like a notification or email).\n\n##### Polling\n\nIn order to ensure a 100% coverage that users are released and forwarded within your payment flow, you will need to implement polling in addition to tracking.\n\nThe `track.poll` configuration either takes an `enpoint` or a `method` (similar to track itself).\n\nIt will use the endpoint or the method to request a release every 5 seconds.\n\nYou need to make sure to respond to this request with a status `404` in case the user is not to be released just yet (payment and processing on your side are not complete yet)\nor `200` if the payment has been completed and the processing on your side is done and the user can be released and forwarded within your payment flow.\n\nIn case you want to redirect the user to the next step in your system, the poll endpoint needs to respond with a body containing json like: `{ forward_to: 'https://example.com/next_step_url' }`.\n\nIt is not enough to rely on setting `forward_to` initially with the tracking request, you will also need to respond with `forward_to` when implementing polling\nas the entire reason for polling is to cover cases where websockets fail and the initial `forward_to` can not be communicated to the client.\n\nIf you use a method for additional polling, make sure you return a promise. Polling will continue as long as you resolve this promise with anything that resolves to true:\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    poll: {\n      method: async (payment)=\u003e{\n        let response = await fetch('/payments/123/release', {\n          method: 'POST',\n          body: JSON.stringify(payment),\n          headers: { \"Content-Type\": \"application/json\", \"X-CSRF-TOKEN\": document.querySelector('[name=csrf-token]').content }\n        })\n        if(response.status == 200) {\n          let json = await response.json()\n          return json // { \"forward_to\": \"https://mywebsite.com/payments/123/confirmation\" }\n        }\n      }\n    }\n  }\n})\n```\n\n```javascript\nDePayWidgets.Payment({\n\n  track: {\n    poll: {\n      method: async (payment)=\u003e{\n        let response = await axios('/payments/123/release', payment)\n        return response // { \"forward_to\": \"https://mywebsite.com/payments/123/confirmation\" }\n      }\n    }\n  }\n})\n```\n\n#### connected\n\n`connected`\n\nA function that will be called once the user connects a wallet.\n\nThis function will be called with the connected wallet address as the main argument:\n\n```javascript\nDePayWidgets.Payment({\n\n  connected: (address)=\u003e {\n    // do something with the address\n  }\n})\n\n```\n\n#### closed\n\n`closed`\n\nA function that will be called once the user closes the widget (no matter if before or after the payment).\n\n```javascript\nDePayWidgets.Payment({\n\n  closed: ()=\u003e {\n    // do something if user closed the widget\n  }\n})\n\n```\n\n#### before\n\n`before`\n\nA function that will be called before the payment is handed over to the wallet.\n\nAllows you to stop the payment if this method returns false.\n\n```javascript\nDePayWidgets.Payment({\n\n  before: async (payment, from)=\u003e {\n    alert('Something went wrong')\n    return false // stops payment\n  }\n})\n```\n\n#### sent\n\n`sent`\n\nA function that will be called once the payment has been sent to the network (but still needs to be mined/confirmed).\n\nThe widget will call this function with a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details about the structure)\n\n```javascript\nDePayWidgets.Payment({\n\n  sent: (transaction)=\u003e {\n    // called when payment transaction has been sent to the network\n  }\n})\n```\n\n#### succeeded\n\n`succeeded`\n\nA function that will be called once the payment has succeeded on the network (checked client-side).\n\nThe widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)\n\n```javascript\nDePayWidgets.Payment({\n\n  succeeded: (transaction, payment)=\u003e {\n    // called when payment transaction has been confirmed once by the network\n    // might be called multiple times\n\n    // \"payment\" contains information about what the user selected as payment\n  }\n})\n```\n\n#### validated\n\n`validated`\n\nA function that will be called once the payment has been validated by DePay.\n\n```javascript\nDePayWidgets.Payment({\n\n  validated: (successful, transaction, payment)=\u003e {\n    // successful (true or false)\n\n    // \"payment\" contains information about what the user selected as payment\n  }\n})\n```\n\n#### failed\n\n`failed`\n\nA function that will be called if the payment execution failed on the blockchain (after it has been sent/submitted).\n\nThe widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)\n\n```javascript\nDePayWidgets.Payment({\n\n  failed: (transaction, error, payment)=\u003e {\n    // called when payment transaction failed on the blockchain\n    // handled by the widget, no need to display anything\n    // might be called multiple times\n\n    // \"payment\" contains information about what the user selected as payment\n  }\n})\n```\n\n#### critical\n\n`critical`\n\nA function that will be called if the widget throws a critical internal error that it can't handle and display on its own:\n\n```javascript\nDePayWidgets.Payment({\n  \n  critical: (error)=\u003e {\n    // render and display the error with error.toString()\n  }\n})\n```\n\n#### error\n\n`error`\n\nA function that will be called if the widget throws a non-critical internal error that it can and will handle and display on its own:\n\n```javascript\nDePayWidgets.Payment({\n\n  error: (error)=\u003e {\n    // maybe do some internal tracking with error.toString()\n    // no need to display anything as widget takes care of displaying the error\n  }\n})\n```\n\n#### wallet\n\n`wallet`\n\nAllows to pass an already connected wallet instance (to skip the \"Connect Wallet\" flow):\n\n```javascript\nlet { wallet } = DePayWidgets.Connect({})\n\nDePayWidgets.Payment({\n  \n  wallet: wallet\n\n})\n```\n\n#### providers\n\nAllows to set providers to be used for making RPC calls to the individual blockchains:\n\n```javascript\nDePayWidgets.Payment({\n\n  providers: {\n    ethereum: ['http://localhost:8545'],\n    bsc: ['http://localhost:8545'],\n    polygon: ['http://localhost:8545']\n  }\n})\n```\n\n#### currency\n\nAllows you to enforce displayed local currency (instead of automatically detecting it):\n\n```javascript\n\nDePayWidgets.Payment({\n\n  currency: 'USD'\n\n})\n\n```\n\n#### whitelist\n\nAllows only the configured tokens to be eligible as means of payment (from the sender):\n\n```javacript\nDePayWidgets.Payment({\n  \n  whitelist: {\n    ethereum: [\n      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // ETH\n      '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT\n      '0x6b175474e89094c44da98b954eedeac495271d0f'  // DAI\n    ],\n    bsc: [\n      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // BNB\n      '0xe9e7cea3dedca5984780bafc599bd69add087d56', // BUSD\n      '0x55d398326f99059ff775485246999027b3197955'  // BSC-USD\n    ],\n    polygon: [\n      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // MATIC\n      '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC\n    ]\n  }\n\n})\n\n```\n\n#### blacklist\n\nAllows to blacklist tokens so that they will not be suggested as means of payment (from the sender):\n\n```javacript\nDePayWidgets.Payment({\n  \n  blacklist: {\n    ethereum: [\n      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap\n      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e\n      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK\n    ],\n    bsc: [\n      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe\n      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe\n      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver\n      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek\n      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX\n      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR\n      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW\n      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN\n      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA\n      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE\n      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX\n      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is\n      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB\n      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA\n      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG\n      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE\n    ]\n  }\n})\n```\n\n#### container\n\n`container`\n\nAllows you to pass a container element that is supposed to contain the widget:\n\n```javascript\nDePayWidgets.Payment({\n  container: document.getElementById('my-container')\n})\n```\n\nMake sure to set the css value `position: relative;` for the container element. Otherwise it can not contain the widget.\n\nReact example:\n\n```javascript\nlet CustomComponentWithWidget = (props)=\u003e{\n    let container = useRef()\n\n    useEffect(()=\u003e{\n      if(container.current) {\n        DePayWidgets.Payment({ ...defaultArguments, document,\n          container: container.current\n        })\n      }\n    }, [container])\n\n    return(\n      \u003cdiv ref={container} style={{ position: 'relative', border: '1px solid black', width: \"600px\", height: \"600px\" }}\u003e\u003c/div\u003e\n    )\n  }\n```\n\n#### style\n\n`style`\n\nAllows you to change the style of the widget.\n\n```javascript\nDePayWidgets.Payment({\n  style: {\n    colors: {\n      primary: '#ffd265',\n      text: '#e1b64a',\n      buttonText: '#000000',\n      icons: '#ffd265'\n    },\n    fontFamily: '\"Cardo\", serif !important',\n    css: `\n      @import url(\"https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026display=swap\");\n\n      .ReactDialogBackground {\n        background: rgba(0,0,0,0.8);\n      }\n    `\n  }\n})\n```\n\n##### colors\n\n`colors`\n\nAllows you to set color values:\n\n```javascript\nDePayWidgets.Payment({\n  \n  style: {\n    colors: {\n      primary: '#ffd265',\n      text: '#ffd265',\n      buttonText: '#000000',\n      icons: '#ffd265'\n    }\n  }\n})\n```\n\n##### fontFamily\n\n`fontFamily`\n\nAllows you to set the font-family:\n\n```javascript\nDePayWidgets.Payment({\n  \n  style: {\n    fontFamily: '\"Cardo\", serif !important'\n  }\n})\n```\n\n##### css\n\n`css`\n\nAllows you to inject CSS:\n\n```javascript\nDePayWidgets.Payment({\n  \n  style: {\n    css: `\n      @import url(\"https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026display=swap\");\n\n      .ReactDialogBackground {\n        background: rgba(0,0,0,0.8);\n      }\n    `\n  }\n})\n```\n\n#### unmount\n\n`unmount`\n\nAllows you to unmount (the React safe way) the entire widget from the outside:\n\n```javascript\nlet { unmount } = await DePayWidgets.Payment({})\n\nunmount()\n```\n\n#### recover\n\n`recover`\n\nAllows you to recover a previously made payment. E.g. useful if you need to continue to show a pending payment progress if user rearrives or reloads a payment page:\n\n```javascript\nDePayWidgets.Payment({\n  recover: {\n    blockchain: 'ethereum',\n    transaction: '0x081ae81229b2c7df586835e9e4c16aa89f8a15dc118fac31b7521477c53ed2a9',\n    sender: '0x317d875ca3b9f8d14f960486c0d1d1913be74e90',\n    nonce: 2865,\n    afterBlock: 14088130,\n    token: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',\n    amount: 0.0001\n  }\n})\n\nA recovered payment still results in a confirmed or failed payment, and also calls one of those callbacks also when created with recover.\n\n```\n\n#### closable\n\n`closable`\n\nMakes the widget unclosable:\n\n```javascript\nDePayWidgets.Payment({\n  closable: false\n})\n\n```\n\n## DePayWidgets: Sale\n\nDePay Sales allows you to sell tokens directly from your website or dApp with automatic any-to-any payment conversion (so people can use any token when buying your token directly off your website or dApp).\n\n### Quick start\n\n```javascript\nDePayWidgets.Sale({\n  sell: {\n    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'\n  }\n});\n```\n\n### Configuration\n\nYou need to pass a configuration object to `DePayWidgets.Sale` which needs to at least contain the `sell` field:\n\n```javascript\nDePayWidgets.Sale({\n  sell: {\n    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'\n  }\n});\n```\n\nYou can also sell on multiple blockchains:\n\n```javascript\nDePayWidgets.Sale({\n  sell: {\n    'ethereum': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',\n    'bsc': '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb'\n  }\n});\n```\n\n#### sell\n\n`\"blockchain\": \"token\"`\n\nThe address of the token you want to sell for the given blockchain.\n\n#### amount\n\nWhen you want to control how the amount selection behaves, pass the `amount` configuration object,\nalongside values for `start`, `min` and `step`.\n\n`start`: The amount that is initially selected.\n\n`min`: The minimum amount selectable.\n\n`step`: The number by which to increment/decrement changes to the amount.\n\n`token`: Set to `true` if you want amount selection to be denominated in the token you're selling, e.g.:\n\n```javascript\nDePayWidgets.Sale({\n  sell: {...},\n  amount: {\n    token: true\n  }\n});\n```\n\n#### connected\n\n`connected`\n\nA function that will be called once the user connects a wallet.\n\nWill be called with the connected wallet address as the main argument:\n\n```javascript\nDePayWidgets.Sale({\n\n  connected: (address)=\u003e {\n    // do something with the address\n  }\n});\n```\n\n#### closed\n\n`closed`\n\nA function that will be called once the user closes the widget (no matter if before or after the payment).\n\n```javascript\nDePayWidgets.Sale({\n\n  closed: ()=\u003e {\n    // do something if user closed the widget\n  }\n});\n```\n\n#### sent\n\n`sent`\n\nA function that will be called once the payment has been sent to the network (but still needs to be mined/confirmed).\n\nThe widget will call this function with a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)\n\n```javascript\nDePayWidgets.Sale({\n  \n  sent: (transaction)=\u003e {\n    // called when payment transaction has been sent to the network\n  }\n});\n```\n\n#### succeeded\n\n`succeeded`\n\nA function that will be called once the payment has succeeded on the network (checked client-side).\n\nThe widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)\n\n```javascript\nDePayWidgets.Sale({\n\n  succeeded: (transaction)=\u003e {\n    // called when payment transaction has been confirmed once by the network\n  }\n});\n```\n\n#### failed\n\n`failed`\n\nA function that will be called if the payment execution failed on the blockchain (after it has been sent/submitted).\n\nThe widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)\n\n```javascript\nDePayWidgets.Sale({\n\n  failed: (transaction)=\u003e {\n    // called when payment transaction failed on the blockchain\n    // handled by the widget, no need to display anything\n  }\n});\n```\n\n#### critical\n\n`critical`\n\nA function that will be called if the widget throws a critical internal error that it can't handle and display on its own:\n\n```javascript\nDePayWidgets.Sale({\n  \n  critical: (error)=\u003e {\n    // render and display the error with error.toString()\n  }\n});\n```\n\n#### error\n\n`error`\n\nA function that will be called if the widget throws a non-critical internal error that it can and will handle and display on its own:\n\n```javascript\nDePayWidgets.Sale({\n  \n  error: (error)=\u003e {\n    // maybe do some internal tracking with error.toString()\n    // no need to display anything as widget takes care of displaying the error\n  }\n});\n```\n\n#### providers\n\nAllows to set providers to be used for making RPC calls to the individual blockchains:\n\n```javascript\nDePayWidgets.Sale({\n\n  providers: {\n    ethereum: ['http://localhost:8545'],\n    bsc: ['http://localhost:8545']\n  }\n});\n```\n\n#### currency\n\nAllows you to enforce displayed local currency (instead of automatically detecting it):\n\n```javascript\nDePayWidgets.Sale({\n\n  currency: 'USD'\n\n});\n```\n\n#### blacklist\n\nAllows to blacklist tokens so that they will not be suggested as means of payment (from the sender):\n\n```javacript\nDePayWidgets.Sale({\n  \n  blacklist: {\n    ethereum: [\n      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap\n      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e\n      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK\n    ],\n    bsc: [\n      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe\n      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe\n      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver\n      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek\n      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX\n      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR\n      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW\n      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN\n      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA\n      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE\n      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX\n      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is\n      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB\n      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA\n      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG\n      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE\n    ]\n  }\n});\n```\n\n#### tokenImage\n\n`tokenImage`\n\nAllows to set the token image used in the widget to represent the purchased token:\n\n```javascript\nDePayWidgets.Sale({\n  \n  tokenImage: 'https://depay.com/favicon.png'\n\n});\n```\n\n#### style\n\n`style`\n\nAllows you to change the style of the widget.\n\n```javascript\nDePayWidgets.Sale({\n  \n  style: {\n    colors: {\n      primary: '#ffd265',\n      text: '#e1b64a',\n      buttonText: '#000000',\n      icons: '#ffd265'\n    },\n    fontFamily: '\"Cardo\", serif !important',\n    css: `\n      @import url(\"https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026display=swap\");\n\n      .ReactDialogBackground {\n        background: rgba(0,0,0,0.8);\n      }\n    `\n  }\n});\n```\n\n##### colors\n\n`colors`\n\nAllows you to set color values:\n\n```javascript\nDePayWidgets.Sale({\n  \n  style: {\n    colors: {\n      primary: '#ffd265',\n      text: '#ffd265',\n      buttonText: '#000000',\n      icons: '#ffd265'\n    }\n  }\n});\n```\n\n##### fontFamily\n\n`fontFamily`\n\nAllows you to set the font-family:\n\n```javascript\nDePayWidgets.Sale({\n  \n  style: {\n    fontFamily: '\"Cardo\", serif !important'\n  }\n});\n```\n\n##### css\n\n`css`\n\nAllows you to inject CSS:\n\n```javascript\nDePayWidgets.Sale({\n  \n  style: {\n    css: `\n      @import url(\"https://fonts.googleapis.com/css2?family=Cardo:wght@400;700\u0026display=swap\");\n\n      .ReactDialogBackground {\n        background: rgba(0,0,0,0.8);\n      }\n    `\n  }\n});\n```\n\n#### unmount\n\n`unmount`\n\nAllows you to unmount (the React safe way) the entire widget from the outside:\n\n```javascript\nlet { unmount } = await DePayWidgets.Sale({})\n\nunmount()\n```\n\n#### closable\n\n`closable`\n\nMakes the widget unclosable:\n\n```javascript\nDePayWidgets.Sale({\n  closable: false\n})\n\n```\n\n## DePay Connect\n\nDePay Connect allows you to have your users connect their crypto wallet to your dApp or website.\n\nReturns connected `account` and `wallet` in return. \n\n```javascript\nlet { account, wallet }  = await DePayWidgets.Connect()\n```\n\nSee [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets) for more details about the returned `wallet`.\n\n### Rejections\n\n1. Rejects if user just closes the dialog without connecting any wallet:\n\n```javascript\n\nDePayWidgets.Connect().then(()=\u003e{}).catch((error)=\u003e{\n  error // \"USER_CLOSED_DIALOG\"\n})\n\n```\n\n## DePay Login\n\nDePay Login allows you to perform web3 wallet logins with ease.\n\nReturns `account` if successfully signed and recovered log in message.\n\n```javascript\nlet message = \"Sign to login\"\nlet { account, wallet } = await DePayWidgets.Login({ message })\n```\n\nConnects wallet and instructs connected wallet to sign `message`, afterwards sends `signature` and `message` to `POST /login` (or `endpoint` if defined):\n\n```\nPOST /login\nBODY\n  {\n    \"message\": \"Sign to login\",\n    \"signature\": \"0x123456\" // raw signature\n  }\n```\n\nThe `/login` endpoint needs to recover the address for `message` and `signature`.\n\ne.g. your backend could use node + ethers.js to recover the signature\n\n```javascript\nconst ethers = require('ethers')\nconst hashedMessage = ethers.utils.hashMessage(inputs.message)\nconst address = ethers.utils.recoverAddress(hashedMessage, inputs.signature)\nreturn address\n```\n\nmake sure you return the recovered address back to the widget:\n\n```\nPOST /login\nRESPONSE\n  \"0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\"\n```\n\n\nWhich will resolve the `DePayWidgets.Login` request to the resolved account:\n\n```javascript\naccount // 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045\n```\n\nYou can also pass a `recover` function that takes care of signature recovery:\n\n```javascript\nDePayWidgets.Login({ message, recover: ({ message, signature })=\u003e{\n    return new Promise((resolve, reject)=\u003e{\n      fetch('https://example.com/login', {\n        method: 'POST',\n        body: JSON.stringify({ message, signature })\n      })\n        .then((response)=\u003e{\n          if(response.status == 200) {\n            response.text().then((account)=\u003e{\n              resolve(account)\n            }).catch(reject)\n          } else {\n            response.text().then((text)=\u003e{\n              reject(text || 'Recovering login signature failed!')\n            }).catch(reject)\n          }\n        })\n    })\n  }\n})\n```\n\n### Sign message containing the account address\n\nIn case you want to include the wallet account identifier in the to be signed message, pass a callback function returning a string to `message`:\n\n```javascript\nlet { account } = await DePayWidgets.Login({\n  message: (account)=\u003e`Click to log in to DePay and to accept DePay's Terms of Service: https://depay.com/legal/terms\\n${dateTime}\\n${account}`\n})\nconsole.log(\"Logged in via signature\", account)\n```\n\n### Rejections\n\n1. Rejects if user just closes the dialog without connecting any wallet:\n\n```javascript\n\nDePayWidgets.Login().then(()=\u003e{}).catch((error)=\u003e{\n  error // \"USER_CLOSED_DIALOG\"\n})\n\n```\n\n## DePay Select\n\nDePay Select widget allows you to open a dialog that allows you to select things like tokens, etc.\n\n### Select Token\n\nResolves with what has been selected by the user.\n\n```javascript\nlet token = await DePayWidgets.Select({ what: 'token' })\n\n// {\n//   address: \"0xa0bed124a09ac2bd941b10349d8d224fe3c955eb\"\n//   blockchain: \"ethereum\"\n//   decimals: 18\n//   logo: \"https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb/logo.png\"\n//   name: \"DePay\"\n//   symbol: \"DEPAY\",\n//   routable: true // information if token is routable through DePay Payment router\n// }\n```\n\n\n### Select NFT\n\nResolves with what has been selected by the user.\n\nThis only resolves to a single contract on a single blockchain.\n\nAs NFT collections could span over multiple blockchains, users would need to make one selection per contract address \u0026 blockchain.\n\n```javascript\nlet collection = await DePayWidgets.Select({ what: 'nft' })\n\n// {\n//    address: \"0xba30E5F9Bb24caa003E9f2f0497Ad287FDF95623\",\n//    blockchain: \"ethereum\",\n//    createdAt: \"2021-06-18T21:32:25.355263+00:00\",\n//    image: \"https://i.seadn.io/gae/l1wZXP2hHFUQ3turU5VQ9PpgVVasyQ79-ChvCgjoU5xKkBA50OGoJqKZeMOR-qLrzqwIfd1HpYmiv23JWm0EZ14owiPYaufqzmj1?w=500\u0026auto=format\",\n//    link: \"https://opensea.io/collection/bored-ape-kennel-club\",\n//    name: \"BoredApeKennelClub\",\n//    type: \"721\",\n// }\n```\n\nIf the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:\n\n```javascript\n// {\n//    address: \"0x495f947276749Ce646f68AC8c248420045cb7b5e\",\n//    blockchain: \"ethereum\",\n//    id: \"35347623114821255323888368639026081793120226253597860997754787918389704654849\",\n//    image: \"https://i.seadn.io/gae/IIFck1wOESXNMfCN6nEhFIXReUaSyI68MXNPjvFapbjQXc42ARIcG8k-nEKJjXs1GdCY75ej4qArfy7LDbgGOFSR6zzBIOG-yEw04Q?w=500\u0026auto=format\",\n//    link: \"https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/35347623114821255323888368639026081793120226253597860997754787918389704654849\",\n//    name: \"Genesis Block - 100,000 BC\",\n//    type: \"1155\"\n// }\n```\n\nIf NFT is a list of mints on solana:\n\nIf the NFT contract is of type 1155 the return will also contain the NFTs id for the given contract address:\n\n```javascript\n// {\n//    addresses: [\"4RYP3yX52g3BawgS4ShHwJqbrm8FcUF8PPA4oP1eP6Cv\", \"5GAse3WFPMCmbrw5x1RVdRaBttReBrgFLkw7yyqbSqtn\"],\n//    blockchain: \"solana\",\n//    image: \"https://img-cdn.magiceden.dev/rs:fill:400:400:0:0/plain/https%3A%2F%2Farweave.net%2FevHbhPvYxPn3NgtzeHg3WPS-QFwGdibQwTvY8chccrA%3Fext%3Dpng\",\n//    link: \"https://magiceden.io/marketplace/depay\",\n//    name: \"SOL - AD 2020\",\n//    type: \"metaplex\"\n// }\n```\n\n## Examples\n\n### React\n\n#### DePay Payments\n\n```javascript\n\nimport React from 'react'\nimport DePayWidgets from '@depay/widgets'\n\nexport default (props)=\u003e{\n\n  let unmount\n\n  const openPaymentWidget = async ()=\u003e{\n    (\n      { unmount } = await DePayWidgets.Payment({...})\n    )\n  }\n\n  useEffect(() =\u003e {\n    return ()=\u003e{\n      // make sure an open widgets gets closed/unmounted as part of this component\n      if(unmount) { unmount() }\n    }\n  }, [])\n\n  return(\n    \u003cbutton onClick={ openPaymentWidget } type=\"button\"\u003e\n      Pay\n    \u003c/button\u003e\n  )\n}\n\n```\n\n## Web3 Payments\n\nThe future is [Web3 Payments](https://depay.com/web3-payments).\n\nBlockchains hold the potential to faster, simpler and smarter payments.\n\nWeb3 Payments are borderless, peer-to-peer, and support multiple tokens and blockchains.\n\nAccept any asset type that your customers already have in their wallet. [DePay](https://depay.com) is blockchain agnostic and can at any time be extended on any blockchain-specific plugin. Interoperability, scalability \u0026 flexibility are the cornerstones of our protocol. Accepting any asset that users already have in their wallets no matter which blockchain these are held on, reduces friction when performing decentralized payments.\n\n### Chain Agnostic (Multichain)\n\nInteroperability is the key principle on which our infrastructure is built. [DePay](https://depay.com) is extensible around any blockchain, ensuring a competitive cross-chain future.\n\n### Permissionless\n\nInteroperability is the key principle on which our infrastructure is built. [DePay](https://depay.com) is extensible around any blockchain, ensuring a competitive cross-chain future.\n\n### Trustless\n\nMost Web3 Payment providers \u0026 processors receive payments to wallets that they manage themselves. Only in a further intermediate step are the payments paid out to sellers. [DePay](https://depay.com) does not act as an intermediary. Every intermediate step is replaced by smart contracts which are connected to decentralized liquidity pools. As a result, trust is no longer required.\n\n### Easy to use\n\nOur ambition was to create an even easier user experience than you're used to from shopping in current non-crypto e-commerce stores. We think we've done a good job of that.\n\n### Open Source\n\nFeel free to use \u0026 contribute to our codebase at. We're happy to have you look under our hood. The [DePay](https://depay.com) protocol will always remain open source.\n\n### Multichain\n\n[DePay](https://depay.com) calculates payment routes on multiple blockchains simultaneously despite what your wallet is currently connected to. Our software automatically detects \u0026 switches the network if required.\n\n## Development\n\n### Quick start\n\n```\nyarn install\nyarn dev\n```\n\n### Testing\n\n#### Debug Cypress\n\nStarts cypress in `--headed` and `--no-exit`\n\n```\ntest:cypress:debug\n```\n\nTest and debug single cypress file:\n\n```\nyarn test:cypress:debug --spec \"cypress/e2e/Payment/payment-value-loss-safeguard.js\"\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdepayfi%2Fwidgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdepayfi%2Fwidgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdepayfi%2Fwidgets/lists"}