Integrating a NPM SDK

Ask us anything How do I?
1

Hey there,

I went down a rabbit hole of SDK threads, documentation, and videos but I am struggling to integrate a NPM SDK on WeWeb. Here’s what I have done so far:

Which landed me with this setup that doesn’t throw an error but also doesn’t launch the popup that it should (the popup is not being blocked either).

  • I installed the NPM plugin and configured the @moneykit/connect package
  • I created an “on app load” workflow to run the action code from this video https://weweb-embed.statechange.ai/ to install on the editor
    window["scp-loading-ae4df260-c2c6-4b7c-bc98-36d4b87b6b51"] = true;
    let doc;
    /* Adding script from null */
    doc = document.createElement('script');
    doc.innerHTML = `npm install @moneykit/connect`;
    document.body.appendChild(doc);
  }
  • I added a button to trigger this custom JS from the SDK documentation. linkSessionToken is generated from the server but for testing, I hardcoded it.
    const moneykit = new MoneyKitModule.default(); // Use default if MoneyKit is exported as default

    moneykit.link(
      linkSessionToken,
      (exchangeableToken, institution) => {
        // onLinkSuccess
        console.log("Link created successfully", exchangeableToken, institution);
      },
      (error) => {
        // onLinkExit
        console.log(
          "Connect closed without creating a link. Error will be provided if one occurred."
        );
      },
      (event) => {
        // onLinkEvent
        console.log("Link event occurred: ", JSON.stringify(event));
      }
  );
});
  • The WeWeb console says workflow succeeded but nothing happens on the frontend and my webhook listener doesn’t register any events from the SDK vendor, so I’m pretty sure I implemented it incorrectly.
1 Like
2

working with js libraries and the required tooling can be complicated if you never tried before. As a rule of thumb installing packages from npm is something you do on your machine, the browser loads and executes scripts, the npm plugin loads scripts from a cdn but it works only if the author of the library provided everything together in a single file in a specific format. The library that you mention can’t work with the npm plugin and can’t even work as a standalone script to be loaded in the browser. It assumes that you process the code on your machine first to put together all the other pieces of code needed.

3

Thanks! I was fearing that but wasn’t sure. Would creating a Github repo and building this as a custom component solve for that?

4

custom code components have the tooling set up to bundle library and dependencies. As an alternative you can bundle it yourself in the right format and then load it with a script

5

Love that you gave just importing a run. In the future, the weweb-embed is best when you have a script tag (e.g. from a CDN) and the weweb NPM plugin is best when you have an NPM package that has been set up for deployment that way.

I looked at the moneykit docs and they are quite explicit that they need to be installed in a node-built package. A check on unpkg confirms this - it has an “import” statement that is a giveaway that way.

As is so often the case, @dorilama has the right alternatives:

  1. Make a custom component to wrap your intended functionality; or
  2. Make a custom script-tag delivered library, e.g. a bit of javascript code compiled using nodejs and a webpacker like rollup, webpack or vite to deploy.

None of this has to be a crazy lot of work, but its definitely bringing some code to the party!

6

I figured that would be the end result but was worth the shot. Thanks @raydeck and @dorilama !