Getting Started

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

function PaymentForm() {
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 || 'Payment submission failed');
    setSucceeded(false);
  }
  setProcessing(false);
};

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

// Wrap your app with the provider
function App() {
return (
  <NekudaWalletProvider
    publicKey="YOUR_NEKUDA_PUBLIC_KEY" // Get this from the nekuda Portal
    userId="user_123" // Your user identifier
  >
    <PaymentForm />
  </NekudaWalletProvider>
);
}

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

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

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 payment token if successful
    // result.paymentMethod contains details about the payment 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 NekudaPaymentForm */}
    <button onClick={handleFormSubmit} disabled={!isReady}>
      Submit Payment Data
    </button>
  </div>
);
}