TagadaPay Plugin SDK
Latest Version
v2.4.14 - Modern React SDK for building TagadaPay plugins
Quick Start
Install the SDK
npm install @tagadapay/plugin-sdk
Create your plugin
import { useCheckout, formatMoney } from '@tagadapay/plugin-sdk';
export default function MyPlugin() {
const { checkout, updateCustomer } = useCheckout();
return (
<div className="checkout-plugin">
<h1>Total: {formatMoney(checkout.total, checkout.currency)}</h1>
{/* Your plugin UI here */}
</div>
);
}
Configure your plugin
Create a plugin.manifest.json file:{
"name": "my-awesome-plugin",
"version": "1.0.0",
"routes": {
"/": "index.html"
}
}
Core Features
Plugin Types
🛒 Checkout Plugins
Build custom checkout experiences with complete control over the payment flow:
import { useCheckout, PaymentButton } from '@tagadapay/plugin-sdk';
function CustomCheckout() {
const { checkout, pay } = useCheckout();
return (
<div className="custom-checkout">
<ProductSummary items={checkout.items} />
<CustomerForm />
<PaymentButton onClick={pay} />
</div>
);
}
🎯 Landing Pages
Create engaging landing pages with built-in conversion tracking:
import { useOffers, trackEvent } from '@tagadapay/plugin-sdk';
function LandingPage() {
const { offers } = useOffers();
const handleCTAClick = () => {
trackEvent('cta_clicked');
// Redirect to checkout
};
return (
<div className="landing-page">
<Hero />
<OfferGrid offers={offers} />
<CTA onClick={handleCTAClick} />
</div>
);
}
🎨 UI Components
Reusable components that integrate seamlessly with TagadaPay’s design system:
import { Button, Card, Input } from '@tagadapay/plugin-sdk/ui';
function CustomForm() {
return (
<Card>
<Input placeholder="Enter your email" type="email" />
<Button variant="primary">Subscribe</Button>
</Card>
);
}
Architecture
Plugin Structure
my-plugin/
├── plugin.manifest.json # Plugin metadata & routing
├── .local.json # Local development config
├── config/ # Deployment configurations
│ ├── theme-green.json # Variant A
│ └── theme-blue.json # Variant B
├── src/
│ ├── App.tsx # Main plugin component
│ ├── components/ # Reusable components
│ └── hooks/ # Custom hooks
└── dist/ # Built files
Configuration Flow
Configuration is automatically injected based on your deployment environment and store settings.
Development Workflow
1. Local Development
# Start development server
npm run dev
# Test with local configuration
# Configuration from .local.json is automatically injected
2. Build & Deploy
# Build your plugin
npm run build
# Deploy with TagadaPay CLI
tgdcli ideploy
3. Configuration Management
# Deploy with specific config
tgdcli deploy --config config/theme-green.json
# Mount to custom domain
tgdcli mount my-deployment-id my-domain.com
Advanced Features
State Management
The SDK provides automatic state synchronization between your plugin and TagadaPay’s core systems:
import { useCheckout, useStore } from '@tagadapay/plugin-sdk';
function AdvancedPlugin() {
const { checkout, updateCheckout } = useCheckout();
const { store, branding } = useStore();
// State is automatically synchronized
// No need for manual API calls
return (
<div style={{ color: branding.primaryColor }}>
<h1>{store.name} Checkout</h1>
<p>Total: {checkout.total}</p>
</div>
);
}
Event Tracking
Built-in analytics and conversion tracking:
import { trackEvent, trackConversion } from '@tagadapay/plugin-sdk';
function TrackingExample() {
const handlePurchase = () => {
trackEvent('purchase_initiated', {
value: checkout.total,
currency: checkout.currency
});
trackConversion('checkout_completed');
};
return <button onClick={handlePurchase}>Complete Purchase</button>;
}
Next Steps
Support
Need help building your plugin? We’re here for you:
- Documentation: Complete guides and API reference
- Examples: Real-world plugin templates
- Community: Join our developer community
- Support: developer-support@tagadapay.com
