Customization

Overview

Customize the appearance of nekuda components through a comprehensive three-prop styling system. The SDK provides flexible styling options while maintaining PCI compliance through secure iframe isolation.

The Three-Prop Styling System

nekuda components accept three main styling props that work together:

styles

object

Base typography and font styling applied globally. Includes fontFamily and fontSize.

elementsConfig

object

Detailed styling for individual form elements (inputs, fields). Each element supports base, focus, and error states.

walletStyles

object

Component-level theming for card management UI including modal, cardItem, and button variants.

Complete Theme Example

const customTheme = {
  // 1. Base typography
  styles: {
    fontFamily: '"Inter", -apple-system, sans-serif',
    fontSize: '14px'
  },
  
  // 2. Form element styling
  elementsConfig: {
    cardNumber: {
      base: { backgroundColor: '#fff', border: '1px solid #e5e7eb' },
      focus: { borderColor: '#3b82f6' },
      error: { borderColor: '#ef4444' }
    },
    // ... other form fields
  },
  
  // 3. Component theming (for NekudaCardManagement)
  walletStyles: {
    modal: { backgroundColor: '#fff', color: '#111827' },
    cardItem: { backgroundColor: '#fff', border: '1px solid #e5e7eb' },
    button: {
      primary: { backgroundColor: '#3b82f6', color: '#fff' },
      secondary: { backgroundColor: '#f3f4f6', color: '#374151' },
      ghost: { backgroundColor: 'transparent', color: '#6b7280' }
    }
  }
};

// Apply to components
<NekudaPaymentForm {...customTheme} />
<NekudaCardManagement {...customTheme} />

Styling Payment Form Elements

The <NekudaPaymentForm> component accepts an elementsConfig prop for customizing the appearance of form fields. Each field can have different styles for base, focus, and error states.

Using elementsConfig

<NekudaWalletProvider
  publicKey="pk_test_..."
  userId={userId}
>
  <NekudaPaymentForm
    elementsConfig={{
      cardNumber: {
        base: { fontSize: '16px', color: '#32325d' },
        focus: { borderColor: '#4083f0' },
        error: { color: '#fa755a' }
      },
      cardExpiry: {
        base: { fontSize: '16px', color: '#32325d' },
        focus: { borderColor: '#4083f0' }
      }
    }}
  />
</NekudaWalletProvider>

Available Element Types

The following element types can be styled through elementsConfig:

Element Type	Description
`cardNumber`	Credit card number field
`cardExpiry`	Card expiration date field
`cardCvv`	Card security code field
`name`	Cardholder name field
`email`	Email address field
`billingAddress`	Billing address field
`city`	City field
`state`	State/Province field
`zipCode`	ZIP/Postal code field
`phoneNumber`	Phone number field

Style States

Each element supports three style states:

base

object

Default styles applied to the element

focus

object

Styles applied when the element has focus

error

object

Styles applied when the element has a validation error

Styling the Form Container

The <NekudaPaymentForm> component accepts a style prop for customizing the form container appearance:

<NekudaPaymentForm 
  style={{
    backgroundColor: '#f8f9fa',
    border: '1px solid #dee2e6',
    borderRadius: '8px',
    padding: '20px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
  }}
  elementsConfig={elementsConfig}
/>

Complete Dark Theme Example

Here’s a production-ready dark theme that works across all nekuda components:

const darkTheme = {
  styles: {
    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, sans-serif',
    fontSize: '14px'
  },
  walletStyles: {
    modal: {
      backgroundColor: '#1f2937',
      color: '#f9fafb',
      border: '1px solid #374151'
    },
    cardItem: {
      backgroundColor: '#1f2937',
      color: '#f9fafb',
      border: '1px solid #374151'
    },
    button: {
      primary: {
        backgroundColor: '#3b82f6',
        color: '#ffffff'
      },
      secondary: {
        backgroundColor: '#374151',
        color: '#f9fafb'
      },
      ghost: {
        backgroundColor: 'transparent',
        color: '#9ca3af'
      }
    }
  },
  elementsConfig: {
    cardNumber: {
      base: {
        backgroundColor: '#1f2937',
        border: '1px solid #374151',
        color: '#f9fafb',
        padding: '12px',
        borderRadius: '6px'
      },
      focus: {
        borderColor: '#3b82f6',
        outline: '2px solid rgba(59, 130, 246, 0.2)'
      }
    },
    cardExpiry: {
      base: {
        backgroundColor: '#1f2937',
        border: '1px solid #374151',
        color: '#f9fafb',
        padding: '12px',
        borderRadius: '6px'
      },
      focus: {
        borderColor: '#3b82f6',
        outline: '2px solid rgba(59, 130, 246, 0.2)'
      }
    },
    // Apply similar patterns to other fields...
  }
};

// Usage
function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);
  
  return (
    <NekudaWalletProvider publicKey="pk_test_..." userId={userId}>
      <NekudaPaymentForm 
        {...(isDarkMode ? darkTheme : {})}
      />
      <NekudaCardManagement
        {...(isDarkMode ? darkTheme : {})}
      />
    </NekudaWalletProvider>
  );
}

Customizing Card Management

The <NekudaCardManagement> component uses the walletStyles prop for theming:

Quick Reference

<NekudaCardManagement
  styles={styles}           // Base typography
  elementsConfig={config}   // Form field styling  
  walletStyles={wallet}     // Component theming
  style={containerStyle}    // Container inline styles
  className="custom-class"  // CSS class for additional styling
/>

For detailed NekudaCardManagement props and examples, see the Card Management documentation.

Integrating with Your Design System

Show Using with Material-UI

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Paper, Box, Typography } from '@mui/material';
import { NekudaWalletProvider, NekudaCardManagement } from '@nekuda/react-nekuda-js';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function PaymentSettings() {
  return (
    <ThemeProvider theme={theme}>
      <NekudaWalletProvider publicKey="pk_test_..." userId={userId}>
        <Paper elevation={3} sx={{ p: 3, maxWidth: 600, mx: 'auto' }}>
          <Box sx={{ mb: 2 }}>
            <Typography variant="h5">Payment Methods</Typography>
          </Box>
          <NekudaCardManagement className="mui-card-management" />
        </Paper>
      </NekudaWalletProvider>
    </ThemeProvider>
  );
}

Show Using with Tailwind CSS

import { NekudaWalletProvider, NekudaCardManagement } from '@nekuda/react-nekuda-js';

function PaymentSettings() {
  return (
    <NekudaWalletProvider publicKey="pk_test_..." userId={userId}>
      <div className="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg">
        <h2 className="text-2xl font-bold mb-6">Payment Methods</h2>
        <NekudaCardManagement
          className="tailwind-card-management"
          style={{
            // Override specific styles while using Tailwind for the rest
            fontFamily: 'inherit'
          }}
        />
      </div>
    </NekudaWalletProvider>
  );
}

// In your global CSS
.tailwind-card-management button {
  @apply transition-all duration-200 hover:scale-105;
}

.tailwind-card-management .card-item {
  @apply border-2 border-gray-200 hover:border-blue-500 rounded-lg p-4;
}

Get Started

Frontend SDK

Backend SDK

Security

Testing

Overview

The Three-Prop Styling System

Complete Theme Example

Styling Payment Form Elements

Using elementsConfig

Available Element Types

Style States

Styling the Form Container

Complete Dark Theme Example

Customizing Card Management

Quick Reference

Integrating with Your Design System

Get Started

Frontend SDK

Backend SDK

Security

Testing

​Overview

​The Three-Prop Styling System

​Complete Theme Example

​Styling Payment Form Elements

​Using elementsConfig

​Available Element Types

​Style States

​Styling the Form Container

​Complete Dark Theme Example

​Customizing Card Management

​Quick Reference

​Integrating with Your Design System

Overview

The Three-Prop Styling System

Complete Theme Example

Styling Payment Form Elements

Using elementsConfig

Available Element Types

Style States

Styling the Form Container

Complete Dark Theme Example

Customizing Card Management

Quick Reference

Integrating with Your Design System