@astropay/payments-lib 1.0.5 → 2.0.0

package/README.md

@@ -118,6 +118,9 @@ The main component for rendering a payment interface.
 | 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`) |
+| cardConfig      | object     | No       | Configuration for card module.                               |
+| cardConfig.showPaymentSummary   | boolean    | No         | 	Whether to display the summary of the payment (defaults to `true`) |
+| cardConfig.expirationDateFormat | `MM/YYYY` or `MM/YY`    | No       | Mask format for expiration date (defaults to `MM/YY`)     |
 | onSuccess       | () => void | No       | Callback function called when payment is successful          |
 | onError         | () => void | No       | Callback function called when payment fails                  |
 
@@ -133,6 +136,10 @@ const fullCheckoutComponent = new AstroPayFullCheckout({
   // Optional props
   showTitle: true,
   showDescription: true,
+  cardConfig: {
+    showPaymentSummary: true,
+    expirationDateFormat: 'MM/YY',
+  },
   onSuccess: () => {
     console.log('Payment was successful');
     // Handle successful payment, e.g., redirect to success page
@@ -221,15 +228,16 @@ You can customize the styling by providing a `styles` object in the initializati
 ```typescript
 AstroPayCore.init('app-id', {
   styles: {
-    primaryColor: '#FF5500',
-    secondaryColor: '#00AAFF',
     backgroundColor: '#FFFFFF',
+    fontFamily: 'Arial, sans-serif',
+    textColor: '#000000',
+    primaryColor: '#FF5500',
     textPrimaryColor: '#333333',
+    secondaryColor: '#00AAFF',
     textSecondaryColor: '#666666',
-    fontFamily: 'Arial, sans-serif',
     width: 500,
-    paddingWrapper: '12px',
-    borderRadiusWrapper: '4px'
+    paddingWrapper: 20,
+    borderRadiusWrapper: 8,
   },
 });
 ```
@@ -238,15 +246,17 @@ AstroPayCore.init('app-id', {
 
 | Property            | Type          | Description                        |
 | ------------------- | ------------- | ---------------------------------- |
-| primaryColor        | string        | Primary brand color                |
-| secondaryColor      | string        | Secondary brand color              |
 | backgroundColor     | string        | Background color                   |
+| fontFamily          | string        | Font family                        |
+| textColor           | string        | Text color                         |
+| primaryColor        | string        | Primary brand color                |
 | textPrimaryColor    | string        | Primary text color                 |
+| secondaryColor      | string        | Secondary brand 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|
+| ...otherProps       | —             | For additional styling options, see the [full style API docs](https://developers.astropay.com/docs/accept-astropay/checkout/payment-lib-web/styling-theming#custom-styling) |
 
 ## 🌐 Internationalization
 

package/dist/astropay-payments-lib.es.js

@@ -1,4 +1,4 @@
-import { _ as r, $ as s, a0 as t, a1 as e, $ as y } from "./main-CJp9GspG.js";
+import { _ as r, $ as s, a0 as t, a1 as e, $ as y } from "./main-DhA4kci7.js";
 export {
   r as AstroPayCardPayment,
   s as AstroPayCore,