Pay with Galliun Button

The Pay with Galliun Button is a pre-built UI component that lets you accept Sui network payments in your web application with minimal setup.

Overview

The button is available in two formats:

• A JavaScript library for vanilla JS applications

• A React component for React applications

Both versions provide:

• Pre-built UI with customizable styles

• Built-in payment flow handling

• Comprehensive event callbacks

• TypeScript support

Common Response Types

Success Response

{
	id: string; // Transaction ID
	status: 'succeeded'; // Payment status
	amount: string; // Payment amount
	currency: string; // Payment currency (e.g., "SUI")
	created: number; // Timestamp of creation
	metadata: {
		productId: string; // Product ID
		billId: string; // Bill ID
	}
	product: {
		id: string; // Product ID
		name: string; // Product name
		description: string; // Product description
		price: string; // Product price
		coinType: string; // Product currency
		creator: string; // Product creator
		quantity: number; // Total quantity
		sold: number; // Number sold
		createdAt: string; // Creation timestamp
		updatedAt: string; // Last update timestamp
	}
}

Error Response

{
  type: string;         // Error type: 'api_error', 'validation_error', or 'popup_error'
  code: string;         // Error code
  message: string;      // Human-readable error message
  param?: string;       // Parameter that caused the error (if applicable)
  metadata?: {
    productId?: string; // Product ID related to the error
    timestamp?: number; // Error timestamp
  }
}

Common Error Types

Type	Description	Example Codes
api_error	Server or network-related errors	'server_error', 'network_error'
validation_error	Invalid input or parameter errors	'parameter_missing', 'invalid_product_id'
popup_error	Issues with the payment popup window	'popup_blocked', 'popup_closed'

Customization Options

Both JavaScript and React implementations support the following customization options:

Option	Type	Description
buttonText	string	Custom text for the button (Default: "Pay with Galliun")
buttonTheme	string	Button theme: 'light' or 'dark' (Default: 'light')
buttonSize	string	Button size: 'small', 'medium', or 'large' (Default: 'medium')
customStyles	object	Custom CSS styles for the button

Next Steps

Choose your integration method:

• JavaScript Integration

• React Integration