Error Handling

Handle errors and troubleshoot issues with React nekuda.js

Error Handling

It’s important to handle potential errors that can occur during the payment process or SDK initialization.

Submission Errors

When using elements.submit(), always include a try...catch block to handle submission failures. These can occur due to invalid input, network issues, or other processing problems.

Show Handling Submission Errors Example

// Inside your component that calls elements.submit()
const handleSubmit = async (event) => {
event.preventDefault();
if (!elements || processing) return;

setProcessing(true);
setError(null); // Clear previous errors

try {
  const result = await elements.submit();
  console.log('Submission Result:', result);
  setSucceeded(true);
  // Handle successful submission (e.g., show a success message, redirect)
} catch (err) {
  console.error('Submission Error:', err);
  setError(err.message || 'An unexpected error occurred during submission.');
  setSucceeded(false);
}
setProcessing(false);
};

Initialization Errors

The useNekudaWallet() hook provides an error state that indicates if there was an issue initializing the wallet, often due to an invalid public key or network problems preventing the SDK from loading necessary resources.

Show Handling Initialization Errors Example

import { useNekudaWallet } from '@nekuda/react-nekuda-js';

function MyWalletComponent() {
const { elements, isReady, error } = useNekudaWallet();

if (error) {
  // Display an error message to the user or log it
  return <div style={{ color: 'red' }}>Error initializing payment services: {error.message}</div>;
}

if (!isReady) {
  // Show a loading state while the SDK is initializing
  return <div>Loading payment form...</div>;
}

// ... rest of your component logic using elements
return (
  <form>
    {/* Your form elements */}
    <button type="submit" disabled={!elements}>Submit</button>
  </form>
);
}

---

Troubleshooting

• Check Browser Console: Look for any error messages or warnings in your browser’s developer console. These often provide clues about integration problems.
• Verify Public Key: Ensure that the publicKey you are using is correct, valid, and matches the environment (test/live) you intend to use.
• Iframe Blocking: Confirm that no browser extensions, corporate firewalls, or Content Security Policies (CSP) are blocking the loading or functioning of the iframes from Nekuda’s domains.
• SDK Version: Ensure you are using a compatible and up-to-date version of the @nekuda/react-nekuda-js.

For further assistance, please refer to the Nekuda Support Portal or contact our support team.

Assistant

Responses are generated using AI and may contain mistakes.