JavaScript SDK - Tender API Docs

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

​Overview

​Package

@tender-cash/js-sdk

​Installation

​Usage in React

​API Reference

​Component Props (TenderAgentProps)

​Required Props

​Optional Props

​Ref Usage

​Ref Methods (TenderRef)

​Callback Data (onFinishResponse)

​Features

​Package

@tender-cash/agent-sdk-react

​Installation

​Usage in React

​API Reference

​Component Props (TenderAgentProps)

​Required Props

​Optional Props

​Ref Usage

​Ref Methods (TenderAgentRef)

​Callback Data (onFinishResponse)

​Features

​Next Steps

API Reference

Webhooks

GitHub

Support

Overview

Package

Installation

Usage in React

API Reference

Component Props (`TenderAgentProps`)

Required Props

Optional Props

Ref Usage

Ref Methods (`TenderRef`)

Callback Data (`onFinishResponse`)

Features

Package

Installation

Usage in React

API Reference

Component Props (`TenderAgentProps`)

Required Props

Optional Props

Ref Usage

Ref Methods (`TenderAgentRef`)

Callback Data (`onFinishResponse`)

Features

Next Steps