I'm currently working on a chrome extension and I need to integrate Razorpay payments gateway for implementing payments in my extension but I am not able to do so due to content security policy of manifest v3. I have not worked on extensions before so please help me if you can.
manifest.json:
{
"name": "xyz",
"version": "1.0.4",
"manifest_version": 3,
"permissions": [ "storage", "scripting", "identity", "identity.email" ],
"content_security_policy": {
"extension_pages": "script-src 'self' ; object-src 'self'"
},
"host_permissions": [
"/*",
"http://localhost:3000/*",
"/*"
],
"web_accessible_resources": [
{
"resources": [ "options.html" ],
"matches": ["/*"]
}
],
"action": {
"default_icon": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},
},
"background": {
"service_worker": "service-worker.js",
"type": "module"
},
"options_ui": {
"page": "options.html",
"open_in_tab": true,
"browser_style": false
},
"icons": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
My options.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="; />
<link rel="preconnect" href="; crossorigin />
<link rel="preconnect" href="; />
<link rel="preconnect" href="; crossorigin />
<link
href=":ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link
href=":ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="options.css" />
</head>
<body>
<div id="app"></div>
<script src=".js"></script>
<script src="options.js"></script>
</body>
</html>
RazorpayButton.tsx:
import React from 'react';
declare global {
interface Window {
Razorpay: any;
}
}
export const RazorpayPayment: React.FC = () => {
const handlePayment = () => {
const options = {
key: 'YOUR_RAZORPAY_KEY',
amount: 100 * 100, // amount in paise
currency: 'INR',
name: 'Extension Payment',
description: 'Test Transaction',
handler: function (response: any) {
alert(`Payment Success: ${response.razorpay_payment_id}`);
},
prefill: {
name: 'Test User',
email: '[email protected]',
},
theme: {
color: '#3399cc',
},
};
const razorpay = new window.Razorpay(options);
razorpay.open();
};
return <button onClick={handlePayment}>Pay Now</button>;
};
These are the errors I'm getting:
Error on extension startup:
Error on clicking the payment button (I think its due to vendor scripts on getting loaded):