Documentation Index
Fetch the complete documentation index at: https://docs.tender.cash/llms.txt
Use this file to discover all available pages before exploring further.
Overview
This page contains full documentation for both JavaScript SDK tracks:
- Latest SDK:
@tender-cash/js-sdk
- Legacy SDK (Old Version):
@tender-cash/agent-sdk-react
Latest SDK
Legacy SDK (Old Version)
Package
@tender-cash/js-sdk
Current JavaScript SDK package
Installation
npm install @tender-cash/js-sdk
Usage in React
Use TenderSdk as the primary component.
TenderAgentSdk is still exported as a backward-compatible alias.import { TenderSdk, onFinishResponse } from '@tender-cash/js-sdk';
function PaymentComponent() {
const handleEventResponse = (response: onFinishResponse) => {
console.log('SDK Response:', response);
};
return (
<TenderSdk
accessId="YOUR_ACCESS_ID"
fiatCurrency="USD"
env="test"
onEventResponse={handleEventResponse}
amount={150}
referenceId="unique-payment-reference-123"
paymentExpirySeconds={1800}
/>
);
}
When referenceId and amount are provided, the modal auto-opens on component mount.
API Reference
Component Props (TenderAgentProps)
Applies to both TenderSdk and TenderAgentSdk.Required Props
| Prop | Type | Description |
|---|
accessId | string | Your Tender merchant Access ID. |
fiatCurrency | string | Fiat code, e.g. "USD", "EUR", "NGN". |
env | "test" | "live" | "local" | Target environment. |
Optional Props
| Prop | Type | Description |
|---|
onEventResponse | (data: onFinishResponse) => void | Called when payment state changes. |
referenceId | string | Payment reference. Required for auto-open mode. |
amount | number | Payment amount in fiat. Required for auto-open mode. |
paymentExpirySeconds | number | Payment expiration in seconds. |
theme | "light" | "dark" | Modal theme. |
closeModal | () => void | Callback fired when modal closes. |
Ref Usage
import { useRef } from 'react';
import { TenderSdk, TenderRef } from '@tender-cash/js-sdk';
function PaymentComponent() {
const tenderRef = useRef<TenderRef>(null);
const openPayment = () => {
tenderRef.current?.initiatePayment({
amount: 150,
referenceId: `order-${Date.now()}`,
paymentExpirySeconds: 1800
});
};
const closePayment = () => {
tenderRef.current?.dismiss();
};
return (
<>
<button onClick={openPayment}>Open Payment</button>
<button onClick={closePayment}>Close Modal</button>
<TenderSdk ref={tenderRef} accessId="YOUR_ACCESS_ID" fiatCurrency="USD" env="test" />
</>
);
}
Ref Methods (TenderRef)
| Method | Description |
|---|
initiatePayment | Opens modal and starts payment with provided parameters. |
dismiss | Closes the modal. |
Callback Data (onFinishResponse)
interface onFinishResponse {
status: "partial-payment" | "completed" | "overpayment" | "pending" | "error" | "cancelled";
message: string;
data: IPaymentData | undefined;
}
Features
- Shadow DOM style isolation
- Auto-open mode from props
- Programmatic control with refs
- TypeScript support
- Works across desktop and mobile
This is the old SDK version. New integrations should use @tender-cash/js-sdk.
Package
@tender-cash/agent-sdk-react
Legacy package (previous SDK version)
Installation
npm install @tender-cash/agent-sdk-react
Usage in React
import { TenderAgentSdk, onFinishResponse } from '@tender-cash/agent-sdk-react';
function PaymentComponent() {
const handleEventResponse = (response: onFinishResponse) => {
console.log('SDK Response:', response);
};
return (
<TenderAgentSdk
accessId="YOUR_ACCESS_ID"
fiatCurrency="USD"
env="test"
onEventResponse={handleEventResponse}
amount={150.00}
referenceId="unique-payment-reference-123"
paymentExpirySeconds={1800}
/>
);
}
API Reference
Component Props (TenderAgentProps)
Required Props
| Prop | Type | Description |
|---|
fiatCurrency | string | Fiat currency code, e.g. "USD" or "EUR". |
accessId | string | Your Tender merchant Access ID. |
env | "test" | "live" | "local" | Target environment. |
Optional Props
| Prop | Type | Description |
|---|
onEventResponse | (data: onFinishResponse) => void | Called when payment status updates. |
referenceId | string | Payment reference. Required for auto-open mode. |
amount | number | Payment amount in fiat. Required for auto-open mode. |
paymentExpirySeconds | number | Payment expiration in seconds. |
theme | "light" | "dark" | Modal theme. |
Ref Usage
import { useRef } from 'react';
import { TenderAgentSdk, TenderAgentRef } from '@tender-cash/agent-sdk-react';
function PaymentComponent() {
const tenderRef = useRef<TenderAgentRef>(null);
const handleOpenPayment = () => {
tenderRef.current?.initiatePayment({
amount: 150.00,
referenceId: "unique-payment-reference-123",
paymentExpirySeconds: 1800
});
};
const handleCloseModal = () => {
tenderRef.current?.closeModal();
};
return (
<>
<button onClick={handleOpenPayment}>Open Payment</button>
<button onClick={handleCloseModal}>Close Modal</button>
<TenderAgentSdk ref={tenderRef} accessId="YOUR_ACCESS_ID" fiatCurrency="USD" env="test" />
</>
);
}
Ref Methods (TenderAgentRef)
| Method | Description |
|---|
initiatePayment | Opens modal and starts payment with provided parameters. |
dismiss | Closes the modal. |
closeModal | Closes the modal from outside the widget. |
Callback Data (onFinishResponse)
interface onFinishResponse {
status: "partial-payment" | "completed" | "overpayment" | "pending" | "error" | "cancelled";
message: string;
data: IPaymentData | undefined;
}
Features
- Shadow DOM style isolation
- Auto-open modal flow
- TypeScript support
- Responsive payment UI
Next Steps
API Reference
Explore the full API documentation
Webhooks
Set up webhook notifications
GitHub
View source repositories
Support
Contact our support team
