React

Installation

Install the Galliun React package:

# Using npm
npm install @galliun/react

# Using yarn
yarn add @galliun/react

Basic Usage

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

<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

<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

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