diff --git a/frappe/integrations/doctype/razorpay_settings/razorpay_settings.py b/frappe/integrations/doctype/razorpay_settings/razorpay_settings.py
index 44f999939a..f635cdd154 100644
--- a/frappe/integrations/doctype/razorpay_settings/razorpay_settings.py
+++ b/frappe/integrations/doctype/razorpay_settings/razorpay_settings.py
@@ -351,6 +351,12 @@ def capture_payment(is_sandbox=False, sanbox_response=None):
 			doc.error = frappe.get_traceback()
 			frappe.log_error(doc.error, '{0} Failed'.format(doc.name))
 
+
+@frappe.whitelist(allow_guest=True)
+def get_api_key():
+	controller = frappe.get_doc("Razorpay Settings")
+	return controller.api_key
+
 @frappe.whitelist(allow_guest=True)
 def get_order(doctype, docname):
 	# Order returned to be consumed by razorpay.js
diff --git a/frappe/public/js/integrations/razorpay.js b/frappe/public/js/integrations/razorpay.js
index c21fd28b0e..1a49b07c8e 100644
--- a/frappe/public/js/integrations/razorpay.js
+++ b/frappe/public/js/integrations/razorpay.js
@@ -63,6 +63,7 @@ frappe.require('https://checkout.razorpay.com/v1/checkout.js').then(() => {
 
 		init() {
 			frappe.run_serially([
+				() => this.getKey(),
 				() => this.makeOrder(),
 				() => this.prepareOptions(),
 				() => this.setupHandler(),
@@ -78,9 +79,18 @@ frappe.require('https://checkout.razorpay.com/v1/checkout.js').then(() => {
     		razorpay.open();
 		}
 
+		getKey() {
+			return new Promise(resolve => {
+				frappe.call("frappe.integrations.doctype.razorpay_settings.razorpay_settings.get_api_key").then(res => {
+					this.key = res.message
+					resolve(true);
+				})
+			});
+		}
+
 		makeOrder() {
 			return new Promise(resolve => {
-				frappe.call( "frappe.integrations.doctype.razorpay_settings.razorpay_settings.get_order", {
+				frappe.call("frappe.integrations.doctype.razorpay_settings.razorpay_settings.get_order", {
 					doctype: this.doctype,
 					docname: this.docname
 				}).then(res => {
@@ -91,7 +101,7 @@ frappe.require('https://checkout.razorpay.com/v1/checkout.js').then(() => {
 		}
 
 		orderSuccess(response) {
-			frappe.call( "frappe.integrations.doctype.razorpay_settings.razorpay_settings.order_payment_success", {
+			frappe.call("frappe.integrations.doctype.razorpay_settings.razorpay_settings.order_payment_success", {
 				integration_request: this.order.integration_request,
 				params: {
 					razorpay_payment_id: response.razorpay_payment_id,