Customization

You can customize the appearance of the pre-built <NekudaPaymentForm> and individual payment elements by passing a styles object to the <NekudaWalletProvider>. This allows you to define base styles, as well as styles for specific states (such as focus or error) and individual element types.

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

Refer to the documentation for each element to see available styling selectors and properties.

Building Your Own Form with Individual Elements

For complete control over your payment form’s structure and layout, you can import and use individual payment elements provided by the SDK. This allows you to arrange fields, add custom labels, and integrate them seamlessly into your existing design.

Available elements include:

NameElement
EmailElement
CardNumberElement
CardExpiryElement
CardCvcElement

Each element component accepts an optional elementId prop.

If you provide an elementId, it allows the element to be targeted by instance-specific configurations defined in the <NekudaWalletProvider> (such as custom styles or placeholders via the elements or placeholders props on the Provider). This is useful for advanced customization of specific fields.
If you omit the elementId, the element will automatically generate a unique internal ID. It will still inherit type-based styles and global configurations from the Provider but cannot be targeted for instance-specific configurations that rely on a known ID.

All elements also accept style and placeholder props for direct, instance-specific overrides.

Each element securely renders an iframe managed by nekuda to handle sensitive data.

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 payment token
    // result.paymentMethod contains details about the payment 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 Payment 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>
//   );
// }

Remember to:

Wrap your custom form component (or its ancestor) with <NekudaWalletProvider>.
Use the useNekudaWallet() hook to access elements.submit() for form submission.
You can pass options (including style) or a direct placeholder prop to individual elements for element-specific styling or placeholders, overriding global settings from the Provider if needed.

Get Started

Frontend SDK

Backend SDK

Customization

Customization

Building Your Own Form with Individual Elements

Get Started

Frontend SDK

Backend SDK

​Customization

​Building Your Own Form with Individual Elements

Customization

Building Your Own Form with Individual Elements