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.
Copy
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>
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.
Copy
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:
Copy
<CardNumberElement options={{ placeholder: 'Enter your card number' }} />
Refer to the documentation for each element to see available styling selectors and properties.
