React payment widget with Phantom wallet integration for seamless Solana payments
Install the Aurion Client SDK via npm or yarn:
npm install @aurion/client-sdk
# or
yarn add @aurion/client-sdkGet up and running with Aurion payments in just a few lines of code:
import { Aurion } from '@aurion/client-sdk';
// Initialize with your public key
Aurion.initialize({
publicKey: 'your-public-key-here'
});// Trigger the payment checkout
Aurion.instantCheckout({
transactionId: 'your-transaction-id',
theme: 'light',
onSuccess: () => {
console.log('Payment successful!');
},
onError: (error) => {
console.error('Payment failed:', error);
}
});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>
);
}Initialize the Aurion SDK with your configuration.
| Parameter | Type | Required | Description |
|---|---|---|---|
publicKey | string | Required | Your Aurion public API key |
containerId | string | Optional | Custom container ID for the SDK (default: "aurion:root") |
Open the payment checkout interface.
| Parameter | Type | Required | Description |
|---|---|---|---|
transactionId | string | Required | Transaction ID from payment initialization |
theme | 'light' | 'dark' | Optional | UI theme (default: 'light') |
isModal | boolean | Optional | Display as modal overlay (default: true) |
enablePayViaLink | boolean | Optional | Enable pay via link option (default: false) |
onSuccess | () => void | Optional | Callback when payment succeeds |
onError | (error: string) => void | Optional | Callback when payment fails |
onClose | () => void | Optional | Callback when checkout is closed |
onConnected | (wallet: ConnectedWallet) => void | Optional | Callback when wallet is connected |
Built-in Phantom wallet integration with automatic detection and one-click connect.
Light and dark themes with customizable styling via CSS variables.
Works seamlessly on desktop, tablet, and mobile devices.
Generate shareable payment links for users without wallets.
Automatic QR code generation for mobile wallet payments.
Live transaction status updates and confirmations.