> ## Documentation Index
> Fetch the complete documentation index at: https://whiskypeak.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Solana Quickstart Guide
> Get started with Solana payments in minutes
# Solana Quickstart
This guide will help you quickly integrate Solana-based cryptocurrency payments into your application using WhiskyPay.
## Prerequisites
* A React application
* Node.js 16+ installed
* npm or yarn package manager
* WhiskyPay merchant account (register at [pay.whiskypeak.com](https://pay.whiskypeak.com))
## Step 1: Installation
Install the WhiskyPay SDK package:
```bash theme={null}
npm install @whisky-peak/whisky-pay-sdk
# or
yarn add @whisky-peak/whisky-pay-sdk
```
## Step 2: Basic Integration
Add the WhiskyPay payment flow to your React application:
```jsx theme={null}
import React, { useState } from 'react';
import { createSession, PaymentModal } from '@whisky-peak/whisky-pay-sdk';
function CheckoutPage() {
const [sessionId, setSessionId] = useState(null);
const [loading, setLoading] = useState(false);
const handleCheckout = async () => {
setLoading(true);
try {
// Replace with your actual merchant ID from the dashboard
const merchantId = 'your-saas-id';
// Create a payment session
const session = await createSession(
merchantId,
'customer@example.com', // Customer's email
'premium-plan' // Plan identifier
);
if (session) {
setSessionId(session);
} else {
alert('Failed to create payment session');
}
} catch (error) {
console.error('Error creating session:', error);
alert('An error occurred');
} finally {
setLoading(false);
}
};
// When payment is complete, redirect to a thank you page
const handlePaymentComplete = () => {
window.location.href = '/thank-you';
};
return (
{!sessionId ? (
) : (
)}
);
}
export default CheckoutPage;
```
## Step 3: Configure Your Merchant Account
Before testing, make sure you've:
1. Registered at [pay.whiskypeak.com](https://pay.whiskypeak.com)
2. Connected your Solana wallet (where payments will be received)
3. Set up your merchant profile (name, logo, callback URL)
4. Obtained your `saasId` from the dashboard
## Step 4: Customize The Payment Modal
The PaymentModal component accepts the following props:
| Prop | Type | Description |
| ----------------- | -------- | ---------------------------------------- |
| `sessionId` | string | Session ID from createSession (required) |
| `RPC_URL` | string | Solana RPC URL (required) |
| `onRedirect` | function | Callback when payment completes |
| `theme` | object | Custom styling options |
| `desiredToken` | string | Preferred token (USDC, SOL, etc.) |
| `showCloseButton` | boolean | Allow users to close the modal |
| `onClose` | function | Callback when modal is closed |
Example with custom styling:
```jsx theme={null}
setSessionId(null)}
/>
```
## Step 5: Handle Payment Notifications
When a payment is completed, WhiskyPay will:
1. Call your webhook URL (specified in your merchant dashboard)
2. Send email confirmations to both you and your customer
3. Redirect the customer to your specified redirect URL
Create a webhook endpoint to receive payment notifications:
```javascript theme={null}
// Example webhook handler (Next.js API route)
export default async function handler(req, res) {
if (req.method !== 'POST') {
return res.status(405).end();
}
const { email, plan, price, status, timestamp, signature } = req.body;
// Validate the webhook signature (important for security)
if (!validateSignature(signature, process.env.WEBHOOK_SECRET)) {
return res.status(401).json({ error: 'Invalid signature' });
}
// Update your database to mark the subscription as active
if (status === 'completed') {
await activateUserSubscription(email, plan);
}
// Return a 200 status to acknowledge receipt
res.status(200).json({ success: true });
}
```
## Step 6: Testing
To test your integration:
1. Use a real Solana wallet with testnet or devnet SOL
2. Set `RPC_URL` to a testnet or devnet endpoint during testing:
```
https://api.devnet.solana.com
```
3. Make a test payment to verify the entire flow
4. Check that your webhook receives the payment notification
## Step 7: Going to Production
Before going live:
1. Update your RPC\_URL to use a production endpoint:
```
https://api.mainnet-beta.solana.com
```
Or even better, use a paid RPC provider for reliability
2. Update your webhook endpoint to handle production payments
3. Set up monitoring for your webhook endpoint
4. Test the entire flow in a staging environment
## Implementation with Next.js
For Next.js applications, here's a complete example:
```jsx theme={null}
// pages/checkout.js
import { useState } from 'react';
import { createSession, PaymentModal } from '@whisky-peak/whisky-pay-sdk';
import { useRouter } from 'next/router';
export default function Checkout() {
const [sessionId, setSessionId] = useState(null);
const [loading, setLoading] = useState(false);
const router = useRouter();
const handleCheckout = async () => {
setLoading(true);
try {
const session = await createSession(
process.env.NEXT_PUBLIC_MERCHANT_ID,
'customer@example.com',
'premium-plan'
);
if (session) {
setSessionId(session);
}
} catch (error) {
console.error('Error:', error);
} finally {
setLoading(false);
}
};
return (