Skip to Content
@okito/core@okito/core

@okito/core

The @okito/core package provides essential payment infrastructure with React components and backend utilities for integrating Solana payments into your applications. This package handles payment session creation, checkout flows, and provides both frontend components and backend utilities.

Choose Your Framework

Next.js
React framework for building payment interfaces
Express
Node.js backend for payment session management

Payment Flow

Understanding how Okito payments work:

  1. User clicks BuyButton → Payment session is created via your backend
  2. User is redirected → checkout.okito.dev (Okito’s hosted checkout page)
  3. User completes payment → Using their Solana wallet
  4. User is redirected back → callbackUrl (your app’s success page)

The callbackUrl is where users return after successful payment, while checkout.okito.dev is Okito’s hosted payment page.

Features

  • BuyButton Component: Pre-built React component for seamless payment integration
  • Payment Session Management: Backend utilities for creating secure payment sessions
  • TypeScript Support: Full type safety with comprehensive interfaces and schemas
  • Flexible Styling: Multiple variants and custom styling options for UI components
  • Error Handling: Built-in error handling and validation for both frontend and backend
  • Idempotency: Automatic idempotency key generation for safe retries
  • Webhook Support: Built-in webhook handling for payment status updates
  • Framework Agnostic: Works with Next.js, React, Express, and other Node.js frameworks

Installation

npm install @okito/core
# or
yarn add @okito/core
# or
pnpm add @okito/core

Getting Started

Choose your preferred framework from the options above to get started with Okito payments. Each framework has its own setup guide with detailed implementation steps.

The @okito/core package provides both frontend components and backend utilities to seamlessly integrate Solana payments into your application.

Components

BuyButton

A pre-built React component that handles the complete payment flow. The BuyButton component integrates seamlessly with your backend to create payment sessions and redirect users to Okito’s hosted checkout page.

Key Features:

  • One-click payment integration
  • Automatic payment session creation
  • Built-in error handling
  • Customizable styling and variants
  • TypeScript support

Configuration: The component requires a configuration object with your backend URL, callback URL, and product information. Users are redirected to checkout.okito.dev for payment processing and then returned to your specified callback URL upon completion.

Backend Functions

createPaymentSession

Creates a payment session with Okito’s payment infrastructure. This function is called from your backend API endpoint when a user initiates a payment.

Parameters:

  • products: Array of products to purchase
  • metadata: Optional metadata object for tracking
  • apiKey: Your Okito API key

Returns: A payment session response containing the session ID or error information.

Webhook Handling

Okito sends webhook notifications to your server when payment status changes. Implement a webhook endpoint to receive these notifications and update your application state accordingly.

Webhook Events:

  • Payment completed
  • Payment failed
  • Payment cancelled

Security: Always verify webhook signatures to ensure the requests are coming from Okito’s servers.

TypeScript Support

The package exports comprehensive TypeScript types for type safety, including payment request/response types, product interfaces, and configuration objects.

Styling & Customization

The BuyButton component supports multiple styling options:

Built-in Variants:

  • Default, outline, ghost, and destructive styles
  • Small, medium, and large sizes
  • Custom CSS classes and inline styles

Error Handling

Built-in error handling covers network issues, validation errors, and payment failures. Custom error callbacks allow you to provide user-friendly error messages.

Best Practices

  1. Validate products on your backend before creating payment sessions
  2. Use HTTPS for all API endpoints in production
  3. Handle errors gracefully with user-friendly messages
  4. Test thoroughly in development before production deployment
  5. Keep API keys secure and never expose them in client-side code
  6. Verify webhook signatures to ensure security

Support

For questions, issues, or feature requests:

Last updated on
Getting StartedConfiguration