@astropay/payments-lib 0.0.6 → 0.0.7

package/README.md

@@ -1,19 +1,44 @@
-# AstroPay Payments Library
+<div align="center">
+<a  href="http://www.astropay.com">
 
 ![AstroPay](https://getapp.astropay.com/img/astropay/2023/logo-black.svg)
+</a>
+</div>
 
-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.
+AstroPay's official frontend library that allows you to easily embed customizable and secure payment components into your website or e-commerce platform. It supports seamless international transactions, theming, localization, and real-time payment processing — all with minimal setup.
+
+<div align="center">
+
+[![NPM version](https://img.shields.io/npm/v/@astropay/payments-lib/latest.svg)](https://www.npmjs.com/package/@astropay/payments-lib)
+[![NPM downloads](https://img.shields.io/npm/dm/@astropay/payments-lib.svg)](https://www.npmjs.com/package/@astropay/payments-lib)
+</div>
+
+## 🚀 Quick Links
+
+- 🧪 [Live Demo](https://demo.astropay.com)
+- 📘 [Full Documentation](https://developers.astropay.com/docs/payments-library)
 
 ## 📋 Table of Contents
 
-- [Installation](#installation)
-- [Basic Usage](#basic-usage)
-- [Components](#components)
-  - [AstropayPaymentComponent](#astropaypaymentcomponent)
-- [Styling & Theming](#styling--theming)
+- [🚀 Quick Links](#-quick-links)
+- [📋 Table of Contents](#-table-of-contents)
+- [📦 Installation](#-installation)
+  - [Prerequisites](#prerequisites)
+    - [Dependencies](#dependencies)
+    - [DOM Requirements](#dom-requirements)
+  - [NPM](#npm)
+  - [Yarn](#yarn)
+- [🚀 Basic Usage](#-basic-usage)
+- [🧩 Components](#-components)
+  - [AstroPayPaymentComponent](#astropaypaymentcomponent)
+    - [Props](#props)
+    - [Example](#example)
+- [🎨 Styling \& Theming](#-styling--theming)
   - [Available Themes](#available-themes)
   - [Custom Styling](#custom-styling)
-- [Internationalization](#internationalization)
+    - [Available Style Properties](#available-style-properties)
+- [🌐 Internationalization](#-internationalization)
+  - [Available Languages](#available-languages)
 
 ## 📦 Installation
 
@@ -42,13 +67,13 @@ The library will render the payment interface inside this container element.
 ### NPM
 
 ```bash
-npm install astropay-payments-lib
+npm install @astropay/payments-lib
 ```
 
 ### Yarn
 
 ```bash
-yarn add astropay-payments-lib
+yarn add @astropay/payments-lib
 ```
 
 ## 🚀 Basic Usage
@@ -56,10 +81,11 @@ yarn add astropay-payments-lib
 Initialize the library with your API token and optional configuration:
 
 ```typescript
-import AstropayPaymentsLib, { AstropayPaymentComponent } from 'astropay-payments-lib';
+import AstroPayPaymentsLib, { AstroPayPaymentComponent } from '@astropay/payments-lib';
 
 // Initialize the library
-AstropayPaymentsLib.init('your-api-token', {
+AstroPayPaymentsLib.init('app-id', {
+  environment: 'production', // or 'sandbox'
   theme: 'light', // or 'dark'
   language: 'en', // or 'es', 'pt'
   currencyMode: 'iso', // or 'symbol'
@@ -68,9 +94,10 @@ AstropayPaymentsLib.init('your-api-token', {
 // 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({
+const payment = new AstroPayPaymentComponent({
   amount: 100,
   currency: 'USD',
+  country: 'BR',
 });
 
 paymentElement.appendChild(payment.element);
@@ -78,7 +105,7 @@ paymentElement.appendChild(payment.element);
 
 ## 🧩 Components
 
-### AstropayPaymentComponent
+### AstroPayPaymentComponent
 
 The main component for rendering a payment interface.
 
@@ -88,15 +115,22 @@ The main component for rendering a payment interface.
 |------|------|----------|-------------|
 | amount | number | Yes | The payment amount |
 | currency | string | Yes | The currency code (e.g., 'USD') |
+| country | string | Yes | The country code (e.g., 'BR', 'US') |
+| showTitle | boolean | No | Whether to show the component title (defaults to `true`) |
+| showDescription | boolean | No | Whether to show the payment description (defaults to `true`) |
 
 #### Example
 
 ```typescript
-import { AstropayPaymentComponent } from 'astropay-payments-lib';
+import { AstroPayPaymentComponent } from '@astropay/payments-lib';
 
-const paymentComponent = new AstropayPaymentComponent({
+const paymentComponent = new AstroPayPaymentComponent({
   amount: 100,
   currency: 'USD',
+  country: 'US',
+  // Optional props
+  showTitle: true,
+  showDescription: true,
 });
 
 // Note: Make sure an HTML element with id="payment-container" exists in your DOM before running this code
@@ -117,8 +151,11 @@ The library comes with two built-in themes:
 You can specify the theme during initialization:
 
 ```typescript
-AstropayPaymentsLib.init('your-api-token', {
+AstroPayPaymentsLib.init('app-id', {
   theme: 'dark',
+  environment: 'production', // or 'sandbox'
+  language: 'en',
+  currencyMode: 'iso', // or 'symbol'
 });
 ```
 
@@ -127,7 +164,7 @@ AstropayPaymentsLib.init('your-api-token', {
 You can customize the styling by providing a `styles` object in the initialization configuration:
 
 ```typescript
-AstropayPaymentsLib.init('your-api-token', {
+AstroPayPaymentsLib.init('app-id', {
   styles: {
     primaryColor: '#FF5500',
     secondaryColor: '#00AAFF',
@@ -165,7 +202,7 @@ The library supports multiple languages through the i18next internationalization
 You can specify the language during initialization:
 
 ```typescript
-AstropayPaymentsLib.init('your-api-token', {
+AstroPayPaymentsLib.init('app-id', {
   language: 'es',
 });
 ```