razorpay.com"]'; const OUR_CHECKOUT_SCRIPT_SRC = 'https://checkout.razorpay.com/v1/checkout.js'; // Restore the SDK + scripts we borrowed. Idempotent — safe on every exit path. const teardownRazorpay = () => { if (!previousSaved) return; // nothing borrowed / already restored // 1. Remove OUR checkout.js so it can't keep hijacking window.Razorpay. if (ourScript && typeof ourScript.remove === 'function') { ourScript.remove(); } ourScript = null; // 2. Hand the global back to core (or clear it if core had none). try { delete window.Razorpay; } catch (e) { window.Razorpay = undefined; } if (previousRazorpay !== undefined) { window.Razorpay = previousRazorpay; } // 3. Re-insert the core razorpay scripts we removed during takeover so the // storefront's own (core) checkout works again after our popup closes. if (typeof document !== 'undefined' && typeof document.createElement === 'function') { removedCoreScripts.forEach(({ src, async, defer }) => { if (!src) return; if (typeof document.querySelector === 'function' && document.querySelector(`script[src="${src}"]`)) { return; // already back on the page } const script = document.createElement('script'); script.src = src; if (async) script.async = true; if (defer) script.defer = true; document.head.appendChild(script); }); } logRazorpayFrontend('razorpay SDK restored to core', { reinserted_scripts: removedCoreScripts.map((s) => s.src).filter(Boolean), restored_previous_global: previousRazorpay !== undefined, }); removedCoreScripts = []; previousRazorpay = undefined; previousSaved = false; ourSdk = null; }; const shouldUseRazorpayForIdentifier = (paymentIdentifier) => { return SUPPORTED_PAYMENT_IDENTIFIERS.includes(paymentIdentifier?.toLowerCase()); }; const resolvePaymentIdentifier = (paymentMethod = {}) => { if (typeof getPaymentMethodIdentifier === 'function') { return getPaymentMethodIdentifier(paymentMethod); } const meta = paymentMethod?.meta || paymentMethod?.payment_meta || {}; return meta.payment_identifier || paymentMethod?.payment_identifier || null; }; const shouldUseRazorpayForPaymentMethods = (paymentMethods = []) => { return paymentMethods.some((paymentMethod) => shouldUseRazorpayForIdentifier(resolvePaymentIdentifier(paymentMethod)) ); }; const getCheckoutPaymentIdentifier = (paymentData = {}) => { if (paymentData.payment_identifier) { return paymentData.payment_identifier; } const paymentMethods = paymentData.payment_methods || []; for (const paymentMethod of paymentMethods) { const identifier = resolvePaymentIdentifier(paymentMethod); if (identifier) { return identifier; } } return paymentData.payment_identifier; }; const getSplitPaymentDiagnostics = (payload = {}) => { const paymentMethods = payload.payment_methods || []; const rootModeMatch = payload.payment_mode === SPLIT_PAYMENT_MODE; const matchingMethods = paymentMethods .map((paymentMethod, index) => ({ index, mode: paymentMethod?.mode, name: paymentMethod?.name, payment_identifier: resolvePaymentIdentifier(paymentMethod), matchesSplit: paymentMethod?.mode === SPLIT_PAYMENT_MODE || paymentMethod?.name === SPLIT_PAYMENT_MODE, })) .filter((entry) => entry.matchesSplit); return { isSplit: rootModeMatch || matchingMethods.length > 0, payment_mode: payload.payment_mode, payment_methods_count: paymentMethods.length, rootModeMatch, matchingMethods, detectedVia: rootModeMatch ? 'payment_mode' : matchingMethods.length > 0 ? 'payment_methods' : null, }; }; const isSplitPaymentMode = (payload = {}) => getSplitPaymentDiagnostics(payload).isSplit; const getPayableAmountFromCart = (cartItems = {}, sourceOverrides = {}) => { const breakupValues = cartItems.breakup_values || sourceOverrides.breakup_values; const displayTotal = breakupValues?.display?.find((item) => item.key === 'total')?.value; if (displayTotal != null && displayTotal !== '') { return Number(displayTotal); } const rawTotal = breakupValues?.raw?.total; if (rawTotal != null && rawTotal !== '') { return Number(rawTotal); } return cartItems.cart_value || sourceOverrides.amount; }; const getPayableAmountForPopup = (cartItems = {}, sourceOverrides = {}, paymentMethods = [], paymentOrderInput) => { if (paymentOrderInput) { const razorpayPaymentMethod = getRazorpayPaymentMethodFromList(paymentMethods); if (razorpayPaymentMethod?.amount != null && razorpayPaymentMethod.amount !== '') { return Number(razorpayPaymentMethod.amount); } } return getPayableAmountFromCart(cartItems, sourceOverrides); }; const getRazorpayPaymentMethodFromList = (paymentMethods = []) => { const methods = Array.isArray(paymentMethods) ? paymentMethods : [paymentMethods].filter(Boolean); return ( methods.find((paymentMethod) => shouldUseRazorpayForIdentifier(resolvePaymentIdentifier(paymentMethod)) ) || methods[0] || {} ); }; const getPrimaryUserEmail = (userData = {}) => { const emails = userData.emails || []; const primary = emails.find((entry) => entry?.primary && entry?.email) || emails.find((entry) => entry?.email); return primary?.email || null; }; const getPrimaryUserPhone = (userData = {}) => { const phones = userData.phone_numbers || []; const primary = phones.find((entry) => entry?.primary && entry?.phone) || phones.find((entry) => entry?.phone); return primary?.phone || null; }; const getUserDisplayName = (userData = {}) => { const fullName = [userData.first_name, userData.last_name].filter(Boolean).join(' ').trim(); return fullName || null; }; const buildRazorpayPopupPayload = ({ state, cartItems, paymentMethods = [], sourceOverrides = {}, orderId, paymentOrderInput, extraFields = {}, }) => { const breakupValues = cartItems.breakup_values || sourceOverrides.breakup_values; const razorpayPaymentMethod = getRazorpayPaymentMethodFromList(paymentMethods); const razorpayMeta = razorpayPaymentMethod?.meta || razorpayPaymentMethod?.payment_meta || {}; const userData = state.auth?.user_data || {}; const customerEmail = getPrimaryUserEmail(userData); const customerPhone = getPrimaryUserPhone(userData); const customerName = getUserDisplayName(userData); const payload = { ...(orderId ? { order_id: orderId } : { id: cartItems.id, cart_id: cartItems.id || cartItems.cart_id }), payment_methods: paymentMethods, amount: getPayableAmountForPopup(cartItems, sourceOverrides, paymentMethods, paymentOrderInput), cart_value: cartItems.cart_value || sourceOverrides.cart_value, breakup_values: breakupValues, custom_cart_meta: cartItems.custom_cart_meta || sourceOverrides.custom_cart_meta, cart: { breakup_values: breakupValues, cart_value: cartItems.cart_value || sourceOverrides.cart_value, payment_methods: paymentMethods, custom_cart_meta: cartItems.custom_cart_meta || sourceOverrides.custom_cart_meta, }, user_id: userData.user_id || userData.id, applicationName: state.configuration?.application?.name, logo_url: state.configuration?.application?.logo?.secure_url, theme_color: state.configuration?.application?.theme?.primary_color || '#3399cc', payment_mode: razorpayPaymentMethod.mode || razorpayPaymentMethod.name, aggregator: razorpayMeta.payment_gateway, payment_identifier: resolvePaymentIdentifier(razorpayPaymentMethod), ...extraFields, // Prefer FPI auth user_data over checkout request extras for Razorpay prefill. ...(customerEmail ? { customer_email: customerEmail } : {}), ...(customerName ? { customer_name: customerName } : {}), ...(customerPhone ? { phone: customerPhone } : {}), }; if (paymentOrderInput) { payload.payment_order_input = { ...paymentOrderInput, payment_methods: paymentMethods, }; } logRazorpayFrontend('buildRazorpayPopupPayload', { order_id: payload.order_id, cart_id: payload.cart_id || payload.id, amount: payload.amount, cart_value: payload.cart_value, payment_methods_count: (payload.payment_methods || []).length, payment_identifier: payload.payment_identifier, payment_mode: payload.payment_mode, has_customer_email: !!payload.customer_email, has_phone: !!payload.phone, has_breakup_values: !!payload.breakup_values, breakup_total: payload.breakup_values?.display?.find((item) => item.key === 'total')?.value, store_credit: payload.breakup_values?.display?.find((item) => item.key === 'store_credit')?.value, }); return payload; }; const fetchRazorpayPopup = async (payload, source = 'unknown') => { const state = window.fpi.store.getState(); const baseUrl = `https://${state.custom.appHostName}/ext/razorpay-express`; const dynamicHeaders = getDynamicHeaders(state); logRazorpayFrontend('fetchRazorpayPopup request', { source, baseUrl, order_id: payload?.order_id, cart_id: payload?.cart_id || payload?.id, payment_mode: payload?.payment_mode, payment_identifier: payload?.payment_identifier, amount: payload?.amount, }); const response = await fetch(`${baseUrl}/razorpay-popup`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'ngrok-skip-browser-warning': 'true', ...dynamicHeaders, credentials: 'include' }, body: JSON.stringify(payload) }); if (!response.ok) { logRazorpayFrontend('fetchRazorpayPopup failed', { source, status: response.status, statusText: response.statusText, }); throw new Error(`HTTP ${response.status}`); } const result = await response.json(); if (result.success && result.popup_config) { logRazorpayFrontend('fetchRazorpayPopup success', { source, checkout_id: result.checkout_id, has_checkout_cart: !!result.checkout_cart, has_create_payment_order: !!result.create_payment_order, checkout_cart_order_id: result.checkout_cart?.order_id || null, }); return result; } logRazorpayFrontend('fetchRazorpayPopup invalid response', { source, success: result?.success, message: result?.message, }); throw new Error(result.message || 'Invalid popup config received'); }; const openRazorpayPopupFromResult = (popupResult) => { ensureRazorpayLoaded(() => openRazorpayPopup(popupResult.popup_config, popupResult.checkout_id)); }; const callRazorpayPopup = async (payload, source = 'unknown') => { const popupResult = await fetchRazorpayPopup(payload, source); openRazorpayPopupFromResult(popupResult); return popupResult; }; const buildCreatePaymentOrderResponse = (popupResult, paymentOrderInput) => { const graphqlResponse = popupResult?.create_payment_order; if (graphqlResponse && graphqlResponse.success !== false) { return graphqlResponse; } if (popupResult?.checkout_id && paymentOrderInput?.order_id) { return { success: true, message: graphqlResponse?.message || '', order_id: paymentOrderInput.order_id, callback_url: graphqlResponse?.callback_url || null, payment_confirm_url: graphqlResponse?.payment_confirm_url || null, data: graphqlResponse?.data || { merchant_order_id: paymentOrderInput.order_id, merchant_transaction_id: popupResult.checkout_id } }; } return null; }; const handleRazorpayCheckout = async (request) => { const { cartCheckoutDetailRequestInput: paymentData } = request || {}; logRazorpayFrontend('checkoutCart hook entered', { hasRequest: !!request, requestKeys: Object.keys(request || {}), hasPaymentData: !!paymentData, paymentDataKeys: paymentData ? Object.keys(paymentData) : [], }); if (!paymentData) { logRazorpayFrontend('checkoutCart pass-through to core', { reason: 'missing_cartCheckoutDetailRequestInput', }); return null; } const splitDiagnostics = getSplitPaymentDiagnostics(paymentData); logRazorpayFrontend('checkoutCart split evaluation', splitDiagnostics); if (splitDiagnostics.isSplit) { logRazorpayFrontend('checkoutCart pass-through to core', { reason: 'split_payment_enabled', detectedVia: splitDiagnostics.detectedVia, payment_mode: splitDiagnostics.payment_mode, matchingMethods: splitDiagnostics.matchingMethods, }); return; } const paymentIdentifier = getCheckoutPaymentIdentifier(paymentData); const willIntercept = shouldUseRazorpayForIdentifier(paymentIdentifier); logRazorpayFrontend('checkoutCart identifier evaluation', { paymentIdentifier, supportedIdentifiers: SUPPORTED_PAYMENT_IDENTIFIERS, willIntercept, payment_methods: (paymentData.payment_methods || []).map((paymentMethod, index) => ({ index, payment_identifier: resolvePaymentIdentifier(paymentMethod), mode: paymentMethod?.mode, name: paymentMethod?.name, })), }); if (!willIntercept) { logRazorpayFrontend('checkoutCart pass-through to core', { reason: 'unsupported_payment_identifier', paymentIdentifier, }); return; } logRazorpayFrontend('checkoutCart intercepting for full express payment', { paymentIdentifier, payment_mode: paymentData.payment_mode, action: 'calling_razorpay_popup_instead_of_core_checkoutCart', }); const state = window.fpi.store.getState(); const cartId = state?.cart?.cart_items?.id; if (!cartId) { logRazorpayFrontend('checkoutCart blocked', { reason: 'missing_cart_id', cartStatePath: 'fpi.store.getState().cart.cart_items.id', }); console.error('[RAZORPAY_FRONTEND] Missing cart id at fpi.store.getState().cart.cart_items.id'); alert('Cart id missing. Please refresh cart and try again.'); return; } const cartItems = state.cart?.cart_items || {}; const payload = buildRazorpayPopupPayload({ state, cartItems, paymentMethods: paymentData.payment_methods || [], sourceOverrides: { breakup_values: cartItems.breakup_values || paymentData.breakup_values, cart_value: paymentData.cart_value || cartItems.cart_value, custom_cart_meta: paymentData.custom_cart_meta || cartItems.custom_cart_meta, payment_methods: paymentData.payment_methods, amount: paymentData.amount, }, extraFields: paymentData, }); try { const popupResult = await callRazorpayPopup(payload, 'checkoutCart'); const checkoutCart = popupResult?.checkout_cart || null; logRazorpayFrontend('checkoutCart intercept completed', { cartId, paymentIdentifier, checkout_id: popupResult?.checkout_id, has_checkout_cart: !!checkoutCart, checkout_cart_order_id: checkoutCart?.order_id || null, checkout_cart_success: checkoutCart?.success, }); // Return the exact checkoutCart GraphQL response from /razorpay-popup (not null). return { handled: true, response: { data: { checkoutCart : checkoutCart } } }; } catch (error) { logRazorpayFrontend('checkoutCart intercept failed', { cartId, paymentIdentifier, error: error?.message, }); console.error('Razorpay integration failed:', error); alert(`Payment initialization failed: ${error?.message || 'Please try again.'}`); return { handled: true, response: { data: { checkoutCart: null } } }; } }; const extractPaymentOrderInput = (request = {}) => { return ( request.paymentOrderInput || request.payment_order_input || request.variables?.paymentOrderInput || request.variables?.payment_order_input || null ); }; const handleRazorpayCreatePaymentOrder = async (request) => { const paymentOrderInput = extractPaymentOrderInput(request); logRazorpayFrontend('createPaymentOrder hook entered', { hasRequest: !!request, requestKeys: Object.keys(request || {}), hasPaymentOrderInput: !!paymentOrderInput, paymentOrderInputKeys: paymentOrderInput ? Object.keys(paymentOrderInput) : [], }); if (!paymentOrderInput) { logRazorpayFrontend('createPaymentOrder pass-through to core', { reason: 'missing_paymentOrderInput', }); return; } const paymentMethods = paymentOrderInput.payment_methods || []; const splitDiagnostics = getSplitPaymentDiagnostics(paymentOrderInput); const willUseRazorpay = shouldUseRazorpayForPaymentMethods(paymentMethods); logRazorpayFrontend('createPaymentOrder evaluation', { order_id: paymentOrderInput.order_id, payment_methods_count: paymentMethods.length, splitDiagnostics, payment_methods: paymentMethods.map((paymentMethod, index) => ({ index, payment_identifier: resolvePaymentIdentifier(paymentMethod), mode: paymentMethod?.mode, name: paymentMethod?.name, amount: paymentMethod?.amount, })), willUseRazorpay, }); if (!willUseRazorpay) { logRazorpayFrontend('createPaymentOrder pass-through to core', { reason: 'unsupported_payment_methods', order_id: paymentOrderInput.order_id, }); return; } logRazorpayFrontend('createPaymentOrder intercepting for razorpay-express', { order_id: paymentOrderInput.order_id, action: 'calling_razorpay_popup_instead_of_core_createPaymentOrder', }); const state = window.fpi.store.getState(); const cartItems = state.cart?.cart_items || {}; const payload = buildRazorpayPopupPayload({ state, cartItems, paymentMethods, sourceOverrides: { breakup_values: cartItems.breakup_values, amount: paymentOrderInput.amount, }, orderId: paymentOrderInput.order_id, paymentOrderInput, }); try { const popupResult = await fetchRazorpayPopup(payload, 'createPaymentOrder'); const createPaymentOrderResponse = buildCreatePaymentOrderResponse(popupResult, paymentOrderInput); if (!createPaymentOrderResponse) { logRazorpayFrontend('createPaymentOrder intercept failed', { reason: 'missing_create_payment_order_response', order_id: paymentOrderInput.order_id, }); console.error('[RAZORPAY_FRONTEND] Missing createPaymentOrder response from razorpay-popup'); alert('Payment initialization failed. Please try again.'); return { response: { data: { createPaymentOrder: null } } }; } openRazorpayPopupFromResult(popupResult); logRazorpayFrontend('createPaymentOrder intercept completed', { order_id: paymentOrderInput.order_id, checkout_id: popupResult.checkout_id, }); return { handled: true, response: { data: { createPaymentOrder: null } } }; } catch (error) { logRazorpayFrontend('createPaymentOrder intercept failed', { order_id: paymentOrderInput.order_id, error: error?.message, }); console.error('Razorpay split payment integration failed:', error); alert('Payment initialization failed. Please try again.'); } return { handled: true, response: { data: { createPaymentOrder: null } } }; }; const getDynamicHeaders = (state) => { const headers = {}; // Debug state data for header generation console.log('[HEADER_DEBUG] State data for header generation:', { hasConfiguration: !!state.configuration, hasApplication: !!state.configuration?.application, applicationId: state.configuration?.application?.id, companyId: state.configuration?.application?.company_id, hasAuth: !!state.auth, hasUserData: !!state.auth?.user_data, userId: state.auth?.user_data?.user_id }); // Set required x-application-data header if (state.configuration?.application) { const appData = { id: state.configuration.application.id, company_id: state.configuration.application.company_id }; headers['x-application-data'] = JSON.stringify(appData); console.log('[HEADER_DEBUG] x-application-data set:', appData); } else { console.log('[HEADER_DEBUG] Missing application configuration for x-application-data'); } // Set x-user-data header (for logged-in users or guest users) if (state.auth?.user_data) { const userData = { application_id: state.configuration?.application?.id, user_id: state.auth.user_data.user_id }; headers['x-user-data'] = JSON.stringify(userData); console.log('[HEADER_DEBUG] x-user-data set (logged-in user):', userData); } else { // For guest/non-logged-in users, still provide application_id const userData = { application_id: state.configuration?.application?.id }; headers['x-user-data'] = JSON.stringify(userData); console.log('[HEADER_DEBUG] x-user-data set (guest user):', userData); } if (window.fpi?.authorizationHeader) { headers['authorization'] = window.fpi.authorizationHeader; } else if (state.auth?.token) { headers['authorization'] = `Bearer ${state.auth.token}`; } if (document.cookie) headers['cookie'] = document.cookie; if (state.configuration?.application?.domain) { headers['origin'] = `https://${state.configuration.application.domain}`; } Object.assign(headers, { 'accept': '*/*', 'accept-language': navigator.language || 'en-GB,en;q=0.6', 'cache-control': 'no-cache', 'pragma': 'no-cache', 'sec-fetch-dest': 'empty', 'sec-fetch-mode': 'cors', 'sec-fetch-site': 'same-origin', 'user-agent': navigator.userAgent, 'priority': 'u=1, i' }); if (navigator.userAgentData) { const brands = navigator.userAgentData.brands || []; const brandString = brands.map(brand => `"${brand.brand}";v="${brand.version}"`).join(', '); if (brandString) headers['sec-ch-ua'] = brandString; headers['sec-ch-ua-mobile'] = navigator.userAgentData.mobile ? '?1' : '?0'; headers['sec-ch-ua-platform'] = `"${navigator.userAgentData.platform || 'Unknown'}"`; } if (navigator.globalPrivacyControl) headers['sec-gpc'] = '1'; return headers; }; const ensureRazorpayLoaded = (callback, retryCount = 0) => { // Reuse the global ONLY if it is the exact SDK object we loaded ourselves. // Core's razorpay.js also passes "typeof === function" but has no .open() — // reusing it is exactly what made the express popup fail before. if (ourSdk && window.Razorpay === ourSdk && typeof window.Razorpay === 'function') { callback(); return; } if (retryCount >= 3) { teardownRazorpay(); // we failed to load ours — give the global back to core alert('Failed to load payment gateway. Please refresh and try again.'); return; } // First attempt of this takeover: snapshot the live global, then back up + // remove every core razorpay script so none of them can re-hijack the global. if (!previousSaved) { previousRazorpay = window.Razorpay; previousSaved = true; removedCoreScripts = []; const coreScripts = document.querySelectorAll(CORE_RAZORPAY_SCRIPT_SELECTOR); coreScripts.forEach((script) => { const src = script.src || ''; // Never touch the popup SDK itself (v1/checkout.js). if (src.indexOf('/v1/checkout.js') !== -1) return; removedCoreScripts.push({ src, async: script.async, defer: script.defer }); if (typeof script.remove === 'function') script.remove(); }); // Removing the

Bird’s Eye Grey Polo

₹599