@astropay/payments-lib 0.0.11 → 0.0.12

package/README.md

@@ -35,6 +35,9 @@ AstroPay's official frontend library that allows you to easily embed customizabl
   - [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)
@@ -94,15 +97,20 @@ AstroPayCore.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 AstroPayFullCheckout({
+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
@@ -113,13 +121,15 @@ 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
 
@@ -133,10 +143,63 @@ const fullCheckoutComponent = new AstroPayFullCheckout({
   // 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(fullCheckoutComponent.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
@@ -181,15 +244,17 @@ AstroPayCore.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