@longswipe/longswipe-react v1.2.0

Longswipe 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.

For detailed API documentation, visit the Longswipe Developer Documentation.

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

Response Types

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

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:

Hook Return Values

The useLongswipe hook returns an object with the following properties:

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