Skip to Content
DocsGet Started

Get Started

Quick Start

KryptogoKit makes it simple to add wallet connection and crypto payment capabilities to your React application. Let’s get started with a basic setup.

Installation

npm install @kryptogo/kryptogokit-sdk-react wagmi viem@2.x @tanstack/react-query

Basic Setup

Import required packages

import { WagmiProvider } from 'wagmi';
import { getDefaultConfig } from '@kryptogo/kryptogokit-sdk-react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
// Import pre-built styles
import '@kryptogo/kryptogokit-sdk-react/styles.css';

Request a WalletConnect projectId

Note

Before you get started, you need to get a projectId from WalletConnect to setup the WalletConnect connector. See WalletConnect documentation  for more information.

Request a KryptoGO clientId

Note

You need to contact KryptoGO to get a clientId to setup your app. Please Visit KryptoGO Studio  to get one.

Configure providers

const queryClient = new QueryClient();
 
// Your organization's KryptoGO clientId
const clientId = 'YOUR_CLIENT_ID';
 
// projectId for WalletConnect setup
const projectId = 'YOUR_PROJECT_ID';
 
const config = getDefaultConfig();
// or
const config = getDefaultConfig({
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Wrap providers

Make sure to wrap your app with the KryptogoKitProvider, QueryClientProvider, and WagmiProvider.

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    <KryptogoKitProvider clientId={clientId}>
      {/* Your App */}
    </KryptogoKitProvider>
  </QueryClientProvider>
</WagmiProvider>

Logging in

KryptoGO Authentication is a social login solution that allows users to sign in to your app using their phone number, email, or Google account.

Alternatively, users may sign in using their wallets via WalletConnect or scanning a wallet-specific QR code.

Next Steps

KryptogoKit SDK provides Crypto Payment and Dapp Integration features for your application. You can continue with the following guides:

Orders and PayoutsOverview