Installation

Learn how to add CryptumPay Widget to your website.

CDN Installation

The easiest way to use CryptumPay Widget is via CDN. No build tools or package managers required.

Basic Installation

Add this script tag to your HTML:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  async
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

Required Attributes

Attribute	Required	Description
`src`	✅ Yes	CDN URL with version number
`integrity`	✅ Yes	SRI hash for security verification
`crossorigin`	✅ Yes	Must be `"anonymous"` for CORS
`async`	⚠️ Recommended	Loads widget asynchronously

SECURITY WARNING

The integrity attribute is mandatory. It prevents loading tampered code.

Always copy the complete script tag from docs.cryptumpay.com - don't manually type URLs or integrity hashes.

Version Management

Finding Current Version

The current widget version and integrity hash are always available at the top of this page in the Basic Installation section.

This page is updated with each new release, so always refer to it for the latest version and correct integrity hash.

You can also check the manifest programmatically:

https://cdn.cryptumpay.com/{version}/manifest.json

Example:
https://cdn.cryptumpay.com/2.3.2/manifest.json

Updating Versions

When updating to a new version:

Get the new script tag from this page
Update src and integrity together
Test on staging environment
Deploy to production

INTEGRITY HASH CHANGES

The integrity hash changes with every version. You must update both attributes together.

Loading Modes

Asynchronous Loading (Recommended)

Load the widget without blocking page rendering:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  async
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

<script>
// Wait for widget to load
document.addEventListener('CryptumPay:ready', (event) => {
  const button = new event.detail.Button('payment-button');
});
</script>

Benefits:

✅ Faster initial page load
✅ Doesn't block HTML parsing
✅ Better Core Web Vitals scores
✅ Recommended for production

Considerations:

⚠️ Must use CryptumPay:ready event
⚠️ Button initialization is delayed

Best Practice

Always wait for the CryptumPay:ready event before creating button instances to ensure the widget is fully loaded.

Synchronous Loading

Load the widget immediately:

html

<script
  src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
  integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
  crossorigin="anonymous"
></script>

<script>
// Widget is immediately available
const button = new CryptumPay.Button('payment-button');
</script>

Benefits:

✅ Immediate availability
✅ Simpler code
✅ Good for testing

Considerations:

⚠️ Blocks page rendering
⚠️ Slower initial load
⚠️ Not recommended for production

Comparison

Feature	Async	Sync
Page Load Speed	✅ Fast	⚠️ Slower
Code Simplicity	⚠️ Event required	✅ Direct access
Production Use	✅ Recommended	⚠️ Not recommended
SEO Impact	✅ Better	⚠️ Worse

Placement in HTML

Recommended Structure

Place the script in <head> with async:

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Store</title>
  
  <!-- CryptumPay Widget -->
  <script
    src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
    async
    integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
    crossorigin="anonymous"
  ></script>
</head>
<body>
  <!-- Your content -->
  <div id="payment-button"></div>
  
  <!-- Initialize after DOM ready -->
  <script>
  document.addEventListener('CryptumPay:ready', (event) => {
    const button = new event.detail.Button('payment-button');
  });
  </script>
</body>
</html>

Alternative: Before `</body>`

If you prefer, place it before closing </body>:

html

<body>
  <!-- Your content -->
  <div id="payment-button"></div>

  <script>
  document.addEventListener('CryptumPay:ready', (event) => {
    const button = new event.detail.Button('payment-button');
  });
  </script>
  
  <!-- Load widget -->
  <script
    src="https://cdn.cryptumpay.com/2.3.2/widget.min.js"
    async
    integrity="sha384-jOAC1EYj7n6L3AUMR8dzHWi2B64sOghCmTyjCR2sqlZr4vw3YbabmSnHVyjnx8i6"
    crossorigin="anonymous"
  ></script>
</body>

Verification

Check Installation

Open browser console and verify the widget loaded:

javascript

console.log(typeof CryptumPay); // Should log "object"
console.log(CryptumPay.Button);  // Should log function

Integrity Verification

If integrity check fails, you'll see an error:

Failed to find a valid digest in the 'integrity' attribute

Solution:

Get the correct script tag from docs
Copy both src and integrity attributes
Ensure no typos or modifications

Next Steps

Use Cases - See how CryptumPay fits your business
Widget Loading - Understand loading modes in detail
Button Initialization - Create your first button

Installation ​

CDN Installation ​

Basic Installation ​

Required Attributes ​

Version Management ​

Finding Current Version ​

Updating Versions ​

Loading Modes ​

Asynchronous Loading (Recommended) ​

Synchronous Loading ​

Comparison ​

Placement in HTML ​

Recommended Structure ​

Alternative: Before </body> ​

Verification ​

Check Installation ​

Integrity Verification ​

Next Steps ​

Installation

CDN Installation

Basic Installation

Required Attributes

Version Management

Finding Current Version

Updating Versions

Loading Modes

Asynchronous Loading (Recommended)

Synchronous Loading

Comparison

Placement in HTML

Recommended Structure

Alternative: Before `</body>`

Verification

Check Installation

Integrity Verification

Next Steps