Vaibhao

[slim glen]

Hi 👋 I haven't personally used UMD before, but the screenshot you provided seems to have instructions for a UMD-based approach. Are you running into problems when using the code provided in the snippet there?

[sour field]

Yes, I am. Following code in that document explains how to import {loadstripe} and {Elements} assuming node packages are installed, rest of the document doesn't talk about how to use direct references and import packages - https://stripe.com/docs/stripe-js/react#setup

[slim glen]

And what are the errors that you're running into when using the provided code snippets?

[sour field]

I get this error - in snapshot 1, after I changed standard code by adding script references in index.html as snapshot 2, and referred those scripts in App.jsx as shown in snapshot 3

I have tried this based on my research on how to use script references instead of node packages, I was hoping these steps are documented somewhere.

[slim glen]

I agree they should be, but offhand I'm thinking you're right that they aren't, and I'm not familiar with UMD flows so I'm not sure how to guess at what comes next.

Are you familiar with UMD flows, do you know how you would typically import or access functions in those cases?

[sour field]

Yes, The approach I tried is standard way I did before with other script based references (not with stripe) and this is standard approach which my research online also suggests

[slim glen]

I noticed the first section of the documentation (that does seem to change when switched to UMD) mentions it creates a global ReactStripe object. It doesn't go into detail with how to use it, but have you tried importing from that?

[sour field]

Yeah I am already using that to use {Elements} (3rd snapshot), I am not sure how to refer to loadStripe function which is giving an error

[slim glen]

Ah, sorry, missed that line in the screenshot. Hm, does using the same approach for loadStripe as you're using for Elements work?

Also, is there any chance you could use an npm package instead? (I assume you have a good reason for avoiding it, but you know I have to ask)

[sour field]

no it doesn't work with loadStripe, it gives me undefined "window.ReactStripe.loadStripe". I wish I can use npm it is way easier 🙂 , the platform I am integrating stripe solution with doesn't allow npm packages other than they have already whitelisted, so my only option is to use UMD approach

[slim glen]

Ah, that's right, loadStripe and Elements come from different scripts.

[toxic dagger]

👋 hopping in here since toby has to head out

[sour field]

thank you Karbi!

[toxic dagger]

I'm not super familiar w/ UMD flows either, but my guess is that you wouldn't use loadStripe (since that's something specific to using the Stripe Module). Instead you'd do:

const stripe = window.Stripe("pk_test_123");
...
...
  return (
    <Elements stripe={stripe} options={options}>
      <CheckoutForm />
    </Elements>
  );

[sour field]

window.stripe is not a function

It will throw an error in line 2

[toxic dagger]

Hmmm... usually you get that error if Stripe hasn't finished loading - you'd need to change your code to wait for that