Skip to content

Commit 7f1756c

Browse files
committed
update readme
1 parent 74bee86 commit 7f1756c

File tree

1 file changed

+131
-3
lines changed

1 file changed

+131
-3
lines changed

README.md

Lines changed: 131 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,6 @@ Forwards the payload to your backend for dynamic payment setup, like:
146146
> [!IMPORTANT]
147147
> Unmanaged configurations do not provide any callbacks for server-side actions or integrations. They are limited to initiating and executing payments only. If you need callbacks for your integrations, use [managed integrations](https://depay.com/docs/payments/integrate/widget).
148148
149-
> [!CAUTION]
150-
> Client-side callbacks and client-side flow management are not recommended. Payment flows can involve device handovers (e.g., desktop to mobile) or app-to-app transitions on mobile, which break client-side control. For this reason, the widget does not provide client-side callbacks for flow handling. Instead, you can manage and control the user flow through [managed integrations](https://depay.com/docs/payments/integrate/widget).
151-
152149
```javascript
153150
DePayWidgets.Payment({
154151
accept: [{
@@ -637,6 +634,137 @@ let { unmount } = await DePayWidgets.Payment({})
637634
unmount()
638635
```
639636

637+
### Client Side Callbacks
638+
639+
> [!CAUTION]
640+
> Client-side callbacks and client-side flow management are not recommended. Payment flows can involve device handovers (e.g., desktop to mobile) or app-to-app transitions on mobile, which break client-side control. In case of failed transactions, the widget provides a built-in way for users to retry their payments, so you don’t need to implement this functionality yourself. For this reason, the widget does not provide client-side callbacks for flow handling. Instead, you can manage and control the user flow through [managed integrations](https://depay.com/docs/payments/integrate/widget).
641+
642+
Despite the previous warning, the widget still offers the following callbacks:
643+
644+
#### before
645+
646+
`before`
647+
648+
A function that will be called before the payment is handed over to the wallet.
649+
650+
Allows you to stop the payment if this method returns false.
651+
652+
```javascript
653+
DePayWidgets.Payment({
654+
655+
before: async (payment, from)=> {
656+
alert('Something went wrong')
657+
return false // stops payment
658+
}
659+
})
660+
```
661+
662+
#### sent
663+
664+
`sent`
665+
666+
A function that will be called once the payment has been sent to the network (but still needs to be mined/confirmed).
667+
668+
The 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)
669+
670+
```javascript
671+
DePayWidgets.Payment({
672+
673+
sent: (transaction)=> {
674+
// called when payment transaction has been sent to the network
675+
}
676+
})
677+
```
678+
679+
#### succeeded
680+
681+
`succeeded`
682+
683+
A function that will be called once the payment has succeeded on the network (checked client-side).
684+
685+
The 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)
686+
687+
```javascript
688+
DePayWidgets.Payment({
689+
690+
succeeded: (transaction, payment)=> {
691+
// called when payment transaction has been confirmed once by the network
692+
// might be called multiple times
693+
694+
// "payment" contains information about what the user selected as payment
695+
}
696+
})
697+
```
698+
699+
#### validated
700+
701+
`validated`
702+
703+
A function that will be called once the payment has been validated by DePay.
704+
705+
```javascript
706+
DePayWidgets.Payment({
707+
708+
validated: (successful, transaction, payment)=> {
709+
// successful (true or false)
710+
711+
// "payment" contains information about what the user selected as payment
712+
}
713+
})
714+
```
715+
716+
#### failed
717+
718+
`failed`
719+
720+
A function that will be called if the payment execution failed on the blockchain (after it has been sent/submitted).
721+
722+
The 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)
723+
724+
```javascript
725+
DePayWidgets.Payment({
726+
727+
failed: (transaction, error, payment)=> {
728+
// called when payment transaction failed on the blockchain
729+
// handled by the widget, no need to display anything
730+
// might be called multiple times
731+
732+
// "payment" contains information about what the user selected as payment
733+
}
734+
})
735+
```
736+
737+
#### critical
738+
739+
`critical`
740+
741+
A function that will be called if the widget throws a critical internal error that it can't handle and display on its own:
742+
743+
```javascript
744+
DePayWidgets.Payment({
745+
746+
critical: (error)=> {
747+
// render and display the error with error.toString()
748+
}
749+
})
750+
```
751+
752+
#### error
753+
754+
`error`
755+
756+
A 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:
757+
758+
```javascript
759+
DePayWidgets.Payment({
760+
761+
error: (error)=> {
762+
// maybe do some internal tracking with error.toString()
763+
// no need to display anything as widget takes care of displaying the error
764+
}
765+
})
766+
```
767+
640768
## Connect Widget
641769

642770
DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.

0 commit comments

Comments
 (0)