Customization

// You can pass a `styles` object to `<NekudaWalletProvider>` to customize
// the appearance of the pre-built `<NekudaPaymentForm>` and individual elements.

const customStyles = {
default: { // Base styles for all elements
  base: { fontSize: '16px', color: '#32325d', fontFamily: '"Helvetica Neue", Helvetica, sans-serif' },
  focus: { borderColor: '#28a745', boxShadow: '0 0 0 0.2rem rgba(40,167,69,.25)' }, // Example: Green border on focus
  error: { color: '#fa755a', iconColor: '#fa755a', borderColor: '#dc3545' }, // Example: Red border and text on error
},
cardNumber: { // Specific styles for the card number element
  base: { fontWeight: '500' },
},
cardExpiry: { // Specific styles for card expiry
  /* ... your styles ... */
},
cardCvc: { // Specific styles for card CVC
  /* ... your styles ... */
},
name: { // Specific styles for name element
  /* ... your styles ... */
},
email: { // Specific styles for email element
  /* ... your styles ... */
}
// Add other element types or override as needed.
};

<NekudaWalletProvider styles={customStyles} publicKey="YOUR_NEKUDA_PUBLIC_KEY">
{/* This form and its elements will use the customStyles */}
<NekudaPaymentForm />

{/* Individual elements will also use customStyles if rendered directly */}
{/* <CardNumberElement /> */}
</NekudaWalletProvider>

import React, { useState } from 'react';
import {
NekudaWalletProvider,
useNekudaWallet,
NameElement,
EmailElement,
CardNumberElement,
CardExpiryElement,
CardCvcElement
} from '@nekuda/react-nekuda-js';

function MyCustomPaymentForm() {
const { elements } = useNekudaWallet();
const [error, setError] = useState(null);
const [processing, setProcessing] = useState(false);
const [succeeded, setSucceeded] = useState(false);

const handleSubmit = async (event) => {
  event.preventDefault();
  if (!elements || processing) {
    return;
  }

  setProcessing(true);
  setError(null);

  try {
    const result = await elements.submit();
    console.log("Custom form submitted successfully:", result);
    // result.token contains the information token
    // result.paymentMethod contains details about the information method
    setSucceeded(true);
  } catch(err) {
    console.error("Custom form submission error:", err);
    setError(err.message || 'An error occurred.');
    setSucceeded(false);
  }
  setProcessing(false);
};

return (
  <form onSubmit={handleSubmit} style={{ maxWidth: '400px', margin: 'auto' }}>
    {error && <div className="error-message" style={{ color: 'red', marginBottom: '10px' }}>{error}</div>}

    <div style={{ marginBottom: '10px' }}>
      <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Name on Card</label>
      <NameElement options={{ style: { base: { fontSize: '16px' }} }} placeholder="Your Name Here" />
    </div>

    <div style={{ marginBottom: '10px' }}>
      <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Email</label>
      <EmailElement placeholder="your.email@example.com" options={{ style: { base: { fontSize: '16px' }} }} />
    </div>

    <div style={{ marginBottom: '10px' }}>
      <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Card Number</label>
      <CardNumberElement placeholder="0000 1234 5678 9012" options={{ style: { base: { fontSize: '16px' }} }} />
    </div>

    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
      <div style={{ flex: '1', marginRight: '5px' }}>
        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>Expiration</label>
        <CardExpiryElement options={{ style: { base: { fontSize: '16px' }} }} />
      </div>
      <div style={{ flex: '1', marginLeft: '5px' }}>
        <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>CVC</label>
        <CardCvcElement options={{ style: { base: { fontSize: '16px' }} }} />
      </div>
    </div>

    <button type="submit" disabled={processing || !elements || succeeded} style={{
      backgroundColor: '#007bff',
      color: 'white',
      padding: '10px 15px',
      border: 'none',
      borderRadius: '4px',
      fontSize: '16px',
      cursor: 'pointer',
      width: '100%',
      marginTop: '10px'
    }}>
      {processing ? 'Processing...' : (succeeded ? 'Details Saved!' : 'Save Information Details')}
    </button>
    {succeeded && <div style={{ color: 'green', marginTop: '10px', textAlign: 'center' }}>Payment details saved successfully!</div>}
  </form>
);
}

// Ensure to wrap your custom form with NekudaWalletProvider
// function App() {
//   return (
//     <NekudaWalletProvider publicKey="YOUR_NEKUDA_PUBLIC_KEY" userId="YOUR_USER_ID">
//       <MyCustomPaymentForm />
//     </NekudaWalletProvider>
//   );
// }

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Paper, Box } from '@mui/material';

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

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

function PaymentSettings() {
  return (
    <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
        apiService={apiService}
        userId="user_123"
        className="tailwind-card-management"
        style={{
          // Override specific styles while using Tailwind for the rest
          fontFamily: 'inherit'
        }}
      />
    </div>
  );
}

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