How to embed Razorpay subscription button with CSP restrictions

[MihirR (Mihir)]

I just created a simple static page for subscriptions and now want to embed a button on that page.

For which the code is:

<form>
    <script
        src="https://cdn.razorpay.com/static/widget/subscription-button.js"
        data-subscription_button_id="pl_randodmdi7373737"
        data-button_theme="brand-color"
        async>
    </script>
</form>

So from what I know the CSP won’t let me use the script, is there any way this could be possible?

PS: I’m using Landing Page Plug-in for the custom page.

[awesomerobot (Kris)]

This may help

@awesomerobot

Do you see an error concerning the script in your browser console? something like this?

You’ll want to add that provided hash ('sha256-xxxxx') to the “content security policy script src” setting found in admin > all site settings

and we have more information about CSP here Mitigate XSS Attacks with Content Security Policy

[MihirR (Mihir)]

Content security policy script src 

​
https://cdn.razorpay.com
Add item…

​
 content_security_policy_script_src: Value must be either 'unsafe-eval' or 'wasm-unsafe-eval', or in the form '<hash algorithm>-<base64 value>' where supported hash algorithms are sha256, sha384 or sha512. Ensure that your input is wrapped in single quotation marks.
Additional allowlisted script sources. The current host and CDN are included by default. See Mitigate XSS Attacks with Content Security Policy. (CSP). Other host sources are ignored as strict-dynamic is enabled.

This is the error I’m getting.

[awesomerobot (Kris)]

Right, that’s the error with the setting configuration in the admin area… after adding your script, what you want to look for is an error in your browser console (right click the page where the script should be loaded, select inspect, then navigate to the “console” tag)

In the console you should see an error similar to this:

This error provides either a hash or a nonce value which you then add to the admin “content security policy script src” setting