Droplinked Payment Intent

A React component for implementing Droplinked payment gateway.

Installation

Install the package using npm:

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:

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

2. Use the component in your code:

<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

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

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:

<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,
    }
  }}
/>