@depay/widgets 8.0.7 → 9.0.0

package/README.md

@@ -22,6 +22,22 @@ and load the DePayWidgets package wherever you need it:
 import DePayWidgets from '@depay/widgets'
 ```
 
+Make sure you install DePay widgets peer dependencies, too, in case your project does not have them installed yet:
+
+```
+yarn add ethers react react-dom
+```
+
+```
+npm install ethers react react-dom --save
+```
+
+## Server-side rendering
+
+Make 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.
+
+Next.js: https://dev.to/elisabethleonhardt/how-to-use-client-side-only-packages-with-ssr-in-gatsby-and-nextjs-3pfa
+
 ## Demo
 
 To easily configure DePay Payment Widgets please use our configurator here:
@@ -366,6 +382,28 @@ Make sure you read the [Payment Tracking API](https://depay.com/documentation/ap
 
 Payment 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.
 
+##### Asynchronous Validation
+
+For user flows where you can release the user immediatelly, we recommend performing payment validation asynchronously as in certain situation in can take up to multiple minutes to validate a payment:
+
+You can configure the widget to track/validate the payment asynchronously:
+
+```javascript
+DePayWidgets.Payment({
+
+  track: {
+    endpoint: '/track',
+    async: true
+  }
+})
+```
+
+Which will release the user right after the payment transaction has been confirmed on the user's machine.
+
+It still tracks and validates the payment asynchronously (in the background) and calls back your endpoints as soon as it has been validated.
+
+This allows you to release the user immediately, showing him some confirmation and reconfirming his payment in an asynchronous step (like a notification or email).
+
 ##### Polling
 
 In 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.
@@ -464,7 +502,7 @@ Allows you to stop the payment if this methods returns false.
 ```javascript
 DePayWidgets.Payment({
 
-  before: (payment)=> {
+  before: async (payment)=> {
     alert('Something went wrong')
     return false // stops payment
   }
@@ -661,22 +699,6 @@ DePayWidgets.Payment({
 })
 ```
 
-#### event
-
-`event`
-
-If set to `ifSwapped`, emits a [payment event](https://github.com/depayfi/depay-evm-router#depayrouterv1paymentevent02) if payments are routed through [router smart contract](https://github.com/depayfi/depay-evm-router).
-Payments are routed through the DePayPaymentRouter if swapping tokens is required in order to perform the payment. If payments are not routed through the router, e.g. direct transfer, no event is emited if `event` is set to `ifSwapped`.
-
-
-```javascript
-DePayWidgets.Payment({
-  
-  event: 'ifSwapped'
-
-})
-```
-
 #### container
 
 `container`
@@ -1948,5 +1970,5 @@ test:cypress:debug
 Test and debug single cypress file:
 
 ```
-yarn test:cypress:debug --spec "cypress/e2e/Payment/amount.js"
+yarn test:cypress:debug --spec "cypress/e2e/Payment/track.js"
 ```