Merge pull request #5937 from Bowrna/fix_razorpay_not_defined

fix(billing): Razorpay not defined error if checkout script loading takes time

Author: Bowrna

dashboard/src/components/billing/BuyCreditsRazorpay.vue

@@ -22,8 +22,12 @@
 				class="w-full"
 				size="md"
 				variant="solid"
-				:label="`Proceed to payment using ${paypalEnabled ? 'PayPal' : 'Razorpay'}`"
-				:loading="createRazorpayOrder.loading"
+				:label="
+					razorpayScriptLoading
+						? 'Loading payment gateway...'
+						: `Proceed to payment using ${paypalEnabled ? 'PayPal' : 'Razorpay'}`
+				"
+				:loading="createRazorpayOrder.loading || razorpayScriptLoading"
 				@click="createRazorpayOrder.submit()"
 			/>
 			<Button
@@ -42,6 +46,7 @@ import { Button, ErrorMessage, FeatherIcon, createResource } from 'frappe-ui';
 import { ref, onMounted, onBeforeUnmount, inject } from 'vue';
 import { toast } from 'vue-sonner';
 import { DashboardError } from '../../utils/error';
+import { loadRazorpayScript } from '../../utils/razorpay';
 
 const props = defineProps({
 	amount: {
@@ -73,20 +78,18 @@ const paypalEnabled = team.doc.currency === 'USD' && props.paypalEnabled;
 const isPaymentComplete = ref(false);
 const isVerifyingPayment = ref(false);
 
-const razorpayCheckoutJS = ref(null);
+const razorpayScriptLoading = ref(!window.Razorpay);
 
 onMounted(() => {
-	razorpayCheckoutJS.value = document.createElement('script');
-	razorpayCheckoutJS.value.setAttribute(
-		'src',
-		'https://checkout.razorpay.com/v1/checkout.js',
-	);
-	razorpayCheckoutJS.value.async = true;
-	document.head.appendChild(razorpayCheckoutJS.value);
-});
-
-onBeforeUnmount(() => {
-	razorpayCheckoutJS.value?.remove();
+	loadRazorpayScript()
+		.then(() => {
+			razorpayScriptLoading.value = false;
+		})
+		.catch(() => {
+			toast.error(
+				'Failed to load payment gateway. Please refresh and try again.',
+			);
+		});
 });
 
 const createRazorpayOrder = createResource({
@@ -96,7 +99,10 @@ const createRazorpayOrder = createResource({
 		transaction_type: props.type,
 		doc_name: props.docName,
 	},
-	onSuccess: (data) => processOrder(data),
+	onSuccess: async (data) => {
+		await loadRazorpayScript();
+		processOrder(data);
+	},
 	validate: () => {
 		if (props.amount < props.minimumAmount) {
 			throw new DashboardError('Amount less than minimum amount required');

dashboard/src/components/billing/UPIAutopayForm.vue

@@ -44,6 +44,7 @@
 <script>
 import { FormControl, Button, ErrorMessage } from 'frappe-ui';
 import { toast } from 'vue-sonner';
+import { loadRazorpayScript } from '../../utils/razorpay';
 
 export default {
 	name: 'UPIAutopayForm',
@@ -64,7 +65,7 @@ export default {
 		};
 	},
 	mounted() {
-		this.loadRazorpayScript();
+		loadRazorpayScript();
 		if (this.isBackground) {
 			this.$resources.createRazorpayMandate.submit();
 		}
@@ -108,14 +109,6 @@ export default {
 		},
 	},
 	methods: {
-		loadRazorpayScript() {
-			if (window.Razorpay) return;
-			const script = document.createElement('script');
-			script.src = 'https://checkout.razorpay.com/v1/checkout.js';
-			script.async = true;
-			document.head.appendChild(script);
-		},
-
 		setupAutopay() {
 			if (!this.maxAmount || this.maxAmount < 500) {
 				toast.error('Maximum amount must be at least ₹500');
@@ -129,7 +122,8 @@ export default {
 			// this.$resources.createRazorpayMandate.submit();
 		},
 
-		openRazorpayCheckout(orderData) {
+		async openRazorpayCheckout(orderData) {
+			await loadRazorpayScript();
 			const options = {
 				key: orderData.key_id,
 				order_id: orderData.order_id,

dashboard/src/utils/razorpay.js

@@ -0,0 +1,18 @@
+let razorpayScriptPromise = null;
+
+export function loadRazorpayScript() {
+	if (window.Razorpay) return Promise.resolve();
+	if (!razorpayScriptPromise) {
+		razorpayScriptPromise = new Promise((resolve, reject) => {
+			const script = document.createElement('script');
+			script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+			script.onload = resolve;
+			script.onerror = () => {
+				razorpayScriptPromise = null; // allow retry on next call
+				reject(new Error('Failed to load Razorpay checkout script'));
+			};
+			document.head.appendChild(script);
+		});
+	}
+	return razorpayScriptPromise;
+}