npm package: @galliun/react
Description: React components for Galliun Payment integration
Author: Galliun
Latest version: 0.1.1

# @galliun/react

React component for integrating Galliun Payment Protocol into your React applications. Provides a customizable payment button that handles the payment flow.

## Features

- 🎨 Customizable button styles and themes
- 🔄 Built-in payment flow handling
- 📱 Responsive design
- 🎯 TypeScript support
- 🔌 Easy integration

## Installation

```bash
npm install @galliun/react
# or
yarn add @galliun/react
```

## Quick Start

```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');
			}}
		/>
	);
}
```

## Props

| Prop         | Type                           | Required | Description                                              |
| ------------ | ------------------------------ | -------- | -------------------------------------------------------- |
| productId    | string                         | Yes      | The ID of the product to be purchased                    |
| onSuccess    | function                       | Yes      | Called when payment is successful                        |
| onError      | function                       | Yes      | Called when payment fails                                |
| 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 button (default: "Pay with Galliun") |
| buttonTheme  | 'light' \| 'dark'              | No       | Button theme (default: 'light')                          |
| buttonSize   | 'small' \| 'medium' \| 'large' | No       | Button size (default: 'medium')                          |
| customStyles | object                         | No       | Custom CSS styles for the button                         |
| disabled     | boolean                        | No       | Whether the button is disabled                           |
| baseUrl      | string                         | No       | Custom base URL for the payment service                  |

## Styling Examples

### Basic Theme

```tsx
<GalliunButton
	productId="YOUR_PRODUCT_ID"
	buttonText="Pay Now"
	buttonTheme="light"
	buttonSize="large"
	onSuccess={handleSuccess}
	onError={handleError}
/>
```

### Custom Styling

```tsx
<GalliunButton
	productId="YOUR_PRODUCT_ID"
	customStyles={{
		background: '#0369a1',
		color: 'white',
		padding: '1rem',
		borderRadius: '0.5rem',
		fontSize: '1.125rem',
		fontWeight: '600',
		'&:hover': {
			background: '#0284c7',
		},
	}}
	onSuccess={handleSuccess}
	onError={handleError}
/>
```

## Documentation

For detailed documentation, visit our [GitBook Documentation](https://docs.galliun.com/integration/pay-with-galliun-button-react).

## License

MIT License