Skip to main content

​
Installing the WhiskyPay SDK

This guide will walk you through installing and setting up the WhiskyPay SDK in your React application.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js 16 or higher installed
  • npm or yarn package manager
  • A React application (Next.js, Create React App, Vite, etc.)

​
Installation

Install the WhiskyPay SDK using npm or yarn: 
# Using npm
npm install @whisky-peak/whisky-pay-sdk

# Using yarn
yarn add @whisky-peak/whisky-pay-sdk

​
Dependencies

The SDK has peer dependencies that you might need to install if they’re not already in your project: 
npm install @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui

​
Basic Setup

Once installed, you can import the SDK in your React components: 
// Import the necessary components and functions
import { 
  createSession, 
  PaymentModal,
  fetchSession,
  verifyPayment,
  Tokens
} from '@whisky-peak/whisky-pay-sdk';

​
Solana Wallet Adapter Setup

For the best experience, we recommend setting up the Solana wallet adapter in your application. This allows customers to connect their Solana wallets for payment. Here’s a basic setup for Next.js applications: 
// _app.jsx or _app.tsx
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui';
import { PhantomWalletAdapter, SolflareWalletAdapter } from '@solana/wallet-adapter-wallets';
import { clusterApiUrl } from '@solana/web3.js';
import { useMemo } from 'react';

// Import Solana wallet adapter styles
import '@solana/wallet-adapter-react-ui/styles.css';

function MyApp({ Component, pageProps }) {
  // Set up supported wallets
  const wallets = useMemo(
    () => [
      new PhantomWalletAdapter(),
      new SolflareWalletAdapter(),
    ],
    []
  );
  
  // Set up Solana network (mainnet, testnet, or devnet)
  const network = WalletAdapterNetwork.Mainnet;
  const endpoint = useMemo(() => clusterApiUrl(network), [network]);

  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        <WalletModalProvider>
          <Component {...pageProps} />
        </WalletModalProvider>
      </WalletProvider>
    </ConnectionProvider>
  );
}

export default MyApp;

​
Environment Setup

If you plan to specify custom RPC URLs or API endpoints, you can set them up in your environment variables: 
# .env file
NEXT_PUBLIC_SOLANA_RPC_URL=https://api.mainnet-beta.solana.com
NEXT_PUBLIC_WHISKYPAY_API_URL=https://api.whiskypay.com
Then use them in your application: 
const RPC_URL = process.env.NEXT_PUBLIC_SOLANA_RPC_URL;
const API_URL = process.env.NEXT_PUBLIC_WHISKYPAY_API_URL;

// Create a session with custom API URL
const sessionId = await createSession(
  merchantId,
  customerEmail,
  planId,
  API_URL
);

​
Troubleshooting

If you encounter issues during installation:
  1. Version conflicts: Make sure your React version is compatible (React 18+ recommended)
  2. Webpack errors: Add the SDK to your transpilation process if using an older build system
  3. TypeScript errors: The SDK includes TypeScript definitions, but verify they’re properly recognized by your IDE

​
Next Steps

Now that you’ve installed the SDK, you can: