droplinked-payment-hub/README.md

A unified payment component that handles different payment providers

# Droplinked Payment Intent

A React component for implementing Droplinked payment gateway.

## Installation

Install the package using npm:

```bash
npm install @droplinked/payment-intent
```

## Payment Types

The payment type is determined by the Droplinked backend. You can fetch available payment methods for a cart using the following API endpoint:

```
GET /v2/carts/{cartId}/payment-methods
```

Currently supported payment types:
- `stripe`: Credit card payments via Stripe
- `USDT-BINANCE`: USDT payments on Binance network

## Usage

1. Import the component:
```tsx
import { DroplinkedPaymentIntent } from '@droplinked/payment-intent';
```

2. Use the component in your code:
```tsx
<DroplinkedPaymentIntent
  orderId="123456"             // Order ID for the payment
  type="stripe"                // Payment provider (from Droplinked API)
  intentType="payment"         // Transaction type (payment or setup)
  onSuccess={() => {          // Callback for successful payment
    console.log('Payment successful');
  }}
  onCancel={() => {           // Callback for cancelled payment
    console.log('Payment cancelled');
  }}
  onError={(error) => {       // Callback for payment errors
    console.error('Error:', error);
  }}
/>
```

## Props

| Name | Type | Required | Description |
|------|------|----------|-------------|
| orderId | string | Yes | Order ID for the payment |
| type | string | Yes | Payment provider type (from Droplinked API) |
| intentType | string | No | Transaction type ('payment' or 'setup'). Default: 'payment' |
| onSuccess | function | Yes | Called after successful payment |
| onCancel | function | Yes | Called when payment is cancelled |
| onError | function | Yes | Called when an error occurs |
| return_url | string | No | URL to redirect after payment |
| isTestnet | boolean | No | Use testnet environment. Default: false |

## Examples

### Stripe Payment

```tsx
import { DroplinkedPaymentIntent } from '@droplinked/payment-intent';

function StripePaymentPage() {
  const [paymentMethods, setPaymentMethods] = useState([]);
  const cartId = '123456';

  useEffect(() => {
    // Fetch available payment methods from Droplinked API
    fetch(`https://api.droplinked.com/v2/carts/${cartId}/payment-methods`)
      .then(response => response.json())
      .then(data => setPaymentMethods(data));
  }, [cartId]);

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h1>Credit Card Payment</h1>
      
      <DroplinkedPaymentIntent
        orderId={cartId}
        type="stripe"
        intentType="payment"
        isTestnet={process.env.NODE_ENV === 'development'}
        return_url="https://your-website.com/payment/success"
        onSuccess={() => {
          console.log('Payment successful');
          window.location.href = '/success';
        }}
        onCancel={() => {
          console.log('Payment cancelled');
          window.location.href = '/cancel';
        }}
        onError={(error) => {
          console.error('Payment error:', error);
          alert('Payment failed. Please try again.');
        }}
        commonStyle={{
          theme: 'light',
          fontFamily: 'system-ui, sans-serif',
          colorPrimary: '#4F46E5',
        }}
      />
    </div>
  );
}
```

### USDT-BINANCE Payment

```tsx
import { DroplinkedPaymentIntent } from '@droplinked/payment-intent';

function CryptoPaymentPage() {
  const cartId = '123456';

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h1>USDT Payment</h1>
      
      <DroplinkedPaymentIntent
        orderId={cartId}
        type="USDT-BINANCE"
        intentType="payment"
        onSuccess={() => {
          console.log('USDT payment successful');
          window.location.href = '/success';
        }}
        onCancel={() => {
          console.log('USDT payment cancelled');
          window.location.href = '/cancel';
        }}
        onError={(error) => {
          console.error('USDT payment error:', error);
          alert('Payment failed. Please try again.');
        }}
        commonStyle={{
          theme: 'dark',
          fontFamily: 'system-ui, sans-serif',
          colorPrimary: '#F0B90B', // Binance yellow
        }}
      />
    </div>
  );
}
```

## Styling

You can customize the component's appearance using `commonStyle`:

```tsx
<DroplinkedPaymentIntent
  // ... other props
  commonStyle={{
    // Colors
    colorPrimary: '#4F46E5',
    colorContainer: '#FFFFFF',
    colorBorderInput: '#E5E7EB',
    
    // Font
    fontFamily: 'system-ui, sans-serif',
    fontSizeLabel: '14px',
    fontSizeInput: '16px',
    
    // Button styles
    submitButton: {
      backgroundColor: '#4F46E5',
      textColor: '#FFFFFF',
      fontSize: '14px',
      fontWeight: 500,
    },
    cancelButton: {
      backgroundColor: '#F3F4F6',
      textColor: '#4B5563',
      fontSize: '14px',
      fontWeight: 500,
    }
  }}
/>