#quantum1125-elements
gritty adder
@fringe veldt can you provide more details about your exact integration path, which doc page you are following and share your code?
fringe veldt
I am trying to render the CardForm component and I have wrapped my entire project in it here
import React from "react";
import Store from './pages';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
const stripePromise = loadStripe('pk_test_51Ja9MxG...B00aMXShk2W');
const Wrapper = () => (
<Elements stripe={stripePromise}>
<Store />
</Elements>
);
export default Wrapper;
Do you have a URL when I can repro? Does the same in that example work for you? Sorry it's a bit tricky without more context and React is not my forte
fringe veldt
Can't share a url, private repo. Building on this repo: https://github.com/ehowey/gatsby-use-shopping-cart/blob/main/src/pages/index.js I'm trying to load the Card component from the documentation and was trying to wrap the project in the Element component in this file. What do you think about that?
gritty adder
Sorry, now there's a gatsby component with all of this?
Is there any way you can do a simple jsbin or jsfiddle raw example since this is purely Javascript?
gritty adder
I'll ask my team in parallel in case I'm missing something obvious
gritty adder
@fringe veldt any luck reproducing?
gritty adder
that error seems entirely unrelated right now right?
fringe veldt
correct
idk if you have a publishable key you can pass into index.js, but this is close to my situation where it will give the Elements error
do you have a publishable key I can use in this shared sandbox?
ok it works in the sandbox, not sure why it doesn't locally
gritty adder
pk_test_428DT589O8KAxCGbLmxyZr8LNaOPimqbMpbtE8wQ23gfA3x4FNYoUMKSUtmWFhqaBRt81UQYWj5i1qmQstJSgNOn000u8SrTC6A is the default key for our examples
if you want to try it
basically we want to understand the difference between a basic demo and either our docs (if the demo doesn't work) or your own code (if the demo works)
it's hard to debug issues like this without seeing the full code of how you load Stripe.js and where you initialize/load Elements
fringe veldt
thanks for sharing that, the demo works but integrating the custom flow with gatsby may be the issue
gritty adder
yeah my advice is to try and do the simplest thing possible first without gatsby then add gatsby and see what happens