npm - @depay/widgets - Versions diffs - 7.15.0 → 7.15.3 - Mend

@depay/widgets 7.15.0 → 7.15.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -24,9 +24,13 @@ import DePayWidgets from '@depay/widgets'
 ## Demo
-To easily configure DePay Payment Widgets please use our configurator here: https://app.depay.com/integrations/new
+To easily configure DePay Payment Widgets please use our configurator here:
-For a more low-key technical example/demo page have a look at: https://depayfi.github.io/widgets/dev.bundle.html
+https://app.depay.com/integrations/new
+For a more low-key technical example/demo page have a look at:
+https://depayfi.github.io/widgets/dev.bundle.html
 ## Support
@@ -43,7 +47,7 @@ DePay supports the most popular crypto wallets:
 - [MetaMask](https://metamask.io)
 - [Coinbase Wallet](https://wallet.coinbase.com)
-100+ different wallets via [WalletConnect](https://walletconnect.org), such as:
+100+ additional wallets via [WalletConnect](https://walletconnect.org), such as:
 - [Trust Wallet](https://trustwallet.com)
 - [DeFi Wallet by crypto.com](https://crypto.com/defi-wallet)
 - [1inch Wallet](https://1inch.io/wallet/)
@@ -63,7 +67,7 @@ DePay supports the most popular crypto wallets:
 DePay Payments allows you to accept and perform crypto payments.
-### Preparation (DePay Payments)
+### Preparation
 In order to receive decentralized payments on any blockchain you need to have your own wallet on that particular blockchain first:
@@ -71,11 +75,7 @@ In order to receive decentralized payments on any blockchain you need to have yo
 - [Create an BSC wallet](https://academy.binance.com/en/articles/how-to-get-started-with-binance-smart-chain-bsc)
 - [Create a Polygon wallet](https://wallet.polygon.technology/)
-### Quick start (DePay Payments)
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
+### Quick start
 ```
 DePayWidgets.Payment({
@@ -88,7 +88,7 @@ DePayWidgets.Payment({
 });
 ```
-### Configuration (DePay Payments)
+### Configuration
 You need to pass a configuration object to `DePayWidgets.Payment` which needs to at least contain the `accept` field:
@@ -128,7 +128,7 @@ DePayWidgets.Payment({
 });
 ```
-#### accept (DePay Payments)
+#### accept
 `blockchain`
@@ -159,7 +159,7 @@ If you do not pass an amount, the user will be able to select an amount within t
 The address receiving the payment. Always double check that you've set the right address.
-#### amount (DePay Payments)
+#### amount
 ##### fixed currency amounts
@@ -193,7 +193,7 @@ alongside values for `start`, `min` and `step`.
 `step`: The number by wich to increment/decremten changes to the amount.
-#### receiver (DePay Payments)
+#### receiver
 Payment receivers can either be wallet addresses, but also smart contracts.
@@ -219,7 +219,7 @@ DePayWidgets.Payment({
 Checkout [DePay Web3 Payments](https://github.com/DePayFi/depay-web3-payments#pay-into-smart-contracts) and [DePay Router Smart Contract](https://github.com/DePayFi/depay-evm-router) for more details.
-#### fee (DePay Payments)
+#### fee
 You can configure a fee which will be applied to every payment with it's own dedicated fee receiver address.
@@ -239,7 +239,7 @@ DePayWidgets.Payment({
 });
 ```
-#### fromToken, fromAmount + toToken (DePay Payments)
+#### fromToken, fromAmount + toToken
 In case where you want to configure payments based on the source token + amount, rather than target token and amount, you can pass `fromToken`, `fromAmount` and `toToken` to `accept`.
@@ -259,7 +259,7 @@ DePayWidgets.Payment({
 // This will open a payment widget to send 0.1 BUSD to the receiver, converting it to BNB along the way.
 ```
-#### preload (DePay Payments)
+#### preload
 To optimize initialization speed of the Payment Widget you can preload payment routes as soon as you become aware of the users wallet address.
@@ -286,7 +286,7 @@ DePayWidgets.Payment.preload({
 });
 ```
-#### track (DePay Payments)
+#### track
 `track`
@@ -390,7 +390,7 @@ In case you want to redirect the user to the next step in your system the poll e
 It 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
 as the entire reason for polling is to cover cases where websockets fail and the initial `forward_to` can not be communicated to the client.
-#### connected (DePay Payments)
+#### connected
 `connected`
@@ -408,7 +408,7 @@ DePayWidgets.Payment({
 ```
-#### closed (DePay Payments)
+#### closed
 `closed`
@@ -424,7 +424,7 @@ DePayWidgets.Payment({
 ```
-#### before (DePay Payments)
+#### before
 `before`
@@ -442,7 +442,7 @@ DePayWidgets.Payment({
 })
 ```
-#### sent (DePay Payments)
+#### sent
 `sent`
@@ -459,7 +459,7 @@ DePayWidgets.Payment({
 })
 ```
-#### confirmed (DePay Payments)
+#### confirmed
 `confirmed`
@@ -476,7 +476,7 @@ DePayWidgets.Payment({
 })
 ```
-#### validated (DePay Payments)
+#### validated
 `validated`
@@ -491,7 +491,7 @@ DePayWidgets.Payment({
 })
 ```
-#### failed (DePay Payments)
+#### failed
 `failed`
@@ -509,7 +509,7 @@ DePayWidgets.Payment({
 })
 ```
-#### critical (DePay Payments)
+#### critical
 `critical`
@@ -524,7 +524,7 @@ DePayWidgets.Payment({
 })
 ```
-#### error (DePay Payments)
+#### error
 `error`
@@ -540,7 +540,7 @@ DePayWidgets.Payment({
 })
 ```
-#### providers (DePay Payments)
+#### providers
 Allows to set providers to be used for making RPC calls to the individiual blockchains:
@@ -555,7 +555,7 @@ DePayWidgets.Payment({
 })
 ```
-#### currency (DePay Payments)
+#### currency
 Allows you to enforce displayed local currency (instead of automatically detecting it):
@@ -569,7 +569,7 @@ DePayWidgets.Payment({
 ```
-#### whitelist (DePay Payments)
+#### whitelist
 Allows only the configured tokens to be eligible as means of payment (from the sender):
@@ -597,7 +597,7 @@ DePayWidgets.Payment({
 ```
-#### blacklist (DePay Payments)
+#### blacklist
 Allows to blacklist tokens so that they will not be suggested as means of payment (from the sender):
@@ -632,7 +632,7 @@ DePayWidgets.Payment({
 })
 ```
-#### event (DePay Payments)
+#### event
 `event`
@@ -648,7 +648,7 @@ DePayWidgets.Payment({
 })
 ```
-#### container (DePay Payments)
+#### container
 `container`
@@ -660,7 +660,29 @@ DePayWidgets.Payment({
 })
 ```
-#### style (DePay Payments)
+Make sure to set the css value `position: relative;` for the container element. Otherwise it can not contain the widget.
+React example:
+```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
 `style`
@@ -687,7 +709,7 @@ DePayWidgets.Payment({
 })
 ```
-##### colors (DePay Payments)
+##### colors
 `colors`
@@ -707,7 +729,7 @@ DePayWidgets.Payment({
 })
 ```
-##### fontFamily (DePay Payments)
+##### fontFamily
 `fontFamily`
@@ -722,7 +744,7 @@ DePayWidgets.Payment({
 })
 ```
-##### css (DePay Payments)
+##### css
 `css`
@@ -743,7 +765,7 @@ DePayWidgets.Payment({
 })
 ```
-#### unmount (DePay Payments)
+#### unmount
 `unmount`
@@ -755,7 +777,7 @@ let { unmount } = await DePayWidgets.Payment({})
 unmount()
 ```
-#### recover (DePay Payments)
+#### recover
 `recover`
@@ -778,7 +800,7 @@ A recovered payment still results in a confirmed or failed payment, and also cal
 ```
-#### closable (DePay Payments)
+#### closable
 `closable`
@@ -791,7 +813,7 @@ DePayWidgets.Payment({
 ```
-#### integration (DePay Payments)
+#### integration
 `integration`
@@ -807,7 +829,7 @@ DePayWidgets.Payment({
 DePay 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).
-### Preparation (DePay Sales)
+### Preparation
 In order to sell tokens in a decentralized way, that token needs to have a liquidity pool on a decentralized exchange:
@@ -815,11 +837,7 @@ In order to sell tokens in a decentralized way, that token needs to have a liqui
 - [Create Uniswap v2 Liquidity Pool (Polygon)](https://app.uniswap.org/#/add/v2/ETH?chain=polygon)
 - [Create Pancakeswap Liquidity Pool](https://pancakeswap.finance/add)
-### Quick start (DePay Sales)
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
+### Quick start
 ```javascript
 DePayWidgets.Sale({
@@ -829,7 +847,7 @@ DePayWidgets.Sale({
 });
 ```
-### Configuration (DePay Sales)
+### Configuration
 You need to pass a configuration object to `DePayWidgets.Sale` which needs to at least contain the `sell` field:
@@ -852,7 +870,7 @@ DePayWidgets.Sale({
 });
 ```
-#### sell (DePay Sales)
+#### sell
 `"blockchain": "token"`
@@ -869,7 +887,7 @@ The address of the token you want to sell.
 Use our [sale configurator](https://depay.com/documentation/sales#sale-configurator) in order to simplify configuring this.
-#### amount (DePay Sales)
+#### amount
 When you want to control how the amount selection behaves, pass the `amount` configuration object,
 alongside values for `start`, `min` and `step`.
@@ -891,7 +909,7 @@ DePayWidgets.Sale({
 });
 ```
-#### connected (DePay Sales)
+#### connected
 `connected`
@@ -908,7 +926,7 @@ DePayWidgets.Sale({
 });
 ```
-#### closed (DePay Sales)
+#### closed
 `closed`
@@ -923,7 +941,7 @@ DePayWidgets.Sale({
 });
 ```
-#### sent (DePay Sales)
+#### sent
 `sent`
@@ -940,7 +958,7 @@ DePayWidgets.Sale({
 });
 ```
-#### confirmed (DePay Sales)
+#### confirmed
 `confirmed`
@@ -957,7 +975,7 @@ DePayWidgets.Sale({
 });
 ```
-#### failed (DePay Sales)
+#### failed
 `failed`
@@ -975,7 +993,7 @@ DePayWidgets.Sale({
 });
 ```
-#### critical (DePay Sales)
+#### critical
 `critical`
@@ -990,7 +1008,7 @@ DePayWidgets.Sale({
 });
 ```
-#### error (DePay Sales)
+#### error
 `error`
@@ -1006,7 +1024,7 @@ DePayWidgets.Sale({
 });
 ```
-#### providers (DePay Sales)
+#### providers
 Allows to set providers to be used for making RPC calls to the individiual blockchains:
@@ -1020,7 +1038,7 @@ DePayWidgets.Sale({
 });
 ```
-#### currency (DePay Sales)
+#### currency
 Allows you to enforce displayed local currency (instead of automatically detecting it):
@@ -1032,7 +1050,7 @@ DePayWidgets.Sale({
 });
 ```
-#### blacklist (DePay Sales)
+#### blacklist
 Allows to blacklist tokens so that they will not be suggested as means of payment (from the sender):
@@ -1067,7 +1085,7 @@ DePayWidgets.Sale({
 });
 ```
-#### tokenImage (DePay Sales)
+#### tokenImage
 `tokenImage`
@@ -1081,7 +1099,7 @@ DePayWidgets.Sale({
 });
 ```
-#### style (DePay Sales)
+#### style
 `style`
@@ -1109,7 +1127,7 @@ DePayWidgets.Sale({
 });
 ```
-##### colors (DePay Sales)
+##### colors
 `colors`
@@ -1129,7 +1147,7 @@ DePayWidgets.Sale({
 });
 ```
-##### fontFamily (DePay Sales)
+##### fontFamily
 `fontFamily`
@@ -1144,7 +1162,7 @@ DePayWidgets.Sale({
 });
 ```
-##### css (DePay Sales)
+##### css
 `css`
@@ -1165,7 +1183,7 @@ DePayWidgets.Sale({
 });
 ```
-#### unmount (DePay Sales)
+#### unmount
 `unmount`
@@ -1177,7 +1195,7 @@ let { unmount } = await DePayWidgets.Sale({})
 unmount()
 ```
-#### closable (DePay Sales)
+#### closable
 `closable`
@@ -1190,7 +1208,7 @@ DePayWidgets.Sale({
 ```
-#### integration (DePay Sales)
+#### integration
 `integration`
@@ -1206,18 +1224,14 @@ DePayWidgets.Sale({
 DePay Donations allows you to accept donation payments made with thousands of different crypto currencies.
-### Preparation (DePay Donations)
+### Preparation
 In order to receive decentralized donation payments on any blockchain you need to have your own wallet on that particular blockchain first:
 - [Create an Ethereum wallet](https://ethereum.org/en/wallets/)
 - [Create an BSC wallet](https://academy.binance.com/en/articles/how-to-get-started-with-binance-smart-chain-bsc)
-### Quick start (DePay Donations)
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
+### Quick start
 ```javascript
 DePayWidgets.Donation({
@@ -1229,7 +1243,7 @@ DePayWidgets.Donation({
 });
 ```
-### Configuration (DePay Donations)
+### Configuration
 You need to pass a configuration object to `DePayWidgets.Donation` which needs to at least contain the `accept` field:
@@ -1259,7 +1273,7 @@ DePayWidgets.Donation({
 });
 ```
-#### accept (DePay Donations)
+#### accept
 `blockchain`
@@ -1280,7 +1294,7 @@ Use our [donation configurator](https://depay.com/documentation/donations#donati
 The address receiving the donation. Always double check that you've set the right address.
-#### amount (DePay Donations)
+#### amount
 When you want to control how the amount selection behaves, pass the `amount` configuration object,
 alongside values for `start`, `min` and `step`.
@@ -1291,7 +1305,7 @@ alongside values for `start`, `min` and `step`.
 `step`: The number by wich to increment/decremten changes to the amount.
-#### connected (DePay Donations)
+#### connected
 `connected`
@@ -1308,7 +1322,7 @@ DePayWidgets.Donation({
 });
 ```
-#### fee (DePay Donations)
+#### fee
 You can configure a fee which will be applied to every payment with it's own dedicated fee receiver address.
@@ -1328,7 +1342,7 @@ DePayWidgets.Donation({
 });
 ```
-#### closed (DePay Donations)
+#### closed
 `closed`
@@ -1343,7 +1357,7 @@ DePayWidgets.Donation({
 });
 ```
-#### sent (DePay Donations)
+#### sent
 `sent`
@@ -1360,7 +1374,7 @@ DePayWidgets.Donation({
 });
 ```
-#### confirmed (DePay Donations)
+#### confirmed
 `confirmed`
@@ -1377,7 +1391,7 @@ DePayWidgets.Donation({
 });
 ```
-#### validated (DePay Donations)
+#### validated
 `validated`
@@ -1392,7 +1406,7 @@ DePayWidgets.Payment({
 })
 ```
-#### failed (DePay Donations)
+#### failed
 `failed`
@@ -1410,7 +1424,7 @@ DePayWidgets.Donation({
 });
 ```
-#### critical (DePay Donations)
+#### critical
 `critical`
@@ -1425,7 +1439,7 @@ DePayWidgets.Donation({
 });
 ```
-#### error (DePay Donations)
+#### error
 `error`
@@ -1441,7 +1455,7 @@ DePayWidgets.Donation({
 });
 ```
-#### providers (DePay Donations)
+#### providers
 Allows to set providers to be used for making RPC calls to the individiual blockchains:
@@ -1455,7 +1469,7 @@ DePayWidgets.Donation({
 });
 ```
-#### currency (DePay Donations)
+#### currency
 Allows you to enforce displayed local currency (instead of automatically detecting it):
@@ -1467,7 +1481,7 @@ DePayWidgets.Donation({
 });
 ```
-#### whitelist (DePay Donations)
+#### whitelist
 Allows only the configured tokens to be eligible as means of payment (from the sender):
@@ -1493,7 +1507,7 @@ DePayWidgets.Donation({
 })
 ```
-#### blacklist (DePay Donations)
+#### blacklist
 Allows to blacklist tokens so that they will not be suggested as means of payment (from the sender):
@@ -1528,7 +1542,7 @@ DePayWidgets.Donation({
 })
 ```
-#### container (DePay Donations)
+#### container
 `container`
@@ -1540,7 +1554,29 @@ DePayWidgets.Dontaion({
 })
 ```
-#### style (DePay Donations)
+Make sure to set the css value `position: relative;` for the container element. Otherwise it can not contain the widget.
+React example:
+```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
 `style`
@@ -1568,7 +1604,7 @@ DePayWidgets.Donation({
 });
 ```
-##### colors (DePay Donations)
+##### colors
 `colors`
@@ -1588,7 +1624,7 @@ DePayWidgets.Donation({
 });
 ```
-##### fontFamily (DePay Donations)
+##### fontFamily
 `fontFamily`
@@ -1603,7 +1639,7 @@ DePayWidgets.Donation({
 });
 ```
-##### css (DePay Donations)
+##### css
 `css`
@@ -1624,7 +1660,7 @@ DePayWidgets.Donation({
 });
 ```
-#### unmount (DePay Donations)
+#### unmount
 `unmount`
@@ -1636,7 +1672,7 @@ let { unmount } = await DePayWidgets.Donation({})
 unmount()
 ```
-#### closable (DePay Donations)
+#### closable
 `closable`
@@ -1649,7 +1685,7 @@ DePayWidgets.Donation({
 ```
-#### integration (DePay Donations)
+#### integration
 `integration`
@@ -1661,23 +1697,19 @@ DePayWidgets.Donation({
 })
 ```
-## DePay Connect (DePay Donations)
+## DePay Connect
 DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.
 Returns connected `account`, `accounts` and `wallet` in return.
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
 ```javascript
 let { account, accounts, wallet }  = await DePayWidgets.Connect()
 ```
 See [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets) for more details about the returned `wallet`.
-### Rejections (DePay Donations)
+### Rejections
 1. Rejects if user just closes the dialog without connecting any wallet:
@@ -1695,10 +1727,6 @@ DePay Login allows you to perform web3 wallet logins with ease.
 Returns `account` if succesfully signed and recovered log in message.
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
 ```javascript
 let message = "Sign to login"
 let account = await DePayWidgets.Login({ message })
@@ -1754,7 +1782,7 @@ DePayWidgets.Login({ message, recover: ({ message, signature })=>{
 })
 ```
-### Rejections (DePay Login)
+### Rejections
 1. Rejects if user just closes the dialog without connecting any wallet:
@@ -1772,10 +1800,6 @@ DePay Select widget allows you to open a dialog that allows you to select things
 Resolves with what has been selected by the user:
-```
-<script defer async src="https://integrate.depay.com/widgets/v7.js"/>
-```
 ```javascript
 let token = await DePayWidgets.Select({ what: 'token' })