Interactive code examples for integrating Aurion payments
Simple payment button with minimal configuration
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_abc123',
onSuccess: () => {
alert('Payment successful!');
}
});
};
return (
<button onClick={handlePayment}>
Pay Now
</button>
);
}Use dark theme for better integration with dark mode apps
Aurion.instantCheckout({
transactionId: 'txn_abc123',
theme: 'dark', // 'light' or 'dark'
onSuccess: () => console.log('Payment complete')
});Handle all payment lifecycle events
Aurion.instantCheckout({
transactionId: 'txn_abc123',
theme: 'light',
isModal: true,
enablePayViaLink: true,
onSuccess: () => {
console.log('Payment completed successfully');
// Redirect or show success message
},
onError: (error) => {
console.error('Payment error:', error);
// Handle error (insufficient funds, rejected, etc.)
},
onClose: () => {
console.log('Checkout closed by user');
// Cleanup or reset state
},
onConnected: (wallet) => {
console.log('Wallet connected:', wallet);
// Update UI to show connected wallet
}
});Display checkout inline instead of as a modal
Aurion.instantCheckout({
transactionId: 'txn_abc123',
isModal: false, // Embeds in page
theme: 'light'
});Handle different error scenarios gracefully
Aurion.instantCheckout({
transactionId: 'txn_abc123',
onError: (error) => {
if (error.includes('insufficient')) {
alert('Insufficient balance. Please add more funds.');
} else if (error.includes('rejected')) {
alert('Transaction was rejected.');
} else if (error.includes('network')) {
alert('Network error. Please try again.');
} else {
alert('Payment failed: ' + error);
}
}
});