Using the Web SDK with JavaScript frameworks

Modern JavaScript frameworks like Vue.js, React, and Angular have specific lifecycle and bundling requirements that differ from traditional script-based web pages. This section provides framework-specific guidance for integrating our Web SDK components.

Script loading requirements

Script must be loaded via HTML script tag

The Weavr Web SDK must be loaded via a <script> tag in your HTML file. It cannot be imported through your bundler (Vite, Webpack, Rollup, etc.).

This is the most common integration mistake and causes cryptic errors.

Correct approach

Add the script tag to your index.html:

<!doctype html>
<html>
  <head>
    <!-- Load the Weavr SDK via script tag -->
    <!-- For Sandbox environment -->
    <script src="https://sandbox.weavr.io/app/secure/static/client.1.js"></script>

    <!-- For Live environment -->
    <!-- <script src="https://secure.weavr.io/app/secure/static/client.1.js"></script> -->
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Incorrect approaches

Do not attempt any of the following:

// WRONG: Importing via bundler
import OpcUxSecureClient from "weavr-sdk";

// WRONG: Dynamic import
const sdk =
  await import("https://sandbox.weavr.io/app/secure/static/client.1.js");

// WRONG: Require statement
const OpcUxSecureClient = require("weavr-sdk");

Why this matters

The Weavr SDK creates secure iframes for handling sensitive financial data. When bundlers process the script, they can break internal references and security mechanisms, causing errors like:

• TypeError: P.has is not a function
• Cannot read properties of undefined
• Components fail to render silently

Common pitfalls (all frameworks)

Script bundling error

Cause: the SDK script was bundled by Vite, Webpack, or another bundler instead of being loaded via a script tag.

Solution: move the SDK to a <script> tag in your index.html file.

Component not rendering

Cause: the component's mount() method was called before the DOM element exists.

Solution: in frameworks, always call mount() inside the appropriate lifecycle hook after the DOM is ready:

• Vue: onMounted()
• React: useEffect() with empty dependency array
• Angular: ngAfterViewInit()

Memory leaks

Cause: the SDK components are not cleaned up when the parent component is destroyed.

Solution: call unmount() on SDK components in the framework's cleanup lifecycle:

• Vue: onUnmounted()
• React: return cleanup function from useEffect()
• Angular: ngOnDestroy()

Token is undefined after submit

Cause: the tokenize() callback is asynchronous, but the code attempts to use the token synchronously.

Solution: handle the token inside the callback function or use async/await patterns.

Supported frameworks

• Vue.js - Full integration guide with composables and wrapper components
• React - Full integration guide with hooks and wrapper components
• Angular - Docs coming soon