Current Behavior:
On the creator’s website, there is no clear feedback mechanism for the payer. After a payment, the button only shows the TXID with a link to whatsonchain.com.
Problem
This minimal feedback can be confusing. Payees don’t know if their payment succeeded beyond the TXID link, and there is no guidance if they attempt invalid actions (e.g., reusing a single-use button).
Proposed Solution
Introduce toast notifications to provide consistent, user-friendly feedback:
✅ Show a success toast when a payment completes.
⚠️ Show a warning toast if a payee attempts to use a single-use button again.
Benefits
Improves payee experience with clear, real-time feedback.
Maintains consistency with other parts of the Gateway UX.
Implementation details:
src/components/PayButton/index.tsx is used to generate pay.js which is pulled in here:
<script src="http://localhost:3001/pay.js" defer></script> (dev)
or
<script src="https://dental-likelihood-sunset-wellness.trycloudflare.com/pay.js" defer></script> (prod)
Current Behavior:
On the creator’s website, there is no clear feedback mechanism for the payer. After a payment, the button only shows the TXID with a link to whatsonchain.com.
Problem
This minimal feedback can be confusing. Payees don’t know if their payment succeeded beyond the TXID link, and there is no guidance if they attempt invalid actions (e.g., reusing a single-use button).
Proposed Solution
Introduce toast notifications to provide consistent, user-friendly feedback:
✅ Show a success toast when a payment completes.
Benefits
Improves payee experience with clear, real-time feedback.
Maintains consistency with other parts of the Gateway UX.
Implementation details:
src/components/PayButton/index.tsxis used to generatepay.jswhich is pulled in here:<script src="http://localhost:3001/pay.js" defer></script>(dev)or
<script src="https://dental-likelihood-sunset-wellness.trycloudflare.com/pay.js" defer></script>(prod)