JavaScript

Installation

Add the Galliun Payment script to your HTML:

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

Basic Usage

1. Add a container for the button:

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

1. Initialize the client and create the button:

// 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

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