QuickBytes WebPay

A 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.

Features

- 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

Installation

``bash
npm install @quickbytes-exchange/webpay
`

Quick Start

$3

`html








cents="25"
payment-address="YOUR_ALGORAND_ADDRESS">





`

$3

`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');
}
});
`

Web Component Attributes

| 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 |

$3

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 |

Events

The web component emits the following events:

- quickbytes-success: Fired when payment is successful
- quickbytes-error: Fired when payment fails
- quickbytes-closed: Fired when payment window is closed

Configuration

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
});
`

Development

`bash


Install dependencies

npm install

Run tests

npm test

Build the library

npm run build

Run linting

npm run lint

Format code

npm run format
`

Browser Support

This library supports all modern browsers that implement the Web Components v1 specification and the window.crypto.randomUUID()` API.

License

MIT

Support

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