#alan-rich_payment-link-client-id
shadow dustBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1339277965384486944
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
kindred condor
Here is the entire React component file
import React, { useContext } from "react";
import StyledButton from "./StyledButton.tsx";
import { Box } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { useNavigate } from "react-router-dom";
import UserContext from "../context/UserContext";
const PricingPage = () => {
const theme = useTheme();
const navigate = useNavigate();
const { user } = useContext(UserContext);
const userId = user?.uid;
console.log("user: ", user?.uid);
return (
<Box
sx={{
width: "100%",
height: "100%",
mt: "3rem",
pt: "5rem",
backgroundColor: "white",
}}
>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table
pricing-table-id="My ID"
publishable-key="My Key"
client-reference-id={userId}
></stripe-pricing-table>
<Box sx={{ mt: theme.spacing(5), pl: theme.spacing(90) }}>
<StyledButton
text="Skip for now"
handleAction={() => navigate("/dashboard/joconde")}
/>
</Box>
</Box>
);
};
export default PricingPage;
wispy matrix
HI 👋
That isn't a Stripe specific thing. You need to figure out how to replace the value in the client-reference-id with the value you want to set.
kindred condor
ah ok, thanks!
wispy matrix
I'm not super familiar with React. Do you need to use double {{ to write the value of a variable into the rendered HTML?
kindred condor
I tried that but it didnt work, its been years since rendered straight up html , I am testing if a useEffect that programmatically sets the attribute value will work
wispy matrix
Hmm... yeah I can't help with that. I find React, and especially React hooks, infuriating and wont' develop with that framework.
kindred condor
No worries, I got it working, you gave me all the help i needed, the hook worked
wispy matrix
Ok, great!
kindred condor
thank you very much
wispy matrix
Happy to shed what 💡 I can 🙂
kindred condor
Have a good evening
wispy matrix
You too 👋