W3 Payments Core

React component library for universal Web3 payment processing.

Installation

npm install @w3-payments/core
# or
pnpm add @w3-payments/core

Usage

Basic Integration

import { W3PaymentsProvider, W3PaymentWidget } from '@w3-payments/core';

function App() {
  const vendorConfig = {
    meshpay: { enabled: true, clientId: 'your-client-id' },
    ironpay: { enabled: true, apiKey: 'your-api-key' }
  };

  return (
    <W3PaymentsProvider 
      vendorConfig={vendorConfig}
      supportedCurrencies={['BTC', 'ETH-ETH', 'BNB-BSC']}
    >
      <W3PaymentWidget 
        amount={100}
        currency="BTC"
        onPaymentSuccess={(result) => console.log('Payment successful!', result)}
        onVendorSelect={(vendor) => console.log('Vendor selected:', vendor.name)}
      />
    </W3PaymentsProvider>
  );
}

CommonJS Support

const { W3PaymentsProvider, W3PaymentWidget } = require('@w3-payments/core');

Theming and Customization

Automatic CSS Inclusion

The library automatically includes its CSS styles when imported. No manual CSS imports are needed:

import { W3PaymentsProvider } from '@w3-payments/core';
// CSS styles are automatically injected!

W3 Brand Colors

The library provides W3 brand colors as CSS custom properties that can be customized:

:root {
  /* W3 Brand Colors - Customizable */
  --color-w3-primary: #2563eb;    /* Primary blue */
  --color-w3-secondary: #64748b;  /* Secondary gray */
  --color-w3-background: #ffffff; /* Background white */
  --color-w3-border: #e2e8f0;     /* Border light gray */
}

Custom Theming

Override the default colors by defining CSS custom properties in your application:

/* Light theme */
:root {
  --color-w3-primary: #10b981;      /* Green primary */
  --color-w3-secondary: #6b7280;    /* Custom secondary */
  --color-w3-background: #f8fafc;   /* Light background */
  --color-w3-border: #d1d5db;       /* Custom border */
}

/* Dark theme */
[data-theme="dark"] {
  --color-w3-primary: #34d399;      /* Bright green for dark */
  --color-w3-secondary: #9ca3af;    /* Lighter secondary for dark */
  --color-w3-background: #1f2937;   /* Dark background */
  --color-w3-border: #374151;       /* Dark border */
}

Theme Integration Examples

Basic Color Override

:root {
  --color-w3-primary: #your-brand-color;
}

Multiple Brand Colors

:root {
  --color-w3-primary: #ff6b6b;      /* Red primary */
  --color-w3-secondary: #4ecdc4;    /* Teal secondary */
  --color-w3-background: #ffe66d;   /* Yellow background */
  --color-w3-border: #ff8b94;       /* Pink border */
}

Dynamic Theme Switching

// Toggle between light and dark themes
function toggleTheme() {
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
  document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
}

CSS Bundle Information

• CSS Size: 8.27 kB (2.37 kB gzipped) - well under 15kb limit
• Tree-shaking: Only used utility classes included in final bundle
• Minification: CSS is automatically minified for production
• Custom Properties: Full support for CSS custom property theming

Build Information

• Format: ES Modules (.mjs) and CommonJS (.js)
• Bundle Size: < 50kb gzipped total (JS + CSS)
• Tree-shaking: Supported for individual component imports
• TypeScript: Full type definitions included
• CSS: Automatically injected, no manual imports needed

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])