Skip to content

Integration Options

Tributary offers multiple ways to integrate automated payments. Choose the method that fits your use case.

Integration Methods

1. Payments SDK 🛒

Best for: Quick checkout links with zero API keys

  • Use @tributary-so/payments for simplified payments via hosted checkout page
  • Generate shareable payment URLs
  • Track subscription and one-time payment status
  • Zero configuration required
import { PaymentsClient } from "@tributary-so/payments";

const payments = new PaymentsClient(connection, tributary);
const session = await payments.checkout.sessions.create({
  mode: "subscription",
  line_items: [{ description: "Pro Plan", unitPrice: 10, quantity: 1 }],
  paymentFrequency: "monthly",
  tributaryConfig: { gateway, recipient, trackingId },
});

👉 Get Started: Checkout

2. Direct SDK Integration 💻

Best for: Full programmatic control and custom flows

  • Use @tributary-so/sdk for complete protocol interaction
  • Build custom payment UI and logic
  • Full control over transaction construction
  • Support for all payment types (subscriptions, milestones, pay-as-you-go)
import { Tributary } from "@tributary-so/sdk";

const tributary = new Tributary(connection, wallet);
const instructions = await tributary.createSubscriptionInstruction(/*...*/);

👉 Get Started: Integration | SDK Reference

3. React SDK ⚛️

Best for: Fast integration in React applications

  • Use @tributary-so/sdk-react for pre-built components and hooks
  • Drop-in payment buttons (subscription, milestone, pay-as-you-go)
  • React hooks for full control over the payment flow
  • Built-in wallet integration, transaction handling, and error states
  • Ideal for web apps and dashboards
import { SubscriptionButton, PaymentInterval } from "@tributary-so/sdk-react";

<SubscriptionButton
  amount={new BN(10000000)}
  recipient={recipient}
  gateway={gateway}
  interval={PaymentInterval.Monthly}
  label="Subscribe $10/month"
/>;

Or use hooks for custom UI:

import { useCreateSubscription } from "@tributary-so/sdk-react";

const { createSubscription, loading, error } = useCreateSubscription();
const result = await createSubscription({ amount, recipient, gateway, interval, ... });

👉 Get Started: React SDK

4. REST API 📡

Best for: Backend integration and real-time notifications

  • Query subscription status and payment events
  • WebSocket notifications for payment events
  • Webhook management for external notifications
  • No SDK required - pure HTTP
# Get subscription status
curl "https://api.tributary.so/v1/subscriptions?trackingId=my-sub"

# WebSocket for real-time updates
socket.emit("subscribe", { trackingId: "my-sub" });

👉 Get Started: API Overview

5. x402 HTTP Payments 🌐

Best for: API monetization and micropayments

  • Express.js middleware for HTTP 402 payments
  • Subscription or pay-as-you-go billing
  • JWT-based authenticated access
  • Standards-compliant HTTP payment protocol
import { createX402Middleware } from "@tributary-so/x402";

app.use(
  "/api/premium",
  createX402Middleware({
    scheme: "deferred",
    amount: 100,
    recipient: process.env.RECIPIENT!,
  })
);

👉 Get Started: x402 Overview

Choosing the Right Integration

Use Case Method
Share payment links Payments SDK
AI agent monetization Payments SDK
Custom payment UI Direct SDK
Complex payment logic Direct SDK
React web app React SDK
Backend-only integration REST API
API monetization x402
Real-time notifications REST API + WebSocket

SDK Packages

Package Purpose
@tributary-so/sdk Core protocol interaction
@tributary-so/payments Simplified payments SDK
@tributary-so/sdk-react React components and hooks
@tributary-so/x402 HTTP 402 middleware
@tributary-so/cli Command-line tools

Next Steps

  1. Learn the Protocol: Tributary Overview
  2. Choose Your Integration: Review quickstart guides above
  3. JWT Authentication: Verify subscriptions after checkout
  4. Explore Payment Types: Subscriptions, Milestones, Pay-as-you-go
  5. Build: Check use cases for inspiration

Need Help?