Share this:

This is the fourth post in a four-part series. In Part one, we set up a serverless Stripe function on Azure. Part two covered how we hosted the function on Github. The third part covered Stripe Elements in Vue. This last post shows how to configure the checkout component and make the shopping cart fully functional.

There are a number of things we need to store and use for this component, so let's add them to data or bring them in as props. The props that we need from our parent component will be total and success. We'll need the total amount of the purchase so we can send it to Stripe, and the success will be something we need to coordinate between this component and the parent, because both components need to know if the payment was successful. I write out the datatypes as well as a default for my props.

Next, the data we need to store will be the stripeEmail we collected from the form, stripeOptions that I left in to show you can configure some options for your form, as well as status and response that we'll get from communicating with the server and Stripe. We also want to hold whether or not the form was submitted, and whether the form was completed for enabling and disabling the submit button, which can both be booleans.

Now for the magic! We have everything we need—we just need to alter our pay() method, which will do all the heavy lifting for us. I'm going to use Axios for this, which will receive and transform the data:

npm i axios --save

...or using Yarn:

yarn add axios

If you're not familiar with Axios and what it does, check out this article for some background information.

It allows us to track whether we've submitted the form or not, with this.submitted

It uses Axios to post to our function. We got this URL from going to where the function lives in the portal, and clicking "Get Function URL" on the right side of the screen.

It sends the email, token, and total to the serverless function

If it's successful, it changes the status to success, commits to our Vuex store, uses a mutation to clear our cart, and emits to the parent cart component that the payment was successful. It also logs the response to the console, though this is for educational purposes and should be deleted in production.

If it errors, it changes the status to failure, and logs the error response for help with debugging

If the payment fails, which we'll know from our status, we need to let the user know something went wrong, clear our cart, and allow them to try again. In our template:

If the payment succeeds, we will show a loading component, that will play an SVG animation until we hear back from the server. Sometimes this can take a couple of seconds, so it's important that our animation make sense if it is seen for a short or long amount of time, and can loop as necessary.

If we have items in our cart, we show the cart. If the cart is empty and the success is false, we'll let them know that their cart is empty. Otherwise, if the checkout has just been processed, we'll let them know that everything has been executed successfully!

We are now here:

In the AppSuccess.vue component, we have a small SVG animation designed to make them feel good about the purchase:

This will show the success for three seconds while they read it then kick off the restartCart that was shown in the component above. This allows us to reset the cart in case they would like to continue shopping.

Conclusion

You learned how to make a serverless function, host it on Github, add required dependencies, communicate with Stripe, set up a Shopping Cart in a Vue application, establish a connection with the serverless function and Stripe, and handle the logic for all of the cart states. Whew, way to go!

It's worth mentioning that the demo app we looked at is a sample application built for specifically for this purpose of this tutorial. There are a number of steps you'd want to go through for a production site, including testing, building the app's dist folder, using real Stripe keys, only sending the item from the client and adding the price in the serverless function, etc. There are also so many ways to set this up, Serverless functions can be so flexible in tandem with something like Vue. Hopefully this gets you on track and saves you time as you try it out yourself.

Share this:

Comments

Thanks for the awesome tutorial series! Not sure if this is configured somewhere and I missed it, but I had to use the cents amounts 50.00 -> 5000 for the transactions to pull into Stripe. Thanks again!

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.