0.1.1 • Published 10 months ago
@galliun/react v0.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
npm install @galliun/react
# or
yarn add @galliun/reactQuick Start
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
<GalliunButton
productId="YOUR_PRODUCT_ID"
buttonText="Pay Now"
buttonTheme="light"
buttonSize="large"
onSuccess={handleSuccess}
onError={handleError}
/>Custom Styling
<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.
License
MIT License