Skip to main content

Framework Integration (Web SDK)

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 Weavr's 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 all 11 UI components
  • React - Docs coming soon
  • Angular - Docs coming soon