React SDK

A React SDK for integrating the Longswipe Widget into your application. Provides both a component-based approach and a hook-based approach for maximum flexibility.

Installation

npm install @longswipe/longswipe-react
# or
yarn add @longswipe/longswipe-react

Integration Options

This SDK provides two ways to integrate the Longswipe Widget:

1. LongswipeWidget Component: A ready-to-use component with built-in UI
2. useLongswipe Hook: A flexible hook for custom UI implementations

LongswipeWidget Component

A lightweight component that loads the Longswipe Widget script and provides a simple interface with built-in UI for integrating the widget into your application.

import { LongswipeWidget, ResType } from '@longswipe/longswipe-react';

function App() {
  const handleResponse = (type: ResType, res?: any) => {
    switch (type) {
      case 'success':
        console.log('Success:', res);
        break;
      case 'error':
        console.error('Error:', res);
        break;
      case 'close':
        console.log('Widget closed');
        break;
      case 'start':
        console.log('Widget started');
        break;
      case 'loading':
        console.log('Widget loading');
        break;
    }
  };

  return (
    <LongswipeWidget
      apiKey="your_api_key_here"
      referenceId="unique-transaction-id"
      response={handleResponse}
      environment="sandbox" // or "production"
      defaultCurrency="USDT"
      defaultAmount={100}
      metaData={{ source: 'my-app' }}
      buttonText="Pay with Longswipe" // Optional custom button text
    />
  );
}

You can also provide your own custom button or clickable element:

<LongswipeWidget
  apiKey="your_api_key_here"
  referenceId="unique-transaction-id"
  response={handleResponse}
  environment="sandbox"
>
  <button className="my-custom-button">Custom Payment Button</button>
</LongswipeWidget>

Props

Prop	Type	Required	Description
apiKey	string	Yes	Your Longswipe API key
referenceId	string	Yes	Unique identifier for the transaction
response	function	Yes	Callback function for widget events
environment	'production' | 'sandbox'	No	Environment to use (defaults to 'sandbox')
defaultCurrency	'USD' | 'NGN' | 'GBP' | 'USDT' | 'USDC'	No	Default currency for redemption
defaultAmount	number	No	Default amount for redemption
config	Record<string, unknown>	No	Additional configuration options
metaData	Record<string, unknown>	No	Metadata to pass to the widget
buttonText	string	No	Custom text for the default button
children	React.ReactNode	No	Custom button or clickable element

Response Types

The response callback receives a type parameter that can be one of the following:

Type	Description
success	Widget operation completed successfully
error	An error occurred during widget operation
close	Widget was closed by the user
start	Widget has started and is ready
loading	Widget is loading

useLongswipe Hook

A flexible hook that provides more control over the Longswipe Widget integration, allowing you to create custom UI components.

import { useLongswipe, ResType } from '@longswipe/longswipe-react';

function CustomPaymentButton() {
  const handleResponse = (type: ResType, res?: any) => {
    switch (type) {
      case 'success':
        console.log('Success:', res);
        break;
      case 'error':
        console.error('Error:', res);
        break;
      case 'close':
        console.log('Widget closed');
        break;
      case 'start':
        console.log('Widget started');
        break;
      case 'loading':
        console.log('Widget loading');
        break;
    }
  };

  const { openModal, isLoaded, reload } = useLongswipe({
    apiKey: 'your_api_key_here',
    referenceId: 'unique-transaction-id',
    environment: 'sandbox', // or "production"
    defaultCurrency: 'USDT',
    defaultAmount: 100,
    metaData: { source: 'my-app' },
    onResponse: handleResponse,
  });

  return (
    <div>
      <button
        onClick={openModal}
        disabled={!isLoaded}
        style={{
          backgroundColor: '#0066ff',
          color: 'white',
          padding: '10px 16px',
          borderRadius: '4px',
        }}
      >
        Pay with Longswipe
      </button>

      {!isLoaded && <p>Loading payment system...</p>}

      <button onClick={reload}>Reload Payment System</button>
    </div>
  );
}

Hook Parameters

The useLongswipe hook accepts an options object with the following properties:

Parameter	Type	Required	Description
apiKey	string	Yes	Your Longswipe API key
referenceId	string	Yes	Unique identifier for the transaction
onResponse	function	Yes	Callback function for widget events
environment	'production' | 'sandbox'	No	Environment to use (defaults to 'sandbox')
defaultCurrency	'USD' | 'NGN' | 'GBP' | 'USDT' | 'USDC'	No	Default currency for redemption
defaultAmount	number	No	Default amount for redemption
config	Record<string, unknown>	No	Additional configuration options
metaData	Record<string, unknown>	No	Metadata to pass to the widget

Hook Return Values

The useLongswipe hook returns an object with the following properties:

Property	Type	Description
openModal	() => void	Function to open the Longswipe payment modal
isLoaded	boolean	Whether the Longswipe script has loaded successfully
reload	() => void	Function to reload the Longswipe script if needed

Development

1. Clone the repository
2. Install dependencies:

   npm install
3. Start the demo:

   npm run demo
4. Build the package:

   npm run build

License

MIT