S
SolidJS•2w ago
FatFreeButter

Import 3rd party js from script tag

I am trying to integrate the Stripe pricing table. The instructs say to add this to my HTML <script async src="https://js.stripe.com/v3/pricing-table.js"></script>. What is the best way to do this in SolidJS?
6 Replies
FatFreeButter
FatFreeButterOP•2w ago
The solution I've come up with so far is this 
onMount(() => {
    const script = document.createElement("script");
    script.src = "https://js.stripe.com/v3/pricing-table.js";
    script.async = true;
    document.body.appendChild(script);
  });
onMount(() => {
    const script = document.createElement("script");
    script.src = "https://js.stripe.com/v3/pricing-table.js";
    script.async = true;
    document.body.appendChild(script);
  });
but this solution doesn't feel right. I was hoping for the <script> equivalent of Solid's support for the <title> tag. 
import { Title } from "@solidjs/meta";
import { Title } from "@solidjs/meta";
J8shi
J8shi•2w ago
Because it needs to be included on every site, why don‘t include it in the index.html? Sry, should* be included on every site
bigmistqke
bigmistqke•2w ago
i don't think it's a bad solution!
fbn
fbn•2w ago
Why do you want to add it via solid? I assume this script is used for stripe’s fraud prevention as well. So I would keep it in the html to get it working asap
J8shi
J8shi•7d ago
When using this, I would throw it in the App.tsx or something that is always there.
hannus
hannus•4d ago
I think the primitive Script Loader is a good solution. 
import { createScriptLoader } from "@solid-primitives/script-loader";

// For example, to use recaptcha:
const sampleScript = createScriptLoader({
  src: "https://www.google.com/recaptcha/enterprise.js?render=my_token",
  async onLoad() {
    await grecaptcha.enterprise.ready();
    const token = await grecaptcha.enterprise.execute("my_token", { action: "login" });
    // do your stuff...
  },
});
//...
// then import it in the root router or what you want
import { createScriptLoader } from "@solid-primitives/script-loader";

// For example, to use recaptcha:
const sampleScript = createScriptLoader({
  src: "https://www.google.com/recaptcha/enterprise.js?render=my_token",
  async onLoad() {
    await grecaptcha.enterprise.ready();
    const token = await grecaptcha.enterprise.execute("my_token", { action: "login" });
    // do your stuff...
  },
});
//...
// then import it in the root router or what you want
you can check the document from : https://primitives.solidjs.community/package/script-loader/
Solid Primitives
A library of high-quality primitives that extend SolidJS reactivity

Did you find this page helpful?