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:
Base typography and font styling applied globally. Includes fontFamily
and fontSize
.
Detailed styling for individual form elements (inputs, fields). Each element supports base
, focus
, and error
states.
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 } />
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
Basic Configuration
Complete Theme Example
< 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:
Default styles applied to the element
Styles applied when the element has focus
Styles applied when the element has a validation error
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 ;
}