# JavaScript

## Installation

Add the Galliun Payment script to your HTML:

```html
<script src="https://app.galliun.com/galliun.js"></script>
```

## Basic Usage

1. Add a container for the button:

```html
<div id="galliun-button"></div>
```

2. Initialize the client and create the button:

```javascript
// Initialize the Galliun client
const galliun = Galliun.createClient({
	baseUrl: 'https://app.galliun.com',
});

// Create and mount the payment button
const button = galliun.elements.createButton('galliun-button');
button.mount({
	productId: 'YOUR_PRODUCT_ID',
	onSuccess: (result) => {
		console.log('Payment successful!', result);
	},
	onError: (error) => {
		console.error('Payment failed:', error);
	},
	onClose: () => {
		console.log('Payment window closed');
	},
	onLoaded: () => {
		console.log('Payment window loaded');
	},
});
```

## Client Configuration

### Client Options

| Option  | Type   | Description                                                                    |
| ------- | ------ | ------------------------------------------------------------------------------ |
| baseUrl | string | Optional. Base URL for the Galliun service. Default: "<http://localhost:5173>" |

### Client Methods

| Method        | Description                                             |
| ------------- | ------------------------------------------------------- |
| createPayment | Create a payment intent/session (Future implementation) |
| getProduct    | Get product details (Future implementation)             |
| elements      | Access UI elements like payment buttons                 |
| destroy       | Clean up event listeners and resources                  |

## Button Configuration

### Mount Options

| Option       | Type     | Required | Description                                                     |
| ------------ | -------- | -------- | --------------------------------------------------------------- |
| productId    | string   | Yes      | The ID of the product to be purchased                           |
| onSuccess    | function | No       | Called when payment is successful with transaction details      |
| onError      | function | No       | Called when payment fails with error details                    |
| onClose      | function | No       | Called when payment window is closed                            |
| onLoaded     | function | No       | Called when payment window is loaded                            |
| buttonText   | string   | No       | Custom text for the payment button. Default: "Pay with Galliun" |
| buttonTheme  | string   | No       | Button theme: 'light' or 'dark'. Default: 'light'               |
| buttonSize   | string   | No       | Button size: 'small', 'medium', or 'large'. Default: 'medium'   |
| customStyles | object   | No       | Custom CSS styles for the button                                |

## Styling Examples

### Custom Button Styles

```javascript
button.mount({
	productId: 'YOUR_PRODUCT_ID',
	buttonText: 'Pay Now',
	buttonTheme: 'light',
	buttonSize: 'large',
	customStyles: {
		background: '#0369a1',
		color: 'white',
		padding: '12px 24px',
		borderRadius: '8px',
		fontSize: '16px',
		fontWeight: '600',
		border: 'none',
		cursor: 'pointer',
		transition: 'all 0.2s',
		'&:hover': {
			background: '#0284c7',
			transform: 'translateY(-1px)',
		},
	},
});
```
