Accept Bitcoin Payments with Lightning Speed

1// NakaPay React Components with Real-time Notifications
2npm install nakapay-react
3
4import React from 'react';
5import { NakaPayButton } from 'nakapay-react';
6import 'nakapay-react/dist/styles.css';
7
8function CheckoutComponent() {
9  const handlePaymentSuccess = (payment) => {
10    console.log('Payment successful!', payment);
11    // Redirect to success page or update UI
12    window.location.href = '/success';
13  };
14  
15  const handlePaymentError = (error) => {
16    console.error('Payment failed:', error);
17    alert('Payment failed: ' + error.message);
18  };
19  
20  return (
21    <div className="p-6">
22      <h2 className="text-2xl font-bold mb-4">Complete Your Purchase</h2>
23      <div className="mb-6">
24        <p className="text-lg">Total: 50,000 sats (~$25.00)</p>
25        <p className="text-gray-600">Product purchase</p>
26      </div>
27      
28      {/* Option 1: With Ably real-time notifications (Recommended) */}
29      <NakaPayButton
30        amount={50000}
31        description="Product purchase"
32        metadata={{ orderId: '12345', customer: 'john@example.com' }}
33        useAbly={true}
34        ablyApiKey="your-ably-api-key"
35        onPaymentSuccess={handlePaymentSuccess}
36        onPaymentError={handlePaymentError}
37        className="w-full mb-4"
38      />
39      
40      {/* Option 2: With WebSocket notifications */}
41      <NakaPayButton
42        amount={50000}
43        description="Product purchase"
44        useWebhooks={true}
45        webhookUrl="ws://localhost:3002"
46        onPaymentSuccess={handlePaymentSuccess}
47        onPaymentError={handlePaymentError}
48        className="w-full mb-4"
49      />
50      
51      {/* Option 3: With Server-Sent Events */}
52      <NakaPayButton
53        amount={50000}
54        description="Product purchase"
55        useSSE={true}
56        onPaymentSuccess={handlePaymentSuccess}
57        onPaymentError={handlePaymentError}
58        className="w-full mb-4"
59      />
60      
61      {/* Option 4: Basic with polling fallback */}
62      <NakaPayButton
63        amount={50000}
64        description="Product purchase"
65        pollInterval={2000}
66        onPaymentSuccess={handlePaymentSuccess}
67        onPaymentError={handlePaymentError}
68        className="w-full"
69      />
70    </div>
71  );
72}
73
74export default CheckoutComponent;
75
76// Option 2: Backend API Approach (Alternative)
77// If you prefer to build your own components or need more control
78
79import React, { useState } from 'react';
80
81function CustomCheckoutComponent() {
82  const [showModal, setShowModal] = useState(false);
83  const [paymentData, setPaymentData] = useState(null);
84  const [loading, setLoading] = useState(false);
85  
86  const handleCreatePayment = async () => {
87    setLoading(true);
88    try {
89      // Call your backend API that uses nakapay-sdk
90      const response = await fetch('/api/create-payment', {
91        method: 'POST',
92        headers: { 'Content-Type': 'application/json' },
93        body: JSON.stringify({
94          amount: 50000,
95          description: 'Product purchase',
96          metadata: { orderId: '12345' }
97        })
98      });
99      
100      if (!response.ok) throw new Error('Failed to create payment');
101      
102      const payment = await response.json();
103      setPaymentData(payment);
104      setShowModal(true);
105      
106      // Poll for payment status
107      pollPaymentStatus(payment.id);
108      
109    } catch (error) {
110      console.error('Error creating payment:', error);
111      alert('Failed to create payment request');
112    } finally {
113      setLoading(false);
114    }
115  };
116  
117  const pollPaymentStatus = async (paymentId) => {
118    const interval = setInterval(async () => {
119      try {
120        const response = await fetch(`/api/payment-status/${paymentId}`);
121        const status = await response.json();
122        
123        if (status.status === 'completed') {
124          clearInterval(interval);
125          alert('Payment successful!');
126          setShowModal(false);
127        } else if (status.status === 'failed' || status.status === 'expired') {
128          clearInterval(interval);
129          alert('Payment failed or expired');
130          setShowModal(false);
131        }
132      } catch (error) {
133        console.error('Error checking payment status:', error);
134      }
135    }, 2000);
136    
137    setTimeout(() => clearInterval(interval), 600000);
138  };
139  
140  return (
141    <div className="p-6">
142      <h2 className="text-2xl font-bold mb-4">Complete Your Purchase</h2>
143      <button 
144        onClick={handleCreatePayment}
145        disabled={loading}
146        className="px-6 py-3 bg-[var(--sats-primary)] text-white rounded-lg"
147      >
148        {loading ? 'Creating Payment...' : 'Pay with Bitcoin'}
149      </button>
150      
151      {/* Custom modal implementation */}
152      {showModal && paymentData && (
153        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
154          <div className="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
155            <h3 className="text-xl font-bold mb-4">Lightning Payment</h3>
156            <img 
157              src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(paymentData.invoice)}`}
158              alt="Payment QR Code"
159              className="mx-auto mb-4"
160            />
161            <button
162              onClick={() => setShowModal(false)}
163              className="w-full px-4 py-2 bg-gray-200 rounded"
164            >
165              Close
166            </button>
167          </div>
168        </div>
169      )}
170    </div>
171  );
172}
173
174/*
175Backend API Example (Express.js with nakapay-sdk):
176
177const express = require('express');
178const { NakaPay } = require('nakapay-sdk');
179
180const app = express();
181const nakaPay = new NakaPay(process.env.NAKAPAY_API_KEY);
182
183app.post('/api/create-payment', async (req, res) => {
184  try {
185    const payment = await nakaPay.createPaymentRequest(req.body);
186    res.json(payment);
187  } catch (error) {
188    res.status(500).json({ error: error.message });
189  }
190});
191
192app.get('/api/payment-status/:id', async (req, res) => {
193  try {
194    const status = await nakaPay.getPaymentStatus(req.params.id);
195    res.json(status);
196  } catch (error) {
197    res.status(500).json({ error: error.message });
198  }
199});
200*/

1<!-- NakaPay Browser SDK - Ready to Use! -->
2<script src="https://nakapay.app/v1/nakapay.js"></script>
3
4<div id="payment-container">
5    <h2>Complete Your Purchase</h2>
6    <p>Total: 50,000 sats (~$25.00)</p>
7    <div id="nakapay-button-container"></div>
8</div>
9
10<script>
11    // Initialize NakaPay with your public API key
12    const nakapay = new NakaPay('pk_your_public_key_here');
13    
14    // Create a styled payment button
15    nakapay.createButton({
16        container: '#nakapay-button-container',
17        amount: 50000,
18        description: 'Product purchase',
19        metadata: { orderId: '12345' },
20        onPaymentCreated: function(payment) {
21            console.log('Payment created:', payment);
22        },
23        onPaymentSuccess: function(payment) {
24            console.log('Payment successful:', payment);
25            alert('Payment successful! Thank you for your purchase.');
26            // Redirect to success page
27            window.location.href = '/success';
28        },
29        onPaymentError: function(error) {
30            console.error('Payment error:', error);
31            alert('Payment failed: ' + error.message);
32        },
33        style: {
34            theme: 'light', // or 'dark'
35            size: 'medium', // 'small', 'medium', 'large'
36            shape: 'rounded' // 'rounded', 'pill', 'rect'
37        }
38    });
39    
40    // Alternative: Custom button with manual modal
41    document.getElementById('custom-pay-button').addEventListener('click', async function() {
42        try {
43            // Create a payment request
44            const payment = await nakapay.createPaymentRequest({
45                amount: 50000,
46                description: 'Product purchase',
47                metadata: { orderId: '12345' }
48            });
49            
50            // Show the payment modal
51            nakapay.showPaymentModal({
52                payment: payment,
53                onClose: function() {
54                    console.log('Modal closed');
55                },
56                onPaymentSuccess: function(payment) {
57                    console.log('Payment successful:', payment);
58                    alert('Payment successful!');
59                    window.location.href = '/success';
60                },
61                onPaymentError: function(error) {
62                    console.error('Payment error:', error);
63                    alert('Payment failed: ' + error.message);
64                }
65            });
66        } catch (error) {
67            console.error('Error:', error);
68            alert('Failed to create payment: ' + error.message);
69        }
70    });
71</script>
72
73<!-- Alternative: Manual Integration -->
74<!-- If you prefer to handle the payment flow manually -->
75
76<button id="manual-pay-button">Pay with Bitcoin (Manual)</button>
77
78<script>
79    document.getElementById('manual-pay-button').addEventListener('click', async function() {
80        try {
81            // Call your backend API directly (browser SDK calls this internally)
82            const response = await fetch('/api/create-payment', {
83                method: 'POST',
84                headers: { 'Content-Type': 'application/json' },
85                body: JSON.stringify({
86                    amount: 50000,
87                    description: 'Product purchase',
88                    metadata: { orderId: '12345' }
89                })
90            });
91
92            if (!response.ok) {
93                throw new Error('Failed to create payment');
94            }
95
96            const payment = await response.json();
97            
98            // Show your custom payment UI
99            showCustomPaymentModal(payment);
100            
101        } catch (error) {
102            console.error('Error:', error);
103            alert('Failed to create payment request');
104        }
105    });
106    
107    function showCustomPaymentModal(payment) {
108        // Your custom modal implementation
109        const modal = document.createElement('div');
110        modal.innerHTML = `
111            <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1000;">
112                <div style="background: white; padding: 30px; border-radius: 8px; text-align: center; max-width: 400px;">
113                    <h3>Lightning Payment</h3>
114                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.invoice)}" alt="Payment QR Code" style="margin: 20px 0;">
115                    <p style="font-size: 12px; word-break: break-all; margin: 20px 0;">${payment.invoice}</p>
116                    <button onclick="this.closest('div').remove()">Close</button>
117                </div>
118            </div>
119        `;
120        document.body.appendChild(modal);
121    }
122</script>

1// Set up a webhook handler in your backend
2// Example using Express.js
3const express = require('express');
4const app = express();
5
6app.use(express.json());
7
8app.post('/webhooks/nakapay', (req, res) => {
9  const event = req.body;
10  
11  // Verify webhook signature (recommended)
12  const signature = req.headers['x-nakapay-signature'];
13  const isValid = verifyNakaPaySignature(signature, JSON.stringify(req.body), 'YOUR_WEBHOOK_SECRET');
14  
15  if (!isValid) {
16    return res.status(400).send('Invalid signature');
17  }
18  
19  // Handle different event types
20  switch (event.type) {
21    case 'payment.created':
22      console.log('Payment created:', event.data);
23      // Update order status to 'awaiting payment'
24      break;
25      
26    case 'payment.succeeded':
27      console.log('Payment succeeded:', event.data);
28      // Fulfill the order
29      // Update order status to 'paid'
30      // Send confirmation email to customer
31      break;
32      
33    case 'payment.failed':
34      console.log('Payment failed:', event.data);
35      // Update order status to 'payment failed'
36      // Notify customer of failed payment
37      break;
38      
39    case 'payment.expired':
40      console.log('Payment expired:', event.data);
41      // Update order status to 'expired'
42      break;
43      
44    default:
45      console.log('Unhandled event type:', event.type);
46  }
47  
48  // Return a 200 response to acknowledge receipt of the event
49  res.send({ received: true });
50});
51
52// Helper function to verify webhook signature
53function verifyNakaPaySignature(signature, payload, secret) {
54  const crypto = require('crypto');
55  const hmac = crypto.createHmac('sha256', secret);
56  const expectedSignature = hmac.update(payload).digest('hex');
57  return crypto.timingSafeEqual(
58    Buffer.from(signature),
59    Buffer.from(expectedSignature)
60  );
61}
62
63app.listen(3000, () => {
64  console.log('Webhook server running on port 3000');
65});