@sablepay/react-sablepay-js
v2.0.5
Published
SablePay React SDK for React Crypto payment integration with QR codes, polling, and pre-built UI components
Readme
@sablepay/react-sablepay-js
SablePay SDK for React and Next.js.
Installation
npm install @sablepay/react-sablepay-jsSetup
.env.local
NEXT_PUBLIC_SABLEPAY_API_KEY=sable_sk_sand_...
NEXT_PUBLIC_SABLEPAY_MERCHANT_ID=your-merchant-id
NEXT_PUBLIC_SABLEPAY_BASE_URL=https://api.sablepay.io/1. Create SablePayAppProvider
// providers/SablePayAppProvider.tsx
'use client';
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
import { SablePay } from '@sablepay/react-sablepay-js';
const SablePayContext = createContext<{ isInitialized: boolean; error: string | null }>({
isInitialized: false,
error: null,
});
export function useSablePayContext() {
return useContext(SablePayContext);
}
export function SablePayAppProvider({ children }: { children: ReactNode }) {
const [isInitialized, setIsInitialized] = useState(false);
const [error, setError] = useState<string | null>(null);
const apiKey = process.env.NEXT_PUBLIC_SABLEPAY_API_KEY || '';
const merchantId = process.env.NEXT_PUBLIC_SABLEPAY_MERCHANT_ID || '';
const baseUrl = process.env.NEXT_PUBLIC_SABLEPAY_BASE_URL || '';
useEffect(() => {
if (!apiKey || !merchantId) {
setError('Missing NEXT_PUBLIC_SABLEPAY_API_KEY or NEXT_PUBLIC_SABLEPAY_MERCHANT_ID');
return;
}
try {
SablePay.initialize({ apiKey, merchantId, baseUrl });
setIsInitialized(true);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : 'Initialization failed');
}
return () => { SablePay.release(); };
}, [apiKey, merchantId, baseUrl]);
return (
<SablePayContext.Provider value={{ isInitialized, error }}>
{children}
</SablePayContext.Provider>
);
}2. Add to your layout
// app/layout.tsx
import { SablePayAppProvider } from '@/providers/SablePayAppProvider';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<SablePayAppProvider>{children}</SablePayAppProvider>
</body>
</html>
);
}3. Launch a payment
Wrap your app with SablePayAppProvider, then call SablePay.launchPayment():
SablePay.launchPayment(10.00, {
onSuccess: (result) => console.log(result.formattedAmount),
onFailure: (err) => console.error(err.message),
});License
MIT