Getting Started

import React, { useState } from 'react';
import {
NekudaWalletProvider,
useNekudaWallet,
NekudaInformationForm
} from '@nekuda/react-nekuda-js';

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

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

  setProcessing(true);
  try {
    const result = await elements.submit();
    console.log('Submission Result:', result);
    setSucceeded(true);
    setError(null);
  } catch (err) {
    setError(err.message || 'Information submission failed');
    setSucceeded(false);
  }
  setProcessing(false);
};

return (
  <NekudaInformationForm>
    {error && <div className="error" style={{ color: 'red', marginBottom: '10px' }}>{error}</div>}
    <button onClick={handleSubmit} disabled={processing || succeeded} style={{ marginTop: '10px' }}>
      {processing ? 'Processing...' : 'Save Information Details'}
    </button>
    {succeeded && <div style={{ color: 'green', marginTop: '10px' }}>Payment details saved successfully!</div>}
  </NekudaInformationForm>
);
}

// Wrap your app with the provider
function App() {
// Generate or retrieve your user's ID
const userId = getUserId(); // e.g., from your auth system

return (
  <NekudaWalletProvider
    publicKey="YOUR_NEKUDA_PUBLIC_KEY" // Publishable key from nekuda Portal
    userId={userId} // Your user's unique identifier
  >
    <InformationForm />
  </NekudaWalletProvider>
);
}

// Example with user ID management
const userId = getCurrentUserId(); // Your user ID logic

<NekudaWalletProvider
publicKey="YOUR_NEKUDA_PUBLIC_KEY"
userId={userId}
>
{/* Your components that use nekuda elements */}
</NekudaWalletProvider>

<NekudaInformationForm style={{ width: '500px' }}>
{/* Optional children like custom buttons or messages can be placed here */}
</NekudaInformationForm>

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

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

const handleFormSubmit = async () => {
  if (!elements || !isReady) {
    console.log('Elements not ready or available');
    return;
  }

  try {
    const result = await elements.submit(); // Submits all collected data
    console.log('Submission Success:', result);
    // result.token contains the information token if successful
    // result.paymentMethod contains details about the information method if applicable
  } catch (submissionError) {
    console.error('Submission Error:', submissionError);
  }
};

if (error) {
  return <div>Error initializing wallet: {error.message}</div>;
}

return (
  <div>
    {/* Your custom form layout or NekudaInformationForm */}
    <button onClick={handleFormSubmit} disabled={!isReady}>
      Submit Payment Data
    </button>
  </div>
);
}