@astropay/payments-lib 0.0.10 → 0.0.11

package/README.md

@@ -3,6 +3,7 @@
 
 ![AstroPay](https://getapp.astropay.com/img/astropay/2023/logo-black.svg)
 </a>
+
 </div>
 
 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.
@@ -11,6 +12,7 @@ AstroPay's official frontend library that allows you to easily embed customizabl
 
 [![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
@@ -30,7 +32,7 @@ AstroPay's official frontend library that allows you to easily embed customizabl
   - [Yarn](#yarn)
 - [🚀 Basic Usage](#-basic-usage)
 - [🧩 Components](#-components)
-  - [AstroPayPaymentComponent](#astropaypaymentcomponent)
+  - [AstroPayFullCheckout](#astropayfullcheckout)
     - [Props](#props)
     - [Example](#example)
 - [🎨 Styling \& Theming](#-styling--theming)
@@ -81,10 +83,10 @@ yarn add @astropay/payments-lib
 Initialize the library with your API token and optional configuration:
 
 ```typescript
-import AstroPayPaymentsLib, { AstroPayPaymentComponent } from '@astropay/payments-lib';
+import AstroPayCore, { AstroPayFullCheckout } from '@astropay/payments-lib';
 
 // Initialize the library
-AstroPayPaymentsLib.init('app-id', {
+AstroPayCore.init('app-id', {
   environment: 'production', // or 'sandbox'
   theme: 'light', // or 'dark'
   language: 'en', // or 'es', 'pt'
@@ -94,7 +96,7 @@ AstroPayPaymentsLib.init('app-id', {
 // 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 AstroPayFullCheckout({
   amount: 100,
   currency: 'USD',
   country: 'BR',
@@ -105,26 +107,26 @@ paymentElement.appendChild(payment.element);
 
 ## 🧩 Components
 
-### AstroPayPaymentComponent
+### AstroPayFullCheckout
 
 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') |
-| 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`) |
+| Prop            | Type    | Required | Description                                                  |
+| --------------- | ------- | -------- | ------------------------------------------------------------ |
+| 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 { AstroPayFullCheckout } from '@astropay/payments-lib';
 
-const paymentComponent = new AstroPayPaymentComponent({
+const fullCheckoutComponent = new AstroPayFullCheckout({
   amount: 100,
   currency: 'USD',
   country: 'US',
@@ -134,7 +136,7 @@ const paymentComponent = new AstroPayPaymentComponent({
 });
 
 // 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);
+document.getElementById('payment-container').appendChild(fullCheckoutComponent.element);
 ```
 
 ## 🎨 Styling & Theming
@@ -151,7 +153,7 @@ The library comes with two built-in themes:
 You can specify the theme during initialization:
 
 ```typescript
-AstroPayPaymentsLib.init('app-id', {
+AstroPayCore.init('app-id', {
   theme: 'dark',
   environment: 'production', // or 'sandbox'
   language: 'en',
@@ -164,7 +166,7 @@ AstroPayPaymentsLib.init('app-id', {
 You can customize the styling by providing a `styles` object in the initialization configuration:
 
 ```typescript
-AstroPayPaymentsLib.init('app-id', {
+AstroPayCore.init('app-id', {
   styles: {
     primaryColor: '#FF5500',
     secondaryColor: '#00AAFF',
@@ -179,15 +181,15 @@ AstroPayPaymentsLib.init('app-id', {
 
 #### 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 |
+| 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
 
@@ -202,7 +204,7 @@ The library supports multiple languages through the i18next internationalization
 You can specify the language during initialization:
 
 ```typescript
-AstroPayPaymentsLib.init('app-id', {
+AstroPayCore.init('app-id', {
   language: 'es',
 });
 ```