Payment Widget Library

A React payment widget for processing payments through the Sawfish API.

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 your 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 || ""}
      apiSecret={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: "john@example.com",
        country: "Australia",
      }}
      onPaymentSuccess={handlePaymentSuccess}
      onPaymentError={handlePaymentError}
      metadata={{ invoice_id: "1234" }}
      description="Invoice-1234"
    />
  );
};

export default App;

Interfaces

interface Contact {
  first_name: string;
  last_name: string;
  email: string;
  country: string;
}

interface PaymentFormProps {
  environment: string; // The environment for the payment gateway: production, staging or dev.
  endpoint: string; // The GraphQL endpoint for the payment gateway.
  apiSecret: string; // The API token 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;
  description?: string; // The invoice or order id.
}