Droplinked-payment-intent NPM

Droplinked Payment Intent

A unified React payment component library that supports multiple payment providers (Stripe and Paymob) with customizable styling.

Features

🔄 Unified API for multiple payment providers
💳 Support for Stripe and Paymob payment gateways
🎨 Highly customizable UI with comprehensive styling options
🌐 Support for both testnet and production environments
📱 Responsive design for all device sizes
🔒 Secure payment processing

Installation

# Using npm
npm install droplinked-payment-intent

# Using yarn
yarn add droplinked-payment-intent

# Using pnpm
pnpm add droplinked-payment-intent

Quick Start

import React from 'react';
import { DroplinkedPaymentIntent } from 'droplinked-payment-intent';

function PaymentPage() {
  return (
    <div className="payment-container">
      <h2>Complete Your Payment</h2>
      <DroplinkedPaymentIntent
        clientSecret="your_client_secret"
        type="stripe" // or "paymob"
        return_url="https://your-return-url.com"
        onSuccess={() => console.log('Payment successful')}
        onError={(error) => console.error('Payment failed', error)}
        isTestnet={true} // Set to false for production
      />
    </div>
  );
}

export default PaymentPage;

API Reference

DroplinkedPaymentIntent Component

The main component that renders a payment form based on the specified provider.

Props

Prop	Type	Required	Default	Description
`clientSecret`	string	Yes	-	Secret key for payment authentication
`type`	'stripe' \| 'paymob'	Yes	-	Payment provider type
`return_url`	string	No	`window.location.href`	URL to redirect after payment completion
`commonStyle`	CommonStyle	No	defaultCommonStyle	Styling options for the payment component
`onSuccess`	() => void	No	-	Callback function on successful payment
`onError`	(error: unknown) => void	No	-	Callback function on payment error
`isTestnet`	boolean	No	false	Indicates whether the payment is in testnet mode

Styling Options

The component accepts a commonStyle prop that allows for comprehensive customization of the payment form.

// Example of custom styling
const customStyle = {
  fontFamily: 'Roboto, sans-serif',
  fontSizeLabel: '14px',
  fontSizeInput: '16px',
  fontSizePaymentButton: '16px',
  fontWeightLabel: 500,
  fontWeightInput: 400,
  fontWeightPaymentButton: 600,
  colorContainer: '#FFFFFF',
  colorBorderInput: '#E5E7EB',
  colorBorderPaymentButton: 'transparent',
  borderRadius: '8px',
  colorDisabled: '#9CA3AF',
  colorError: '#EF4444',
  colorPrimary: '#4F46E5',
  colorInput: '#FFFFFF',
  textColorLabel: '#374151',
  textColorPaymentButton: '#FFFFFF',
  textColorInput: '#1F2937',
  placeholderColor: '#9CA3AF',
  containerWidth: '100%',
  verticalPadding: '12px',
  verticalSpacing: '16px',
  containerPadding: '16px',
  backgroundBody: '#F9FAFB',
  textColorParagraphs: '#4B5563',
  theme: 'light', // 'light' or 'dark'
  submitButton: {
    backgroundColor: '#4F46E5',
    textColor: '#FFFFFF',
    fontSize: '14px',
    fontWeight: 500,
    borderRadius: '4px'
  },
  cancelButton: {
    backgroundColor: '#F3F4F6',
    textColor: '#4B5563',
    fontSize: '14px',
    fontWeight: 500,
    borderRadius: '4px'
  }
};

Payment Providers

Stripe

For Stripe payments, the component uses Stripe Elements to render a secure payment form. You need to obtain a client secret from your backend.

<DroplinkedPaymentIntent
  clientSecret="your_stripe_client_secret"
  type="stripe"
  return_url="https://your-return-url.com"
  isTestnet={true}
/>

Paymob

For Paymob payments, the component integrates with Paymob Pixel SDK to handle payment processing.

<DroplinkedPaymentIntent
  clientSecret="your_paymob_client_secret"
  type="paymob"
  commonStyle={commonStyle}
  return_url="https://droplinked.com/"
  onSuccess={() => console.log('Payment successful')}
  onError={(error) => console.error('Payment failed: ', error)}    
  isTestnet={true}
/>