I have the below code in a WebView widget, but I am stuck with an error:
"The Content Security Policy 'default-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.moonpay.com https://www.gstatic.com' was delivered via a <meta> element outside the document's <head>, which is disallowed. The policy has been ignored."
<html>
<head>
<title>MoonPay SDK</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' https://static.moonpay.com https://www.gstatic.com">
<script defer src="https://static.moonpay.com/web-sdk/v1/moonpay-web-sdk.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
</head>
<body>
<!--Button that triggers the MoonPay SDK-->
<button id="moonpay-button">Buy with MoonPay</button>
<!--Initialize the SDK in your application with the flow, environment, variant, and any parameters related to Buy, Sell or Swap.-->
<script>
window.onload = function() {
// Initialize Firebase
var firebaseConfig = {
//firebase config
};
firebase.initializeApp(firebaseConfig);
// Fetch the user's email from Firebase
var user = firebase.auth().currentUser;
var userEmail = user ? user.email : '[email protected]'; // replace '[email protected]' with a default email
const moonpaySdk = window.MoonPayWebSdk.init({
flow: 'buy',
environment: 'sandbox',
variant: 'overlay',
params: {
apiKey: 'apikey',
theme: 'dark',
baseCurrencyCode: 'usd',
baseCurrencyAmount: '100',
defaultCurrencyCode: 'eth',
externalCustomerId: userEmail
},
debug: true
});
// Add event listener to the button
document.getElementById('moonpay-button').addEventListener('click', function() {
moonpaySdk.show();
});
}
</script>
</body>
</html>