@astropay/payments-lib 0.0.6

package/README.md

@@ -0,0 +1,171 @@
+# AstroPay Payments Library
+
+![AstroPay](https://getapp.astropay.com/img/astropay/2023/logo-black.svg)
+
+A TypeScript component library for integrating AstroPay payment processing capabilities into web applications. This library provides pre-built, customizable payment interface components that developers can easily incorporate into their websites or applications.
+
+## 📋 Table of Contents
+
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Components](#components)
+  - [AstropayPaymentComponent](#astropaypaymentcomponent)
+- [Styling & Theming](#styling--theming)
+  - [Available Themes](#available-themes)
+  - [Custom Styling](#custom-styling)
+- [Internationalization](#internationalization)
+
+## 📦 Installation
+
+### Prerequisites
+
+#### Dependencies
+
+This library requires the following peer dependencies:
+
+- @emotion/css: ^11.13.5
+- axios: ^1.7.9
+- bowser: ^2.11.0
+- i18next: ^24.2.2
+- qrcode: ^1.5.4
+
+#### DOM Requirements
+
+Before using the AstroPay Payment components, ensure your HTML document includes container elements where the components will be rendered. For example, to use the basic payment component, you need to have an element with `id="payment-container"` in your DOM:
+
+```html
+<div id="payment-container"></div>
+```
+
+The library will render the payment interface inside this container element.
+
+### NPM
+
+```bash
+npm install astropay-payments-lib
+```
+
+### Yarn
+
+```bash
+yarn add astropay-payments-lib
+```
+
+## 🚀 Basic Usage
+
+Initialize the library with your API token and optional configuration:
+
+```typescript
+import AstropayPaymentsLib, { AstropayPaymentComponent } from 'astropay-payments-lib';
+
+// Initialize the library
+AstropayPaymentsLib.init('your-api-token', {
+  theme: 'light', // or 'dark'
+  language: 'en', // or 'es', 'pt'
+  currencyMode: 'iso', // or 'symbol'
+});
+
+// Use the payment component in your application
+// Note: Make sure an HTML element with id="payment-container" exists in your DOM before running this code
+const paymentElement = document.getElementById('payment-container');
+const payment = new AstropayPaymentComponent({
+  amount: 100,
+  currency: 'USD',
+});
+
+paymentElement.appendChild(payment.element);
+```
+
+## 🧩 Components
+
+### AstropayPaymentComponent
+
+The main component for rendering a payment interface.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| amount | number | Yes | The payment amount |
+| currency | string | Yes | The currency code (e.g., 'USD') |
+
+#### Example
+
+```typescript
+import { AstropayPaymentComponent } from 'astropay-payments-lib';
+
+const paymentComponent = new AstropayPaymentComponent({
+  amount: 100,
+  currency: 'USD',
+});
+
+// Note: Make sure an HTML element with id="payment-container" exists in your DOM before running this code
+document.getElementById('payment-container').appendChild(paymentComponent.element);
+```
+
+## 🎨 Styling & Theming
+
+The library supports customizable theming through the initialization configuration.
+
+### Available Themes
+
+The library comes with two built-in themes:
+
+- `light` (default)
+- `dark`
+
+You can specify the theme during initialization:
+
+```typescript
+AstropayPaymentsLib.init('your-api-token', {
+  theme: 'dark',
+});
+```
+
+### Custom Styling
+
+You can customize the styling by providing a `styles` object in the initialization configuration:
+
+```typescript
+AstropayPaymentsLib.init('your-api-token', {
+  styles: {
+    primaryColor: '#FF5500',
+    secondaryColor: '#00AAFF',
+    backgroundColor: '#FFFFFF',
+    textPrimaryColor: '#333333',
+    textSecondaryColor: '#666666',
+    fontFamily: 'Arial, sans-serif',
+    width: 500,
+  },
+});
+```
+
+#### Available Style Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| primaryColor | string | Primary brand color |
+| secondaryColor | string | Secondary brand color |
+| backgroundColor | string | Background color |
+| textPrimaryColor | string | Primary text color |
+| textSecondaryColor | string | Secondary text color |
+| fontFamily | string | Font family |
+| width | number | Component width in pixels |
+
+## 🌐 Internationalization
+
+The library supports multiple languages through the i18next internationalization framework.
+
+### Available Languages
+
+- English (`en`) - Default
+- Spanish (`es`)
+- Portuguese (`pt`)
+
+You can specify the language during initialization:
+
+```typescript
+AstropayPaymentsLib.init('your-api-token', {
+  language: 'es',
+});
+```