@nekuda/react-nekuda-js NPM

React nekuda-js

The official React SDK for integrating nekuda's secure payment collection system. Full documentation is available at nekuda Docs.

Overview

The React nekuda-js securely collects user payment details via PCI-compliant isolated iframes, enabling secure payment processing for your applications.

Requirements:

React 17+ or React 18
Valid nekuda public key

Key Features:

PCI-compliant security via isolated iframes
Customizable React components
Simple integration with pre-built payment form

Installation

# npm
npm install @nekuda/react-nekuda-js

# yarn
yarn add @nekuda/react-nekuda-js

Quick Integration

Step 1: Obtain your nekuda public key from the nekuda Portal.

Step 2: Import the SDK

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

Step 3: Create the Payment Form Component

// Create your payment form component
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>
  );
}

Step 4: Wrap Your App with the Provider

// 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>
  );
}