Client SDK

React payment widget with Phantom wallet integration for seamless Solana payments

Installation

Install the Aurion Client SDK via npm or yarn:

npm install @aurion/client-sdk
# or
yarn add @aurion/client-sdk
Note: The SDK requires React 19.2.0 or higher as a peer dependency.

Quick Start

Get up and running with Aurion payments in just a few lines of code:

1. Initialize the SDK

import { Aurion } from '@aurion/client-sdk';

// Initialize with your public key
Aurion.initialize({
  publicKey: 'your-public-key-here'
});

2. Open the Checkout

// Trigger the payment checkout
Aurion.instantCheckout({
  transactionId: 'your-transaction-id',
  theme: 'light',
  onSuccess: () => {
    console.log('Payment successful!');
  },
  onError: (error) => {
    console.error('Payment failed:', error);
  }
});

Complete Example

import React, { useEffect } from 'react';
import { Aurion } from '@aurion/client-sdk';

function App() {
  useEffect(() => {
    Aurion.initialize({
      publicKey: 'pk_your-public-key'
    });
  }, []);

  const handlePayment = () => {
    Aurion.instantCheckout({
      transactionId: 'txn_123456',
      theme: 'light',
      isModal: true,
      enablePayViaLink: true,
      onSuccess: () => alert('Payment successful!'),
      onError: (error) => alert('Payment failed: ' + error),
      onClose: () => console.log('Checkout closed'),
      onConnected: (wallet) => console.log('Wallet connected:', wallet)
    });
  };

  return (
    <button onClick={handlePayment}>
      Pay with Crypto
    </button>
  );
}

API Reference

Aurion.initialize(config)

Initialize the Aurion SDK with your configuration.

Parameters

ParameterTypeRequiredDescription
publicKeystringRequiredYour Aurion public API key
containerIdstringOptionalCustom container ID for the SDK (default: "aurion:root")

Aurion.instantCheckout(options)

Open the payment checkout interface.

Parameters

ParameterTypeRequiredDescription
transactionIdstringRequiredTransaction ID from payment initialization
theme'light' | 'dark'OptionalUI theme (default: 'light')
isModalbooleanOptionalDisplay as modal overlay (default: true)
enablePayViaLinkbooleanOptionalEnable pay via link option (default: false)
onSuccess() => voidOptionalCallback when payment succeeds
onError(error: string) => voidOptionalCallback when payment fails
onClose() => voidOptionalCallback when checkout is closed
onConnected(wallet: ConnectedWallet) => voidOptionalCallback when wallet is connected

Features

🦊 Phantom Wallet

Built-in Phantom wallet integration with automatic detection and one-click connect.

🎨 Theme Support

Light and dark themes with customizable styling via CSS variables.

📱 Responsive Design

Works seamlessly on desktop, tablet, and mobile devices.

🔗 Pay via Link

Generate shareable payment links for users without wallets.

📊 QR Codes

Automatic QR code generation for mobile wallet payments.

âš¡ Real-time Status

Live transaction status updates and confirmations.

Next Steps