@astropay/payments-lib 0.0.10 → 0.0.12

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,9 +32,12 @@ 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)
+  - [AstroPayPayment](#astropaypayment)
+    - [Props](#props-1)
+    - [Example](#example-1)
 - [🎨 Styling \& Theming](#-styling--theming)
   - [Available Themes](#available-themes)
   - [Custom Styling](#custom-styling)
@@ -81,10 +86,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'
@@ -92,49 +97,109 @@ 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 paymentComponent = new AstroPayFullCheckout({
   amount: 100,
   currency: 'USD',
   country: 'BR',
+  onSuccess: () => console.log('Payment successful'),
+  onError: () => console.error('Payment failed')
 });
 
-paymentElement.appendChild(payment.element);
+// Render the component into a container element
+const paymentElement = document.getElementById('payment-container');
+paymentComponent.render(paymentElement);
+
+// Later, when you want to clean up
+// paymentComponent.destroy();
 ```
 
 ## 🧩 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`) |
+| onSuccess       | () => void | No       | Callback function called when payment is successful          |
+| onError         | () => void | No       | Callback function called when payment fails                  |
 
 #### 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',
   // Optional props
   showTitle: true,
   showDescription: true,
+  onSuccess: () => {
+    console.log('Payment was successful');
+    // Handle successful payment, e.g., redirect to success page
+  },
+  onError: () => {
+    console.error('Payment failed');
+    // Handle payment failure
+  }
 });
 
-// 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);
+// Render the component into a container element
+const container = document.getElementById('payment-container');
+fullCheckoutComponent.render(container);
+
+// Later, when you want to clean up (e.g., on page navigation)
+// fullCheckoutComponent.destroy();
+```
+
+### AstroPayPayment
+
+A streamlined payment component focused on AstroPay's native payment method.
+
+#### 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')                 |
+| onSuccess | () => void | No       | Callback function called when payment is successful |
+| onError   | () => void | No       | Callback function called when payment fails         |
+
+#### Example
+
+```typescript
+import { AstroPayPayment } from '@astropay/payments-lib';
+
+const paymentComponent = new AstroPayPayment({
+  amount: 100,
+  currency: 'USD',
+  country: 'BR',
+  onSuccess: () => {
+    console.log('Payment was successful');
+    // Handle successful payment, e.g., redirect to success page
+  },
+  onError: () => {
+    console.error('Payment failed');
+    // Handle payment failure
+  }
+});
+
+// Render the component into a container element
+const container = document.getElementById('payment-container');
+paymentComponent.render(container);
+
+// Later, when you want to clean up (e.g., on page navigation)
+// paymentComponent.destroy();
 ```
 
 ## 🎨 Styling & Theming
@@ -151,7 +216,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 +229,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 +244,17 @@ 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               | string/number | Component width in pixels          |
+| paddingWrapper      | string/number | Padding for component wrapper      |
+| borderRadiusWrapper | string/number | Border radius for component wrapper|
 
 ## 🌐 Internationalization
 
@@ -202,7 +269,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',
 });
 ```