# React

## Installation

Install the Galliun React package:

```bash
# Using npm
npm install @galliun/react

# Using yarn
yarn add @galliun/react
```

## Basic Usage

```tsx
import { GalliunButton } from '@galliun/react';

function App() {
	return (
		<GalliunButton
			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');
			}}
		/>
	);
}
```

## Component Props

| Prop         | Type     | Required | Description                                                                 |
| ------------ | -------- | -------- | --------------------------------------------------------------------------- |
| productId    | string   | Yes      | The ID of the product to be purchased                                       |
| onSuccess    | function | Yes      | Called when payment is successful with transaction details                  |
| onError      | function | Yes      | Called when payment fails with error details                                |
| onClose      | function | Yes      | Called when payment window is closed                                        |
| onLoaded     | function | Yes      | 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                                            |
| disabled     | boolean  | No       | Whether the button is disabled. Default: false                              |
| baseUrl      | string   | No       | Custom base URL for the payment service. Default: "<http://localhost:5173>" |

## Styling Examples

### Basic Customization

```tsx
<GalliunButton
	productId="YOUR_PRODUCT_ID"
	buttonText="Pay Now"
	buttonTheme="light"
	buttonSize="large"
	onSuccess={(result) => {
		console.log('Payment successful!', result);
	}}
	onError={(error) => {
		console.error('Payment failed:', error);
	}}
/>
```

### Advanced Styling

```tsx
<GalliunButton
	productId="YOUR_PRODUCT_ID"
	buttonText="Pay Now"
	buttonTheme="light"
	buttonSize="large"
	customStyles={{
		background: '#0369a1',
		color: 'white',
		width: '100%',
		padding: '1rem',
		borderRadius: '0.5rem',
		fontSize: '1.125rem',
		fontWeight: '600',
		border: 'none',
		cursor: 'pointer',
		transition: 'all 0.2s',
		'&:hover': {
			background: '#0284c7',
			transform: 'translateY(-2px)',
		},
		'&:active': {
			transform: 'translateY(0)',
		},
	}}
	onSuccess={(result) => {
		console.log('Payment successful!', result);
	}}
	onError={(error) => {
		console.error('Payment failed:', error);
	}}
/>
```

### Disabled State

```tsx
<GalliunButton
	productId="YOUR_PRODUCT_ID"
	disabled={true}
	buttonText="Currently Unavailable"
	onSuccess={(result) => {
		console.log('Payment successful!', result);
	}}
	onError={(error) => {
		console.error('Payment failed:', error);
	}}
/>
```
