Payment Widget library

The React-based payment form component is available at: npm: sawfish-payment-react-widget

Prerequisites:

React 18.2+
React 19+
TypeScript 5.0+
Node.js 16.0+
Compatible only with React frontends
JWT Token still required (handled by backend, refer to Generate Token / Refresh Token for details)

Installation

npm install sawfish-payment-react-widget

Configuration

Add the following variables to your React .env:

NEXT_PUBLIC_SAWFISH_ENVIRONMENT=staging
NEXT_PUBLIC_SAWFISH_ENDPOINT=https://{{sawfish_domain}}/graphql
NEXT_PUBLIC_SAWFISH_API_TOKEN=your-api-token-here
NEXT_PUBLIC_SAWFISH_CLIENT_ID=your-client-id-here

Example usage

import React from "react";
import { PaymentForm } from "sawfish-payment-react-widget";
const App = () => {
  const handlePaymentSuccess = (res) => console.log("Success:", res);
  const handlePaymentError = (err) => console.error("Error:", err);
  return (
    <PaymentForm
      environment={process.env.NEXT_PUBLIC_SAWFISH_ENVIRONMENT || "staging"}
      endpoint={process.env.NEXT_PUBLIC_SAWFISH_ENDPOINT || ""}
      apiToken={process.env.NEXT_PUBLIC_SAWFISH_API_TOKEN || ""}
      clientId={process.env.NEXT_PUBLIC_SAWFISH_CLIENT_ID || ""}
      amount={100}
      contact={{
        first_name: "John",
        last_name: "Doe",
        email: "[email protected]",
        description: "Invoice payment",
        reference_no: "INV-001",
        address_line1: "123 Main St",
        city: "Sydney",
        state: "NSW",
        zip: "2000",
        country: "Australia",
      }}
      onPaymentSuccess={handlePaymentSuccess}
      onPaymentError={handlePaymentError}
      metadata={{ invoice_id: "1234" }}
    />
  );
};
export default App;

Interfaces

interface Contact {
    id?: number;
    first_name?: string;
    last_name?: string;
    email?: string;
    address_line_1?: string;
    address_city?: string;
    address_state?: string;
    address_postal_code?: string;
    address_country?: string;
}

interface PaymentFormProps {
  environment: string; // The environment for the payment gateway: production, staging or dev.
  apiToken: string; // The API token for the payment gateway.
  endpoint: string; // The graphql endpoint for the payment gateway.
  clientId: string; // The client id for the payment gateway /app/settings/app-integration
  onPaymentSuccess?: (response: any) => void; // Callback function for successful payment
  onPaymentError?: (error: any) => void; // Callback function for payment error
  amount: number
  metadata?: any
}