SEAGM Responsive Header
Login
☰
Login
Product Cover

Marvel Duel

Marvel Duel

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); } } };