@mintmoney/react 0.1.0-alpha.23 → 0.1.0-alpha.27

package/dist/docs/guides/customisation.md

@@ -1,45 +0,0 @@
-# Customisation
-
-## MintMoney UI Namespace (`mm-`)
-
-### 🎯 What is the `mm-` Namespace?
-
-The **`mm-` namespace** is a **CSS class prefix** used in MintMoney UI to:
-
-- **Scope styles** to MintMoney components.
-- **Prevent style conflicts** with other CSS in consuming applications.
-- **Provide customization flexibility** through CSS variables.
-
-### **Example of Namespace Usage**
-
-```css
-.mm-button {
-  background-color: var(--mm-color-primary);
-  font-family: var(--mm-font-family);
-}
-```
-
-## Customizing Fonts
-
-MintMoney UI allows you to customize fonts using CSS variables. This ensures flexibility while maintaining a consistent
-look across all components.
-
-### 🎨 Default Font
-
-By default, MintMoney UI uses **Nunito Sans** as the primary font:
-
-```css
-.mm-root {
-  font-family: var(--mm-font-family, "Nunito Sans"), sans-serif;
-}
-```
-
-### Overriding the default font
-
-If you want to override the font for only a specific section, apply the CSS variable to a class.
-
-```css
-:root {
-  --mm-font-family: "Inter", sans-serif;
-}
-```

package/dist/docs/guides/overview.md

@@ -1,19 +0,0 @@
-# Guides
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-```js
-export default {
-  data() {
-    return {
-      msg: "Highlighted!",
-    };
-  },
-};
-```

package/dist/docs/guides/quickstart.md

@@ -1,169 +0,0 @@
-# Quickstart
-
-This guide walks you through integrating @mintmoney/react into your React application, including both frontend setup and backend integration.
-
-## 🚀 Prerequisites
-
-Before starting, ensure you have the following:
-
-- ✅ A React application (React 18+)
-- ✅ API Keys from your MintMoney dashboard
-- ✅ A backend server (Node.js/Express recommended)
-
-## 📥 Installation
-
-Install @mintmoney/react in your project:
-
-```sh
-npm install @mintmoney/react
-# or
-yarn add @mintmoney/react
-# or
-pnpm add @mintmoney/react
-```
-
-## 🛠️ SDK Setup
-
-Add the MintMoneyProvider to your application's root component:
-
-```tsx
-import { createConfig } from "@mintmoney/react/config";
-import { MintMoneyProvider } from "@mintmoney/react/context";
-import "@mintmoney/react/css/styles.css"; // Import default styles
-
-const config = createConfig("your-public-key", {
-  apiUrl: "https://api.mintmoney.com", // Your API URL
-  checkoutId: "your-checkout-id", // Your checkout ID
-});
-
-const App = () => {
-  return (
-    <MintMoneyProvider config={config}>
-      <YourApp />
-    </MintMoneyProvider>
-  );
-};
-```
-
-## 🔒 Backend Integration
-
-For security, always create payments through a server-side endpoint. Here's an example using Express:
-
-```typescript
-// Example using Express
-app.post("/api/create-payment", async (req, res) => {
-  const { amount, currency } = req.body;
-
-  // Validate required fields
-  if (!amount || !currency) {
-    res.status(400).json({ error: "Missing required fields" });
-    return;
-  }
-
-  try {
-    // Make request to MintMoney API
-    const response = await fetch(`${process.env.API_URL}/v1/payments`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": process.env.API_SECRET_KEY,
-      },
-      body: JSON.stringify({
-        amount: Number(amount), // Ensure amount is a number
-        currency: currency.toUpperCase(), // Ensure currency is uppercase
-        checkout_id: process.env.CHECKOUT_ID,
-      }),
-    });
-
-    const data = await response.json();
-
-    if (!response.ok) {
-      throw new Error(data.error || "Failed to create payment");
-    }
-
-    res.json(data);
-  } catch (error) {
-    console.error("Payment creation error:", error);
-    res.status(500).json({
-      error:
-        error instanceof Error ? error.message : "Failed to create payment",
-    });
-  }
-});
-```
-
-## 💳 Using the Checkout Component
-
-Add the Checkout component to your application:
-
-```tsx
-import { Checkout } from "@mintmoney/react";
-
-function ProductPage() {
-  const handleCreatePayment = async () => {
-    // Call your server endpoint to create the payment
-    const response = await fetch("/api/create-payment", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        amount: 10.99, // Amount in the currency's standard unit (e.g., dollars)
-        currency: "USD", // Currency code (e.g., USD, EUR)
-      }),
-    });
-
-    if (!response.ok) {
-      const error = await response.json();
-      throw new Error(error.error || "Failed to create payment");
-    }
-
-    return response.json();
-  };
-
-  const handleSuccess = (paymentId: string) => {
-    // Handle successful payment
-    console.log("Payment successful:", paymentId);
-  };
-
-  const handleError = (error: Error) => {
-    // Handle payment error
-    console.error("Payment failed:", error);
-  };
-
-  return (
-    <Checkout
-      createPayment={handleCreatePayment}
-      onSuccess={handleSuccess}
-      onError={handleError}
-    >
-      {/* Optional: Custom trigger button */}
-      <button>Pay with Crypto</button>
-    </Checkout>
-  );
-}
-```
-
-### Checkout Component Props
-
-| Prop            | Type                                   | Required | Description                                                                                    |
-| --------------- | -------------------------------------- | -------- | ---------------------------------------------------------------------------------------------- |
-| `createPayment` | `() => Promise<Payment>`               | Yes      | Function that calls your server endpoint to create a payment. Must be implemented server-side. |
-| `onSuccess`     | `(paymentId: string) => Promise<void>` | No       | Callback when payment is successful                                                            |
-| `onError`       | `(error: Error) => Promise<void>`      | No       | Callback when payment fails                                                                    |
-| `asChild`       | `boolean`                              | No       | Whether to use the child element as the trigger button                                         |
-| `children`      | `ReactNode`                            | No       | Custom trigger element when asChild is true                                                    |
-
-## ⚠️ Security Considerations
-
-- Never expose your API secret key in the frontend code
-- Always create payments through a server-side endpoint
-- Use environment variables to store sensitive credentials
-- Implement proper error handling and validation on the server
-- Use HTTPS for all API communications
-
-## 📚 Next Steps
-
-- Learn about [customizing the checkout experience](./customisation.md)
-- Read the [overview guide](./overview.md) for more details about the SDK
-- Check out our [example implementations](https://github.com/mintmoney/mintmoney-js/tree/main/examples) for more use cases

package/dist/docs/index.md

@@ -1,21 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "mint money SDK"
-  text: "Mint Money SDK Docs"
-  tagline: Money without limitations
-  actions:
-    - theme: brand
-      text: Get Started
-      link: /guides/overview
-
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
----

package/dist/docs/markdown-examples.md

@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).