@depay/widgets 7.14.2 → 7.14.3

package/README.md

@@ -3,7 +3,7 @@
 You can either load the `@depay/widgets` package via CDN:
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"></script>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"></script>
 ```
 
 or you install `@depay/widgets` via the package manager of your choice and ship it as part of your application bundle:
@@ -74,7 +74,7 @@ In order to receive decentralized payments on any blockchain you need to have yo
 ### Quick start (DePay Payments)
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```
@@ -818,7 +818,7 @@ In order to sell tokens in a decentralized way, that token needs to have a liqui
 ### Quick start (DePay Sales)
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```javascript
@@ -1216,7 +1216,7 @@ In order to receive decentralized donation payments on any blockchain you need t
 ### Quick start (DePay Donations)
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```javascript
@@ -1642,7 +1642,7 @@ DePay Connect allows you to have your users connect their crypto wallet to your
 Returns connected `account`, `accounts` and `wallet` in return. 
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```javascript
@@ -1670,7 +1670,7 @@ DePay Login allows you to perform web3 wallet logins with ease.
 Returns `account` if succesfully signed and recovered log in message.
 
 ```
-<script src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```javascript
@@ -1747,7 +1747,7 @@ 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 src="https://integrate.depay.fi/widgets/v7.js"/>
+<script defer async src="https://integrate.depay.fi/widgets/v7.js"/>
 ```
 
 ```javascript
@@ -1764,6 +1764,44 @@ let token = await DePayWidgets.Select({ what: 'token' })
 // }
 ```
 
+## Examples
+
+### React
+
+#### DePay Payments
+
+```javascript
+
+import React from 'react'
+import DePayWidgets from '@depay/widgets'
+
+export default (props)=>{
+
+  let unmount
+
+  const openPaymentWidget = ()=>{
+    (
+      { unmount } = 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>
+  )
+}
+
+```
+
+
 ## Development
 
 ### Quick start