QuickBytes web payment integration for micropayments
npm install @quickbytes-exchange/webpayA JavaScript/TypeScript library for integrating QuickBytes micropayments into web applications. This library provides both a programmatic API and a customizable web component for handling micropayments through the QuickBytes payment system.
Visit quickbytes.exchange to learn more about QuickBytes micropayments.
- Easy-to-use payment API for handling micropayments
- Customizable web component () for quick integration
- TypeScript support with full type definitions
- Supports both UMD and ES modules
- Built-in validation and error handling
- Secure payment flow using popup windows
- Comprehensive payment status tracking and verification
- Supports light/dark themes and multiple size options for the payment button
``bash`
npm install @quickbytes-exchange/webpay
`html
payment-address="YOUR_ALGORAND_ADDRESS">
`
`javascript
import { QuickBytesPayment } from '@quickbytes-exchange/webpay';
const payment = new QuickBytesPayment();
payment.createPayment({
cents: 15,
payment_address: 'YOUR_ALGORAND_ADDRESS',
payee_name: 'Store Name',
item_name: 'Product Name',
onSuccess: (response) => {
console.log('Payment successful:', response);
},
onError: (error) => {
console.error('Payment failed:', error);
},
onClose: () => {
console.log('Payment window closed');
}
});
`
| Attribute | Type | Required | Description |
|-----------|------|----------|-------------|
| cents | number | Yes | Amount in cents to charge |
| payment-address | string | Yes | Algorand address to receive payment |
| payee-name | string | No | Name of the payee |
| item-name | string | No | Name of the item being purchased |
| size | 'small' \| 'default' \| 'large' | No | Button size variant |
| theme | 'default' \| 'dark' \| 'light' | No | Button color theme |
| disabled | boolean | No | Disable the button |
| testmode | boolean | No | Enable test mode for development |
The following attributes are only for use in development or custom environments:
| Attribute | Type | Description |
|-----------|------|-------------|
| app-url | string | Custom payment window URL |
| api-url | string | Custom API endpoint URL |
The web component emits the following events:
- quickbytes-success: Fired when payment is successfulquickbytes-error
- : Fired when payment failsquickbytes-closed
- : Fired when payment window is closed
You can configure the QuickBytes payment system with various options:
`javascript`
const payment = new QuickBytesPayment({
baseUrl: 'https://custom.payment.url', // Custom payment window URL
apiUrl: 'https://custom.api.url', // Custom API endpoint
popupWidth: 600, // Custom popup width
popupHeight: 800, // Custom popup height
});
`bashInstall dependencies
npm install
Browser Support
This library supports all modern browsers that implement the Web Components v1 specification and the
window.crypto.randomUUID()` API.MIT
For questions and support:
- Open an issue on our GitHub Issue Tracker
- Check our GitHub Discussions for community help
- Review existing issues and pull requests for solutions to common problems