So, now we are going to create the instance of stripe. And to do so we have to retrieve the publishable key that we got in the first part of the course, together with the secret key if you remember, of course now we are going to write it down here directly in this file. But as we saw in that lesson, we should put it in our in our EMB file and retrieve it accordingly. So, basically, what we have to do is to create the component did mount method and inside this function we should store stripe object in our state. So if this if the object is already present in the window object we are going simply to set in our state our stripe property with the value window dot stripe, and we have to pass our publishable key in just a second. We copy and paste just to not be wrong stripe publishable key and we import it from the config file if is still not available.
We are going to add listener related To the stripe JS selector that was the script tag that was loading the stripe.js library. So, we listen for the load event. And we set the listener in which basically we do the same because now the stripe j s instance is present. So we are going to set the stripe object in the state. So this set state, stripe window, dot stripe, stripe publishable key. So now it's time to create method in our e commerce API class that takes the article id and the token ID generated by stripe that performs the post request to our API endpoint to purchase the given article.
So we create the post request data. So article id and token ID. We use, again, access method post. Then we retrieve the URL that is the checkout purchase. URL, and we store the data. And basically it's the same as we saw before, so everything is by return res dot data if something goes wrong, we are going to catch the error and Log the error in the console.
And according to the response, according to the response structure, we see if there is an error response data error, and we, in that case, reject that one. Otherwise, we just reject the original, the original error. Now it's time to include this coal in our cart for so we go back to the handle sub method because here is where we add the token. Then we go to the pay with token method. And we just Ritter. Before returning is, of course, we have to Eastern see the ecommerce API class.
And on this instance, we call the stripe pay. We took that article ID token ID. According to the result, we will have. Of course, we stop the animation on the progress bar first. Then we have our payload in the data, the payload, we've contained the transaction ID. Sorry, again, this is wrong.
Of course. In the second line, transaction ID is part of payloads, not data. So transaction ID equal payload. What we do is to set state and we say that the submitting processes over the purchase was successful, there is no error. We store even the transaction Id just to give this information later to our client. Because of course in a real ecommerce we would like to give some feedbacks, if they have to contact the customer care.
If something goes wrong, we catch the error. And we stop the propagation of course we log the error again and we retrieve links information from the status and from the error object sorry, and we set the state accordingly. So, our sub meeting process is over. Now, sorry, we have to do it again false, the person is was not successful. So, we have to say that purchase error is through the transaction ID is not available Of course, and we can, for example, create usable, useful error message that is composed by the message, of course, that is the human readable part. And then we can inform the user with some technical stuff if needed.
So we just add the status code and the code