Access Stripe Payment Element's loading state - javascript

In my Reactjs app, I'm using the payment intent API from stripe to handle payments. I use the embeddable Payment Element <PaymentElement /> from #stripe/react-stripe-js to render the UI but the problem is that it takes a couple of seconds before the Payment Element is fully loaded in the UI.
Is there any way I can access its loading state and show a loading spinner while it's being loaded?

Stripe just added a new loader option to their PaymentElement product documented here. It allows you to have a skeleton render first while the UI is loading which should solve the problem you were going for.
Alternatively, you can listen to their ready event documented here so that you show a loading animation until the event is fired.
While this is for their vanilla JS integration, you can use those with their React library since you control which option to pass on the PaymentElement on initialization.

For anyone not content with simply using their loader, you can listen to the ready event (docs).
To do this, you have to get the element first, which is a step that confused me. You should have the elements reference from the useElements hook. In useEffect you can try to do elements.getElement('paymentMethod') but you will get an error saying:
A valid Element name must be provided. Valid Elements are: card,
cardNumber, cardExpiry, cardCvc, postalCode, paymentRequestButton,
iban, idealBank, p24Bank, auBankAccount, fpxBank, affirmMessage,
afterpayClearpayMessage; you passed: paymentElement.
However, the correct thing to get is payment despite not being in that list:
const element = elements.getElement('payment')
element.on('ready', () => {
console.log("READY")
})

Thanks #Yeats on ready solved this for me - great answer.
I want to add for anyone looking at this solution that you should not hide your until the on ready state returns. I mistakenly used a useState variable to show a loader until PaymentElement was ready, but realised that only the loader component needed to be toggled by state and that the PaymentElement should be rendered always. My first try I hid the PaymentElement from render using my loading state var like this:
Don't do this!
{isStripLoading ? (
<MyLoaderComponent />
) : (
<PaymentElement />
)}
So, assuming you have a state variable isStripeLoading default to true and you have useEffect on ready event setIsStripeLoading(false) then wrap only you loader spinner component in the isStripeLoading state variable and NOT the PaymentElement component.
Example
const stripe = useStripe()
const elements = useElements()
const [isStripeLoading, setIsStripLoading] = useState(true)
useEffect(() => {
if (elements) {
const element = elements.getElement('payment')
element.on('ready', () => {
setIsStripLoading(false)
})
}
}, [elements])
return (
<form id='payment-form' onSubmit={handleSubmit}>
{isStripeLoading && <MyLoaderComponent />}
<PaymentElement id='payment-element'/>
<button id='submit' disabled={!stripe || !elements}>Pay</button>
</form>
)

Related

calling setState only once inside of useEffect--is there a better method?

In my react app I use the following pattern quite a bit:
export default function Profile() {
const [username, setUsername] = React.useState<string | null>(null);
React.useEffect(()=>{
fetch(`/api/userprofiles?username=myuser`)
.then(res=>res.json())
.then(data => setUsername(data.username))
},[])
return(
<div>
{username}'s profile
</div>
)
}
When the page loads, some user data is fetched from the server, and then the page updates with that user data.
One thing I notice is that I only really need to call setUsername() once on load, which makes using state seem kinda excessive. I can't shake the feeling that there must be a better way to do this in react, but I couldn't really find an alternative when googling. Is there a more efficient way to do this without using state? Or is this the generally agreed upon way to load data when it only needs to be done once on page load
Without using any external libraries, no - that is the way to do it.
It would be possible to remove the state in Profile and have it render the username from a prop, but that would require adding the state into the parent component and making the asynchronous request there. State will be needed somewhere in the app pertaining to this data.
The logic can be abstracted behind a custom hook. For example, one library has useFetch where you could do
export default function Profile() {
const { data, error } = useFetch('/api/userprofiles?username=myuser');
// you can check for errors if desired...
return(
<div>
{data.username}'s profile
</div>
)
}
Now the state is inside useFetch instead of in your components, but it's still there.

How to access dom element that is not inside JSX in React?

We are using ReactJS framework, so we don't find element written in the entire code. The only way is to find the DOM element and should set the attribute. I am doing this in app.js.
setTimeout(function () {
const formElement = document.getElementsByTagName('form')
formElement.item(0).setAttribute('autocomplete', 'off')
}, 1000)
The above solution is working fine, but if the page loading is slow, then this will not set the attribute. Is there any other way to find the element and set the attribute? I have also tried to set it using the below code after DOMContentLoaded, but it's not working. Nothing inside this event is working.
document.addEventListener('DOMContentLoaded', () => {
const formElement = document.getElementsByTagName('form')
formElement.item(0).setAttribute('autocomplete', 'off')
})
You don't find the element because 'DOMContentLoaded' gets fired when HTML file completes loading, not when React renders the form.
How about using MutationObserver instead? https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Also doing that in root level app.js sounds wrong. Can you do it in the component that is closest to the container of the form?
In React a good way to access DOM elements is by using useRef hook. However, if that element you want to query is not in the JSX of your current component, the useEffect hook could be used with normal JavaScript DOM methods. Like so:
useEffect(()=>{
const formElement = document.getElementsByTagName('form')
formElement.item(0).setAttribute('autocomplete', 'off')
},[]);

How to update redux store with react suspense

In following code, Sample uses a async function to get some data. I will be using that data to update the Redux store so any component can access the username within the application.
const resource = fetchData();
function Sample() {
// throws a promise when retrieving data
const name = resource.read();
const dispatch = useDispatch();
dispatch(setUsername(name));
const username = useSelector((state) => state.username);
return <div>User: {username}</div>;
}
<Suspense fallback="loading....">
<Sample />
</Suspense>
Here, lets assume there is no way my application can proceed without the username. Well, <Suspense> at parent level achieves that up until data are fetched from the resource. However, there is a slight gap from Redux event dispatch to <Sample> component re-render where is displays User: instead of loading.... (event don't force the re-render immediately so username is empty). So I will see following content in the web page in the same order
loading.... --> User: --> User: Srinesh
So my requirement is to show loading.... until store is updated. On the web page, I'm expecting to see,
loading.... --> User: Srinesh
Is there a way to achieve this without using another condition at <Sample> component level to show loading.... if the username is null?
The first issue is that dispatching in the middle of component rendering logic is a side effect, and you must never do that.
A safer place to put that would be in a useLayoutEffect hook, which will dispatch as soon as the component is done rendering, but force a synchronous re-render before the browser has a chance to paint. That way you won't see the flash.

How to use useEffect deps when page reload?

I got simple blog with arficles, and when user click edit button he got form filled with articles data - title, description, body and tags. I use useEffect to get data and fill form, when I got "id". If there is no "id" form should be blank. here is my useEffect:
useEffect(() => {
if (id) {
isLoading = true;
return props.onLoad(userService.articles.get(id));
}
props.onLoad(null);
}, [id]
);
but when I reload page id not changed, and func userService.articles.get(id) not run, and all datas gone. I need advice how to fix it? may be I need to use other deps for useEffect, but now I have no idea what deps i can use exept id.
upd:
thank you all for help. all i want is:
when the edit page load/reload and "id" exist -> fills form fields
when "id" not exist -> blank form fields
now when I reload edit page i got id - but all datas gone, and i got blank form :(
Here is the full code: codesandbox
p.s. i use free API - so you can create user in a sec with any imagined email, username and password. you don't need mail confirmation.
You should use this.props.match.params to access your id that comes from the url.
useEffect(() => {
if (props.match.params.id) {
setIsloading(true);
userService.articles.get(props.match.params.id)
.then((resp) => {
setIsloading(false);
props.onLoad(resp)
})
} else {
props.onLoad(null);
}
}, [props.match.params.id]);
Also you should rely on useState to manage your isLoading variable.
const [isLoading, setIsloading] = useState(false);
I did a bit more digging into the code you have provided.
The initialValues will be first empty because the data coming from the props is not there yet. And once the initialValues have been set you can't change them dynamically, you have to resort to the antd Form api.
You cannot set value for each form control via value or defaultValue
prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamically, you
should use setFieldsValue in that situation.
The key here is to use another useEffect with dependencies to your form values comming from the props and use those to reset the form values via setFieldsValue.
try to useEffect without options and it will run just when the page loads for the first time
useEffect(() => {
if (id) {
isLoading = true;
return props.onLoad(userService.articles.get(id));
}
props.onLoad(null);
}, []
);
Based on the assumption that you want props.onLoad to run whenever there is a defined "id" or the defined "id" changes:
Returning a function from a useEffect hook (as you do with return props.onLoad(...)) is specifically for "cleaning up" things like side effects or subscriptions. A function returned inside a useEffect hook will only run when the component unmounts. See docs here. Also it doesn't seem like you are even passing a function to run on cleanup. You're passing the result of props.onLoad to run on cleanup, which based on the function name doesn't seem like it is intended to return another function.
So, if you want props.onLoad() to run if the "id" is defined, remove the return before props.onLoad. That return is telling React to hold (what it thinks is a function) for cleanup on unmount. If it's still not working, I think we'll need more information on what exactly props.onLoad is doing.

how to emulate messages/events with react useState and useContext?

I'm creating a react app with useState and useContext for state management. So far this worked like a charm, but now I've come across a feature that needs something like an event:
Let's say there is a ContentPage which renders a lot of content pieces. The user can scroll through this and read the content.
And there's also a BookmarkPage. Clicking on a bookmark opens the ContentPage and scrolls to the corresponding piece of content.
This scrolling to content is a one-time action. Ideally, I would like to have an event listener in my ContentPage that consumes ScrollTo(item) events. But react pretty much prevents all use of events. DOM events can't be caught in the virtual dom and it's not possible to create custom synthetic events.
Also, the command "open up content piece XYZ" can come from many parts in the component tree (the example doesn't completely fit what I'm trying to implement). An event that just bubbles up the tree wouldn't solve the problem.
So I guess the react way is to somehow represent this event with the app state?
I have a workaround solution but it's hacky and has a problem (which is why I'm posting this question):
export interface MessageQueue{
messages: number[],
push:(num: number)=>void,
pop:()=>number
}
const defaultMessageQueue{
messages:[],
push: (num:number) => {throw new Error("don't use default");},
pop: () => {throw new Error("don't use default");}
}
export const MessageQueueContext = React.createContext<MessageQueue>(defaultMessageQueue);
In the component I'm providing this with:
const [messages, setmessages] = useState<number[]>([]);
//...
<MessageQueueContext.Provider value={{
messages: messages,
push:(num:number)=>{
setmessages([...messages, num]);
},
pop:()=>{
if(messages.length==0)return;
const message = messages[-1];
setmessages([...messages.slice(0, -1)]);
return message;
}
}}>
Now any component that needs to send or receive messages can use the Context.
Pushing a message works as expected. The Context changes and all components that use it re-render.
But popping a message also changes the context and also causes a re-render. This second re-render is wasted since there is no reason to do it.
Is there a clean way to implement actions/messages/events in a codebase that does state management with useState and useContext?
Since you're using routing in Ionic's router (React-Router), and you navigate between two pages, you can use the URL to pass params to the page:
Define the route to have an optional path param. Something like content-page/:section?
In the ContentPage, get the param (section) using React Router's useParams. Create a useEffect with section as the only changing dependency only. On first render (or if section changes) the scroll code would be called.
const { section } = useParams();
useEffect(() => {
// the code to jump to the section
}, [section]);
I am not sure why can't you use document.dispatchEvent(new CustomEvent()) with an associated eventListener.
Also if it's a matter of scrolling you can scrollIntoView using refs

Categories