Reapply "CspNonce changes"

[Vishala230531]

Description
Fix CSP Nonce Handling for Venmo QR Code Component
https://paypal.atlassian.net/browse/LI-144483

Problem

When merchants use v5 of the JS SDK with a Content-Security-Policy that includes a [style-src] directive with a nonce, the Venmo QR code modal fails to render correctly in production environments. The issue occurs because:

Merchant provides CSP nonce to JS SDK via [data-csp-nonce] attribute
When buyer clicks Venmo button on desktop, QR code flow is triggered
The QR code component injects inline CSS without the proper nonce
Browser rejects the CSS due to CSP violation
QR code modal renders incorrectly (styling broken)

Root Cause
The QR code component was inconsistently handling CSP nonces:

Component relied on [props.cspNonce] which wasn't always properly propagated
In server-side rendering contexts, nonce values weren't being passed through props correctly
Container and prerender templates weren't getting the nonce needed for inline styles

Solution
Implemented consistent CSP nonce handling across all QR code component files:

Component Configuration
([component.jsx]
Changed [cspNonce] prop to [default: WEB ? getCSPNonce : () => undefined]
Ensures fallback when props don't contain nonce

Container Template
([container.jsx]
Now directly calls [getCSPNonce()] instead of using [props.cspNonce

Prerender Template ([prerender.jsx]
Updated to get CSP nonce directly from SDK client
Applies nonce to both inline styles and SpinnerPage component

Environment Safety
Added [WEB] checks to prevent server-side rendering issues
Returns undefined in non-web environments
Testing
✅ Verified QR code modal renders correctly with CSP nonces
✅ No CSP violations in browser console
Before:

After

[delbarrow]

Great work debugging this!!!

[nikrom17]

Can we add some unit tests please?