Advanced Usage

Advanced configuration and usage patterns for React nekuda.js

Advanced Usage

Custom Element Configurations

Define a custom set and order of payment elements if <NekudaPaymentForm> doesn’t fit your needs. This feature relies on you providing an elementId to your element instances that matches the elementId specified in the configuration here.

Show Custom Element Configuration Example

const customElementsConfig = [
{ elementId: 'custom-card-number', type: 'cardNumber', options: { placeholder: 'Enter card number here' } },
{ elementId: 'custom-expiry-date', type: 'cardExpiry' },
// Add other element types like 'cardCvc', 'name', 'email' as needed
];

<NekudaWalletProvider elements={customElementsConfig} publicKey="YOUR_NEKUDA_PUBLIC_KEY">
{/* Manually render each element defined in customElementsConfig, ensuring to pass the matching elementId */}
<CardNumberElement elementId="custom-card-number" />
<CardExpiryElement elementId="custom-expiry-date" />
{/* ... other elements ... */}
</NekudaWalletProvider>

Custom Placeholders

Provide custom placeholder text for elements. You can set these globally on <NekudaWalletProvider> using the placeholders prop (targeting by element type or by a specific elementId), or directly on an individual element instance via its placeholder prop or options.placeholder.

Show Custom Placeholders Example (Provider-level)

const customPlaceholders = {
'cardNumber': 'Default Card Number Placeholder', // Applies to all CardNumberElements without a specific ID or direct prop
'paymentform-name': 'Your Full Name (via Provider)', // For an element with elementId="paymentform-name"
'custom-card-placeholder-id': 'Credit Card Number (via Provider)', // For an element with elementId="custom-card-placeholder-id"
};

<NekudaWalletProvider placeholders={customPlaceholders} publicKey="YOUR_NEKUDA_PUBLIC_KEY">
<NekudaPaymentForm />
<CardNumberElement />
<NameElement elementId="paymentform-name" />
<CardNumberElement elementId="custom-card-placeholder-id" />
<EmailElement placeholder="Directly on element" />
</NekudaWalletProvider>

Beyond visual styles, you can also customize the placeholder text for form inputs. This can be done globally using the placeholders prop on the <NekudaWalletProvider> (see the Custom Placeholders subsection under Advanced Usage for details), or for individual elements using their options prop. For example, to set a placeholder for a specific CardNumberElement:

<CardNumberElement options={{ placeholder: 'Enter your card number' }} />

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

Assistant

Responses are generated using AI and may contain mistakes.