Widget Loading

Learn how to properly load the CryptumPay Widget in your application.

Content Security Policy (CSP)

If your website uses Content Security Policy (CSP), add the following sources to the corresponding directives:

script-src   https://cdn.cryptumpay.com
connect-src  https://wapi.cryptumpay.com
frame-src    https://pay.cryptumpay.com
style-src    https://fonts.googleapis.com
font-src     https://fonts.gstatic.com

If you already have these directives configured, keep your existing sources and append the CryptumPay-required sources above. Example configuration for a basic website:

Content-Security-Policy:
  script-src 'self' https://cdn.cryptumpay.com;
  connect-src 'self' https://wapi.cryptumpay.com;
  frame-src https://pay.cryptumpay.com;
  style-src 'self' https://fonts.googleapis.com;
  font-src 'self' https://fonts.gstatic.com;

Performance Best Practices

1. Use Async Loading

Always use the async attribute to avoid blocking page rendering.

2. Preconnect to CDN

Speed up widget loading by preconnecting to the CDN:

<link rel="preconnect" href="https://cdn.cryptumpay.com">
<link rel="dns-prefetch" href="https://cdn.cryptumpay.com">

Troubleshooting

Widget Not Loading

Check browser console for errors:

• Network errors (CDN blocked, firewall)
• CSP violations
• JavaScript errors

Verify script tag:

• Correct src URL
• Valid integrity hash
• Proper async attribute

Ready Event Not Firing

Common causes:

• Script tag placed after your event listener code
• Ad blockers blocking CDN requests
• Network timeouts

Solution: Always place the script tag in <head> and event listeners after.

See Also

• Button Initialization - Creating button instances