Article Series:<\/h4>\n\n- Setup and Testing<\/a><\/li>\n
- Stripe Function and Hosting<\/a><\/li>\n
- Application and Checkout Component<\/a> (This Post)<\/li>\n
- Configure the Checkout Component<\/a><\/li>\n<\/ol>\n<\/div>\n
\nStripe has a number of ways to build out a checkout form, the most basic being a single button on the page that you trigger to pull up their custom modal. There\u2019s a repo and component for this<\/a>, but as easy as that is to implement (it’s probably the most simple way to do it), I wanted a little more customization and wanted the checkout flow to be part of the page and application. This approach wouldn\u2019t work for my needs.<\/p>\nStripe Elements<\/h3>\n
Stripe also offers a thing called Elements<\/a>. Elements allow you to integrate Stripe’s payment system into your own checkout form and style it like your own site for a cohesive experience. It won’t feel like you’re using a third party plugin. They do have some pre-styled examples<\/a> if you prefer something you can use right out of the box.<\/p>\nLuckily for us, there’s a really nice repo with a Vue version of Stripe Elements called vue-stripe-elements<\/a>. The repo’s documentation is really nice, so you could check that out. Here’s how I put it to use:<\/p>\nnpm i vue-stripe-elements-plus --save<\/code><\/pre>\n…or using Yarn:<\/p>\n
yarn add vue-stripe-elements-plus<\/code><\/pre>\nNow let’s talk about our cart and integrate it.<\/p>\n
The Cart<\/h3>\n
Here’s what everything looks like as a birds eye view of the application. We’ve already addressed the function and stripe pieces, now let’s dig into the application itself.<\/p>\n![\"birds](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/Screen-Shot-2018-01-15-at-6.35.36-PM.png?ssl=1\")
<\/figure>\nWe’re not going to go through setting up the entire application in these posts, rather just the Cart and Checkout. I’d suggest checking out the following links before continuing if you need to catch up on the basics of Vue, Vuex, and Nuxt:<\/p>\n
\n- CSS-Tricks Vue Guide<\/a><\/li>\n
- Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js<\/a><\/li>\n<\/ul>\n
In our general store set up with Vuex, we hold a manifest of all of our product data used to populate the pages with items. We’ll also use that information to populate a (currently empty) cart object where items can be added for purchase. We’ll use that data on a page called `Cart.vue` in the pages directory. If you’re unfamiliar with Nuxt.js, it allows us to use .vue<\/code> components as pages by creating them in this pages directory. We can still populate these pages with components from the components directory to create a more modular application. Here are the parts we’re discussing now:<\/p>\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/Screen-Shot-2018-01-15-at-6.39.23-PM.png?ssl=1\")
<\/figure>\nWe’ll need two pieces of information from that store in Vuex: the contents of the cart<\/code> and the cartTotal<\/code>.<\/p>\nWe’ll use computed properties in pages\/Cart.vue<\/code> to fetch that information so that we can cache and use them in the cart.<\/p>\ncomputed: {\r\n cart() {\r\n return this.$store.state.cart;\r\n },\r\n cartTotal() {\r\n return this.$store.state.cartTotal;\r\n },\r\n ...\r\n}<\/code><\/pre>\n…and we’ll create a new computed property that will store the monetary total of the items in the cart as well:<\/p>\n
computed: {\r\n ...\r\n total() {\r\n return Object.values(this.cart)\r\n .reduce((acc, el) => acc + (el.count * el.price), 0)\r\n .toFixed(2);\r\n }\r\n}<\/code><\/pre>\nThe first thing that we’ll do is see if the cart has items in it. If it does, then we need to check that the payment hasn’t already been processed. We need to do this because there’s no need to display a checkout form if there are no items in the cart or if payment has already been processed for the items that were added.<\/p>\n
<div v-if=\"cartTotal > 0\">\r\n <!--we'll add our checkout here-->\r\n<\/div>\r\n\r\n<!--If the cart is empty, give them the ability to get back to the main page to add items-->\r\n<div v-else-if=\"cartTotal === 0 && success === false\" class=\"empty\">\r\n <!--we'll add our empty state here-->\r\n<\/div>\r\n\r\n<!--If there's a success, let's let people know it's being processed, we'll add a success component later on-->\r\n<div v-else>\r\n <!--we'll add success here-->\r\n<\/div><\/code><\/pre>\nWe’ll also create a success property in our data that we’ll initially set to false<\/code> and use later to record whether or not a payment was successfully submitted.<\/p>\ndata() {\r\n return {\r\n success: false\r\n };\r\n},<\/code><\/pre>\nWe want to show cart items if they exist, their individual totals (as we can have multiple counts of the same item) and the final total.<\/p>\n
<div v-if=\"cartTotal > 0\">\r\n <h1>Cart<\/h1>\r\n \r\n <div class=\"cartitems\"\r\n v-for=\"item in cart\"\r\n key=\"item\">\r\n <div class=\"carttext\">\r\n <h4>{{ item.name }}<\/h4>\r\n <p>{{ item.price | usdollar }} x {{ item.count }}<\/p>\r\n <p>Total for this item: <strong>{{ item.price * item.count }}<\/strong><\/p>\r\n <\/div>\r\n <img class=\"cartimg\" :src=\"`\/${item.img}`\" :alt=\"`Image of ${item.name}`\">\r\n <\/div>\r\n\r\n <div class=\"total\">\r\n <h3>Total: {{ total | usdollar }}<\/h3>\r\n <\/div>\r\n\r\n <!--we're going to add our checkout here-->\r\n<\/div><\/code><\/pre>\nWe’re using a filter to format the prices in US dollars. I format them this way instead of hardcoding them in case I need to support other currencies in the future.<\/p>\n
filters: {\r\n usdollar: function(value) {\r\n return `$${value}`;\r\n }\r\n}<\/code><\/pre>\nSetting up the Checkout Component<\/h3>\n
Now we’re going to create our checkout<\/code> component, which will hold all of the Stripe checkout logic and connect to the serverless function we set up in Part Two<\/a>. We’ll register the component in the Cart.vue<\/code> file:<\/p>\nimport AppCheckout from '.\/..\/components\/AppCheckout.vue';\r\n\r\nexport default {\r\n components: {\r\n AppCheckout\r\n },\r\n ...\r\n}<\/code><\/pre>\nHere’s where we’re at now:<\/p>\n![\"Showing](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/Screen-Shot-2018-01-15-at-6.41.00-PM.png?ssl=1\")
<\/figure>\nAnd, in the checkout<\/code> component itself, we’ll bring over the base for the file that we saw in the vue-stripe-elements<\/a> repo documentation:<\/p>\n<template>\r\n <div id='app'>\r\n <h1>Please give us your payment details:<\/h1>\r\n <card class='stripe-card'\r\n :class='{ complete }'\r\n stripe='pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'\r\n :options='stripeOptions'\r\n @change='complete = $event.complete'\r\n \/>\r\n <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card<\/button>\r\n <\/div>\r\n<\/template><\/code><\/pre>\n<script>\r\nimport { stripeKey, stripeOptions } from '.\/stripeConfig.json'\r\nimport { Card, createToken } from 'vue-stripe-elements-plus'\r\n\r\nexport default {\r\n data () {\r\n return {\r\n complete: false,\r\n stripeOptions: {\r\n \/\/ see https:\/\/stripe.com\/docs\/stripe.js#element-options for details\r\n }\r\n }\r\n },\r\n\r\n components: { Card },\r\n\r\n methods: {\r\n pay () {\r\n \/\/ createToken returns a Promise which resolves in a result object with\r\n \/\/ either a token or an error key.\r\n \/\/ See https:\/\/stripe.com\/docs\/api#tokens for the token object.\r\n \/\/ See https:\/\/stripe.com\/docs\/api#errors for the error object.\r\n \/\/ More general https:\/\/stripe.com\/docs\/stripe.js#stripe-create-token.\r\n createToken().then(data => console.log(data.token))\r\n }\r\n }\r\n}\r\n<\/script><\/code><\/pre>\nNext Up…<\/h3>\n
So far, this is what the component looks like out of the box. We’re going to have to update this component a bit to fit our needs, but not too much. Stay tuned tomorrow for the final installment when we connect our component to our serverless function and finish up the checkout!<\/p>\n
\nArticle Series:<\/h4>\n\n- Setup and Testing<\/a><\/li>\n
- Stripe Function and Hosting<\/a><\/li>\n
- Application and Checkout Component<\/a> (This Post)<\/li>\n
- Configure the Checkout Component<\/a><\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
This is the third 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. This post will focus on wiring everything up as a Vue.js application.<\/p>\n","protected":false},"author":7699,"featured_media":265547,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1369,1024,1366,1367,1073],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1","jetpack-related-posts":[{"id":263632,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-two\/","url_meta":{"origin":263637,"position":0},"title":"Creating a Vue.js Serverless Checkout Form: Stripe Function and Hosting","date":"January 17, 2018","format":false,"excerpt":"We're now in the second post of a four-part series where we're creating a checkout form application in Vue.js that can accept payments via the Stripe API. In part one, we looked at the concept of serverless functions, set one up in Azure, and connected it to a Stripe account.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263593,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-one\/","url_meta":{"origin":263637,"position":1},"title":"Creating a Vue.js Serverless Checkout Form: Setup and Testing","date":"January 16, 2018","format":false,"excerpt":"There comes a time in any young app\u2019s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we\u2019ll go over how to set up a serverless function,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265041,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-four\/","url_meta":{"origin":263637,"position":2},"title":"Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component","date":"January 19, 2018","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292959,"url":"https:\/\/css-tricks.com\/lets-build-a-jamstack-e-commerce-store-with-netlify-functions\/","url_meta":{"origin":263637,"position":3},"title":"Let’s Build a JAMstack E-Commerce Store with Netlify Functions","date":"August 20, 2019","format":false,"excerpt":"A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn\u2019t have to include all three. What defines JAMstack is that it\u2019s served without web servers. If you consider the history of computing, this type of abstraction isn\u2019t unnatural;\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/ecommerce-demo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267373,"url":"https:\/\/css-tricks.com\/building-serverless-cms-powered-vue-js\/","url_meta":{"origin":263637,"position":4},"title":"Building a Serverless CMS Powered by Vue.js","date":"March 2, 2018","format":false,"excerpt":"In this tutorial, you\u2019ll learn how to build a serverless Vue.js application using ButterCMS. ButterCMS is a headless CMS and blogging platform that lets you build CMS-powered apps using any programming language, including Vue.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/vue-website.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":269826,"url":"https:\/\/css-tricks.com\/vuepress-static-site-generator\/","url_meta":{"origin":263637,"position":5},"title":"VuePress Static Site Generator","date":"April 18, 2018","format":false,"excerpt":"VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line. We talk a lot about Vue around\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/vuepress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1024%2C683&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=263637"}],"version-history":[{"count":44,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637\/revisions"}],"predecessor-version":[{"id":265996,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637\/revisions\/265996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/265547"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=263637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=263637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=263637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
Stripe has a number of ways to build out a checkout form, the most basic being a single button on the page that you trigger to pull up their custom modal. There\u2019s a repo and component for this<\/a>, but as easy as that is to implement (it’s probably the most simple way to do it), I wanted a little more customization and wanted the checkout flow to be part of the page and application. This approach wouldn\u2019t work for my needs.<\/p>\n Stripe also offers a thing called Elements<\/a>. Elements allow you to integrate Stripe’s payment system into your own checkout form and style it like your own site for a cohesive experience. It won’t feel like you’re using a third party plugin. They do have some pre-styled examples<\/a> if you prefer something you can use right out of the box.<\/p>\n Luckily for us, there’s a really nice repo with a Vue version of Stripe Elements called vue-stripe-elements<\/a>. The repo’s documentation is really nice, so you could check that out. Here’s how I put it to use:<\/p>\n …or using Yarn:<\/p>\n Now let’s talk about our cart and integrate it.<\/p>\n Here’s what everything looks like as a birds eye view of the application. We’ve already addressed the function and stripe pieces, now let’s dig into the application itself.<\/p>\n We’re not going to go through setting up the entire application in these posts, rather just the Cart and Checkout. I’d suggest checking out the following links before continuing if you need to catch up on the basics of Vue, Vuex, and Nuxt:<\/p>\n In our general store set up with Vuex, we hold a manifest of all of our product data used to populate the pages with items. We’ll also use that information to populate a (currently empty) cart object where items can be added for purchase. We’ll use that data on a page called `Cart.vue` in the pages directory. If you’re unfamiliar with Nuxt.js, it allows us to use We’ll need two pieces of information from that store in Vuex: the contents of the We’ll use computed properties in …and we’ll create a new computed property that will store the monetary total of the items in the cart as well:<\/p>\n The first thing that we’ll do is see if the cart has items in it. If it does, then we need to check that the payment hasn’t already been processed. We need to do this because there’s no need to display a checkout form if there are no items in the cart or if payment has already been processed for the items that were added.<\/p>\n We’ll also create a success property in our data that we’ll initially set to We want to show cart items if they exist, their individual totals (as we can have multiple counts of the same item) and the final total.<\/p>\n We’re using a filter to format the prices in US dollars. I format them this way instead of hardcoding them in case I need to support other currencies in the future.<\/p>\n Now we’re going to create our Here’s where we’re at now:<\/p>\n And, in the So far, this is what the component looks like out of the box. We’re going to have to update this component a bit to fit our needs, but not too much. Stay tuned tomorrow for the final installment when we connect our component to our serverless function and finish up the checkout!<\/p>\n This is the third 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. This post will focus on wiring everything up as a Vue.js application.<\/p>\n","protected":false},"author":7699,"featured_media":265547,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1369,1024,1366,1367,1073],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1","jetpack-related-posts":[{"id":263632,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-two\/","url_meta":{"origin":263637,"position":0},"title":"Creating a Vue.js Serverless Checkout Form: Stripe Function and Hosting","date":"January 17, 2018","format":false,"excerpt":"We're now in the second post of a four-part series where we're creating a checkout form application in Vue.js that can accept payments via the Stripe API. In part one, we looked at the concept of serverless functions, set one up in Azure, and connected it to a Stripe account.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263593,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-one\/","url_meta":{"origin":263637,"position":1},"title":"Creating a Vue.js Serverless Checkout Form: Setup and Testing","date":"January 16, 2018","format":false,"excerpt":"There comes a time in any young app\u2019s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we\u2019ll go over how to set up a serverless function,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265041,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-four\/","url_meta":{"origin":263637,"position":2},"title":"Creating a Vue.js Serverless Checkout Form: Configure the Checkout Component","date":"January 19, 2018","format":false,"excerpt":"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\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292959,"url":"https:\/\/css-tricks.com\/lets-build-a-jamstack-e-commerce-store-with-netlify-functions\/","url_meta":{"origin":263637,"position":3},"title":"Let’s Build a JAMstack E-Commerce Store with Netlify Functions","date":"August 20, 2019","format":false,"excerpt":"A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn\u2019t have to include all three. What defines JAMstack is that it\u2019s served without web servers. If you consider the history of computing, this type of abstraction isn\u2019t unnatural;\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/ecommerce-demo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267373,"url":"https:\/\/css-tricks.com\/building-serverless-cms-powered-vue-js\/","url_meta":{"origin":263637,"position":4},"title":"Building a Serverless CMS Powered by Vue.js","date":"March 2, 2018","format":false,"excerpt":"In this tutorial, you\u2019ll learn how to build a serverless Vue.js application using ButterCMS. ButterCMS is a headless CMS and blogging platform that lets you build CMS-powered apps using any programming language, including Vue.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/vue-website.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":269826,"url":"https:\/\/css-tricks.com\/vuepress-static-site-generator\/","url_meta":{"origin":263637,"position":5},"title":"VuePress Static Site Generator","date":"April 18, 2018","format":false,"excerpt":"VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line. We talk a lot about Vue around\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/vuepress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1024%2C683&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=263637"}],"version-history":[{"count":44,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637\/revisions"}],"predecessor-version":[{"id":265996,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/263637\/revisions\/265996"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/265547"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=263637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=263637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=263637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Stripe Elements<\/h3>\n
npm i vue-stripe-elements-plus --save<\/code><\/pre>\nyarn add vue-stripe-elements-plus<\/code><\/pre>\nThe Cart<\/h3>\n
<\/figure>\n\n
.vue<\/code> components as pages by creating them in this pages directory. We can still populate these pages with components from the components directory to create a more modular application. Here are the parts we’re discussing now:<\/p>\n<\/figure>\ncart<\/code> and the cartTotal<\/code>.<\/p>\npages\/Cart.vue<\/code> to fetch that information so that we can cache and use them in the cart.<\/p>\ncomputed: {\r\n cart() {\r\n return this.$store.state.cart;\r\n },\r\n cartTotal() {\r\n return this.$store.state.cartTotal;\r\n },\r\n ...\r\n}<\/code><\/pre>\ncomputed: {\r\n ...\r\n total() {\r\n return Object.values(this.cart)\r\n .reduce((acc, el) => acc + (el.count * el.price), 0)\r\n .toFixed(2);\r\n }\r\n}<\/code><\/pre>\n<div v-if=\"cartTotal > 0\">\r\n <!--we'll add our checkout here-->\r\n<\/div>\r\n\r\n<!--If the cart is empty, give them the ability to get back to the main page to add items-->\r\n<div v-else-if=\"cartTotal === 0 && success === false\" class=\"empty\">\r\n <!--we'll add our empty state here-->\r\n<\/div>\r\n\r\n<!--If there's a success, let's let people know it's being processed, we'll add a success component later on-->\r\n<div v-else>\r\n <!--we'll add success here-->\r\n<\/div><\/code><\/pre>\nfalse<\/code> and use later to record whether or not a payment was successfully submitted.<\/p>\ndata() {\r\n return {\r\n success: false\r\n };\r\n},<\/code><\/pre>\n<div v-if=\"cartTotal > 0\">\r\n <h1>Cart<\/h1>\r\n \r\n <div class=\"cartitems\"\r\n v-for=\"item in cart\"\r\n key=\"item\">\r\n <div class=\"carttext\">\r\n <h4>{{ item.name }}<\/h4>\r\n <p>{{ item.price | usdollar }} x {{ item.count }}<\/p>\r\n <p>Total for this item: <strong>{{ item.price * item.count }}<\/strong><\/p>\r\n <\/div>\r\n <img class=\"cartimg\" :src=\"`\/${item.img}`\" :alt=\"`Image of ${item.name}`\">\r\n <\/div>\r\n\r\n <div class=\"total\">\r\n <h3>Total: {{ total | usdollar }}<\/h3>\r\n <\/div>\r\n\r\n <!--we're going to add our checkout here-->\r\n<\/div><\/code><\/pre>\nfilters: {\r\n usdollar: function(value) {\r\n return `$${value}`;\r\n }\r\n}<\/code><\/pre>\nSetting up the Checkout Component<\/h3>\n
checkout<\/code> component, which will hold all of the Stripe checkout logic and connect to the serverless function we set up in Part Two<\/a>. We’ll register the component in the Cart.vue<\/code> file:<\/p>\nimport AppCheckout from '.\/..\/components\/AppCheckout.vue';\r\n\r\nexport default {\r\n components: {\r\n AppCheckout\r\n },\r\n ...\r\n}<\/code><\/pre>\n<\/figure>\ncheckout<\/code> component itself, we’ll bring over the base for the file that we saw in the vue-stripe-elements<\/a> repo documentation:<\/p>\n<template>\r\n <div id='app'>\r\n <h1>Please give us your payment details:<\/h1>\r\n <card class='stripe-card'\r\n :class='{ complete }'\r\n stripe='pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'\r\n :options='stripeOptions'\r\n @change='complete = $event.complete'\r\n \/>\r\n <button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card<\/button>\r\n <\/div>\r\n<\/template><\/code><\/pre>\n<script>\r\nimport { stripeKey, stripeOptions } from '.\/stripeConfig.json'\r\nimport { Card, createToken } from 'vue-stripe-elements-plus'\r\n\r\nexport default {\r\n data () {\r\n return {\r\n complete: false,\r\n stripeOptions: {\r\n \/\/ see https:\/\/stripe.com\/docs\/stripe.js#element-options for details\r\n }\r\n }\r\n },\r\n\r\n components: { Card },\r\n\r\n methods: {\r\n pay () {\r\n \/\/ createToken returns a Promise which resolves in a result object with\r\n \/\/ either a token or an error key.\r\n \/\/ See https:\/\/stripe.com\/docs\/api#tokens for the token object.\r\n \/\/ See https:\/\/stripe.com\/docs\/api#errors for the error object.\r\n \/\/ More general https:\/\/stripe.com\/docs\/stripe.js#stripe-create-token.\r\n createToken().then(data => console.log(data.token))\r\n }\r\n }\r\n}\r\n<\/script><\/code><\/pre>\nNext Up…<\/h3>\n
Article Series:<\/h4>\n
\n