SEAGM Responsive Header
Login
☰
Login
Product Cover

Crystal of Atlan

Crystal of Atlan

Check User ID
Question Icon
Select the Amount You Want to Buy
SELECT PAYMENT OPTION
Select Payment Currency
Payment Summary
Calculating...

Select a service and payment method to see details

/** * Initialize payment gateway selection */ function initializePaymentGateway() { // Listen for payment method changes from the optimized component document.addEventListener('paymentMethodChanged', function(e) { const { value, type, name } = e.detail; gatewayId = value; console.log('Payment method changed:', { gatewayId, type, name }); // Handle different gateway types if (type === 'wallet') { handleWalletSelection(); } else { handleGatewaySelection(gatewayId); } }); // Check for pre-selected payment method const selectedRadio = document.querySelector('.payment-radio:checked'); if (selectedRadio) { gatewayId = selectedRadio.value; if (gatewayId) { handleGatewaySelection(gatewayId); } } } /** * Set up event listeners */ function setupEventListeners() { // Currency selection change $(document).on('change', '#supported_currency', function() { let selectedCurrency = $(this).val(); if (serviceId && gatewayId) { checkCalc(serviceId, gatewayId, selectedCurrency); } }); // Service selection change - Updated for new diamond classes $(document).on('change', 'input[name="service"], .diamond-radio-input', function() { serviceId = $(this).val(); console.log('Service selected:', serviceId); // Update UI to show selected service updateServiceSelection($(this)); // Calculate if gateway is already selected if (serviceId && gatewayId) { const selectedCurrency = $('#supported_currency').val() || 'USD'; checkCalc(serviceId, gatewayId, selectedCurrency); } else if (serviceId && !gatewayId) { // Show message to select payment method $('.payment-info').html(`
ℹ️ Please select a payment method to see the price calculation.
`).show(); } }); // Buy now button click $('#buyNowBtn').on('click', handleBuyNowClick); // Initialize if service is already selected (for page refresh) initializeSelectedService(); } /** * Initialize selected service on page load */ function initializeSelectedService() { const selectedService = $('input[name="service"]:checked, .diamond-radio-input:checked'); if (selectedService.length > 0) { serviceId = selectedService.val(); console.log('Pre-selected service found:', serviceId); updateServiceSelection(selectedService); // If gateway is also selected, calculate immediately if (gatewayId) { const selectedCurrency = $('#supported_currency').val() || 'USD'; checkCalc(serviceId, gatewayId, selectedCurrency); } } } /** * Update service selection UI - Updated for diamond classes */ function updateServiceSelection($selectedInput) { // Remove active class from all service options $('.diamond-item-box').removeClass('selected-service'); $('.diamond-box-label').removeClass('selected'); $('.diamond-radio-circle').removeClass('active'); // Add active class to selected service const $selectedBox = $selectedInput.closest('.diamond-item-box'); const $selectedLabel = $selectedInput.next('.diamond-box-label'); const $selectedCircle = $selectedLabel.find('.diamond-radio-circle'); $selectedBox.addClass('selected-service'); $selectedLabel.addClass('selected'); $selectedCircle.addClass('active'); // Get service details for display const serviceName = $selectedLabel.find('.diamond-service-name').text(); const servicePrice = $selectedLabel.find('.diamond-price-text').text(); console.log('Service details:', { serviceName, servicePrice }); } /** * Handle wallet selection */ function handleWalletSelection() { gatewayId = '0'; // Wallet gateway ID // Clear currency dropdown for wallet $('#supported_currency').empty().append(''); // Calculate if service is selected if (serviceId) { checkCalc(serviceId, gatewayId, 'USD'); } console.log('Wallet payment selected'); } /** * Handle gateway selection * @param {string} selectedGatewayId - The selected payment gateway ID */ function handleGatewaySelection(selectedGatewayId) { if (!selectedGatewayId || selectedGatewayId === '0') { return handleWalletSelection(); } gatewayId = selectedGatewayId; // Fetch supported currencies for the gateway supportCurrency(selectedGatewayId); console.log('Gateway selected:', selectedGatewayId); } /** * Fetch supported currencies for a payment gateway * @param {string} selectedPaymentMethod - The selected payment gateway ID */ function supportCurrency(selectedPaymentMethod) { if (!selectedPaymentMethod) { console.error('Selected Gateway is undefined or null.'); return; } // Show loading state $('#supported_currency').empty().append(''); $.ajax({ url: "https://test.dragongroot.com/supported-currency", data: { gateway: selectedPaymentMethod }, type: "GET", timeout: 10000, // 10 second timeout success: function(data) { $('#supported_currency').empty(); if (!data || data === "" || (Array.isArray(data.data) && data.data.length === 0)) { // Default to USD if no currencies available $('#supported_currency').append(''); } else { $('#supported_currency').append(''); // Handle different response formats const currencies = data.data || data || []; currencies.forEach(function(value) { $('#supported_currency').append(``); }); } // Auto-calculate if service is already selected if (serviceId) { const firstCurrency = $('#supported_currency option:not([value=""])').first().val(); if (firstCurrency) { $('#supported_currency').val(firstCurrency); checkCalc(serviceId, selectedPaymentMethod, firstCurrency); } } }, error: function(xhr, status, error) { console.error('AJAX Error fetching currencies:', { xhr, status, error }); // Fallback to USD on error $('#supported_currency').empty().append(''); // Show user-friendly error if (xhr.status === 404) { console.warn('Currency endpoint not found, using USD as default'); } else { Notiflix.Notify.warning('Could not load currencies. Using USD as default.'); } } }); } /** * Calculate payment details based on selected service and gateway * @param {string} serviceId - The selected service ID * @param {string} gatewayId - The selected payment gateway ID * @param {string|null} selectedCurrency - The selected currency (optional) */ function checkCalc(serviceId, gatewayId, selectedCurrency = null) { if (!serviceId || !gatewayId) { console.warn('Missing required parameters for calculation:', { serviceId, gatewayId }); return; } console.log('Starting calculation with:', { serviceId, gatewayId, selectedCurrency }); // Show loading state and display the payment info box $('#loading').show(); $('.payment-info').show().html(`
Calculating payment details...
`); $.ajax({ url: "https://test.dragongroot.com/ajaxCheckTopUpCalc", type: 'POST', timeout: 15000, // 15 second timeout data: { serviceId: serviceId, gatewayId: gatewayId, selectedCurrency: selectedCurrency, _token: $('meta[name="csrf-token"]').attr('content') }, success: function(data) { console.log('Calculation response:', data); if (data && typeof data === 'object') { retrievedAmount = data.amount; let htmlData = `
PAYMENT DETAILS
`; $('.payment-info').html(htmlData).addClass('estimate-box').show(); // Enable buy button if amount is valid const amount = parseFloat(data.amount?.toString().replace(/[^\d.]/g, '')); if (amount > 0) { $('#buyNowBtn').prop('disabled', false).removeClass('disabled'); } else { $('#buyNowBtn').prop('disabled', true).addClass('disabled'); } console.log('Payment calculation successful:', { amount, payable: data.payable }); } else { throw new Error('Invalid response format'); } }, error: function(xhr, status, error) { console.error('Calculation error:', { xhr, status, error, responseText: xhr.responseText }); let errorMessage = 'Failed to calculate payment amount.'; if (xhr.responseJSON) { if (xhr.responseJSON.errors) { const errors = xhr.responseJSON.errors; for (let field in errors) { errorMessage = errors[field][0] || errorMessage; break; } } else if (xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; } } else if (xhr.status === 404) { errorMessage = 'Calculation endpoint not found. Please check your routes.'; } else if (xhr.status === 500) { errorMessage = 'Server error occurred. Please try again.'; } $('.payment-info').html(`
⚠️ ${errorMessage}
`).show(); $('#buyNowBtn').prop('disabled', true).addClass('disabled'); if (typeof Notiflix !== 'undefined') { Notiflix.Notify.failure(errorMessage); } else { console.error('Error:', errorMessage); } }, complete: function() { $('#loading').hide(); } }); } /** * BUY NOW button click handler */ function handleBuyNowClick(e) { const isLoggedIn = false; const $this = $(this); // Check login status if (!isLoggedIn) { e.preventDefault(); window.location.href = '/login?redirect=' + encodeURIComponent(window.location.href); return; } // Validate required data if (!serviceId) { e.preventDefault(); Notiflix.Notify.failure('Please select a service first.'); return; } if (!gatewayId) { e.preventDefault(); Notiflix.Notify.failure('Please select a payment method.'); return; } // Validate amount let amount = retrievedAmount?.toString().replace(/[^\d.]/g, ''); if (!amount || isNaN(amount) || parseFloat(amount) <= 0) { e.preventDefault(); Notiflix.Notify.failure('Invalid payment amount. Please try again.'); return; } // Handle different payment gateways if (gatewayId === '1011') { // Google Pay e.preventDefault(); handleGooglePayment($this); } else if (gatewayId === '38') { // Binance Payment Gateway e.preventDefault(); handleBinancePayment($this); } else if (gatewayId === 'onegateway') { // OneGateway Payment e.preventDefault(); handleOneGatewayPayment($this); } else if (gatewayId === '0') { // Wallet Payment e.preventDefault(); handleWalletPayment($this); } else { // Default form submission for other gateways $('#paymentForm').submit(); } } /** * Handle Google Pay payment (Gateway 1011) */ function handleGooglePayment($button) { disableButton($button, 5000); const selectedCurrency = $('#supported_currency').val(); if (!selectedCurrency) { Notiflix.Notify.failure('Please select a payment currency.'); return; } // Add Google Pay specific logic here console.log('Processing Google Pay payment...'); // For now, submit the form - replace with actual Google Pay integration setTimeout(() => { $('#paymentForm').submit(); }, 1000); } /** * Handle wallet payment */ function handleWalletPayment($button) { disableButton($button, 3000); const token = $('#purchaseToken').val(); if (!token) { Notiflix.Notify.failure('Please validate your details first.'); return; } console.log('Processing wallet payment...'); // Submit form for wallet payment setTimeout(() => { $('#paymentForm').submit(); }, 500); } /** * Handle Binance payment */ function handleBinancePayment($button) { disableButton($button, 9000); const selectedCurrency = $('#supported_currency').val(); if (!selectedCurrency) { Notiflix.Notify.failure('Please select a payment currency for Binance.'); return; } initiateBinancePayment(selectedCurrency); } /** * Handle OneGateway payment */ function handleOneGatewayPayment($button) { disableButton($button, 3000); initiateOneGatewayPayment(); } /** * Disable button temporarily to prevent multiple clicks */ function disableButton($button, duration) { $button.prop('disabled', true).addClass('processing'); const originalText = $button.text(); $button.html(' Processing...'); setTimeout(() => { $button.prop('disabled', false).removeClass('processing').html(originalText); }, duration); } /** * Function to handle Binance payment initiation */ function initiateBinancePayment(selectedCurrency) { let amount = retrievedAmount.toString().replace(/[^\d.]/g, ''); const token = $('#purchaseToken').val(); if (!token) { Notiflix.Notify.failure('Please validate User ID & Server ID first.'); return; } const data = { serviceId: serviceId, amount: amount, currency: selectedCurrency, token: token, redirectUrl: "https://test.dragongroot.com/user/dashboard", _token: $('meta[name="csrf-token"]').attr('content') }; $.ajax({ url: "https://test.dragongroot.com/payment/binance/initiate", type: 'POST', data: data, timeout: 15000, success: function(response) { if (response.success && response.data && response.data.paymentUrl) { window.location.href = response.data.paymentUrl; } else { Notiflix.Notify.failure(response.message || 'Payment initiation failed.'); } }, error: function(xhr, status, error) { console.error('Binance payment error:', { xhr, status, error }); let errorMessage = 'An error occurred while initiating payment.'; if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; } Notiflix.Notify.failure(errorMessage); } }); } /** * Function to handle OneGateway payment initiation */ function initiateOneGatewayPayment() { if (!customerDetails) { Notiflix.Notify.failure('Customer details are missing. Please refresh the page.'); return; } let amount = retrievedAmount.toString().replace(/[^\d.]/g, ''); const token = $('#purchaseToken').val(); if (!token) { Notiflix.Notify.failure('Please validate User ID & Server ID first.'); return; } const data = { serviceId: serviceId, amount: amount, customerName: customerDetails.customerName, customerEmail: customerDetails.customerEmail, customerNumber: customerDetails.customerNumber, redirectUrl: "https://test.dragongroot.com/user/dashboard", token: token, _token: $('meta[name="csrf-token"]').attr('content') }; $.ajax({ url: "https://test.dragongroot.com/payment/initiate", type: 'POST', data: data, timeout: 15000, success: function(response) { if (response.success && response.data && response.data.paymentUrl) { window.location.href = response.data.paymentUrl; } else { Notiflix.Notify.failure(response.message || 'Payment initiation failed.'); } }, error: function(xhr, status, error) { console.error('OneGateway payment error:', { xhr, status, error }); let errorMessage = 'An error occurred while initiating payment.'; if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; } Notiflix.Notify.failure(errorMessage); } }); } /** * Function to fetch customer details */ function fetchCustomerDetails(callback) { $.ajax({ url: "https://test.dragongroot.com/get-customer-details", type: 'GET', timeout: 10000, success: function(response) { const details = { customerName: response.name || 'Unknown', customerEmail: response.email || '[email protected]', customerNumber: response.number || response.phone || '7318649560' }; callback(null, details); }, error: function(xhr, status, error) { console.error('Error fetching customer details:', { xhr, status, error }); callback('Failed to retrieve customer details.', null); } }); } /** * Helper function to format currency */ function formatCurrency(amount, currency = 'USD') { if (!amount) return '0.00'; const num = parseFloat(amount.toString().replace(/[^\d.-]/g, '')); if (isNaN(num)) return '0.00'; return new Intl.NumberFormat('en-US', { style: 'currency', currency: currency, minimumFractionDigits: 2 }).format(num); } /** * Public API for external access */ window.PaymentCalculator = { setService: function(id) { serviceId = id; if (gatewayId) { const currency = $('#supported_currency').val(); checkCalc(serviceId, gatewayId, currency); } }, getAmount: function() { return retrievedAmount; }, recalculate: function() { if (serviceId && gatewayId) { const currency = $('#supported_currency').val(); checkCalc(serviceId, gatewayId, currency); } } };