All Projects → sdras → Sample Vue Shop

sdras / Sample Vue Shop

Licence: mit
See readme for newer repo details! A sample shop that shows how to manage payments with Vue, Stripe, and Serverless Functions

Projects that are alternatives of or similar to Sample Vue Shop

Ecommerce Netlify
🛍 A JAMstack Ecommerce Site built with Nuxt and Netlify Functions
Stars: ✭ 1,147 (-1.63%)
Mutual labels:  stripe, stripe-checkout, nuxt
connect-direct-charge-checkout
Accept a payment with direct charges and Checkout
Stars: ✭ 18 (-98.46%)
Mutual labels:  stripe, stripe-checkout
React Express Stripe
💰 Minimal Boilerplate for Stripe used in React and Express. Charge payments from your customers with this project.
Stars: ✭ 209 (-82.08%)
Mutual labels:  stripe, stripe-checkout
Checkout Netlify Serverless
Sell products on the Jamstack with Netlify Functions and Stripe Checkout!
Stars: ✭ 58 (-95.03%)
Mutual labels:  stripe, stripe-checkout
Sample Stripe Handler
Serverless function that uses the stripe api for a checkout process in a Vue application
Stars: ✭ 155 (-86.71%)
Mutual labels:  stripe, stripe-checkout
Buefy Shop
A sample shop built with Nuxt, Stripe, Firebase and Serverless Functions
Stars: ✭ 207 (-82.25%)
Mutual labels:  stripe, nuxt
react-elements-netlify-serverless
Digital Wallet payments with React Stripe Elements and Netlify Functions
Stars: ✭ 21 (-98.2%)
Mutual labels:  stripe, stripe-checkout
Checkout Subscription And Add On
Uses Stripe Checkout to create a payment page that starts a subscription for a new customer.
Stars: ✭ 169 (-85.51%)
Mutual labels:  stripe, stripe-checkout
Node.js-Stripe-Shopping-Cart
Example integration of Stripe's Checkout API into a Node.js application
Stars: ✭ 93 (-92.02%)
Mutual labels:  stripe, stripe-checkout
nuxt-stripejs
💳 NuxtJS module for Stripe.js which loads only when required and w/ retry mechanism
Stars: ✭ 17 (-98.54%)
Mutual labels:  stripe, nuxt
Checkout Single Subscription
Learn how to combine Checkout and Billing for fast subscription pages
Stars: ✭ 310 (-73.41%)
Mutual labels:  stripe, stripe-checkout
direct-stripe
Stripe payment button for WordPress websites
Stars: ✭ 12 (-98.97%)
Mutual labels:  stripe, stripe-checkout
netlify-lambda-function-example
An example Netlify Lambda function that processes payments with Stripe.
Stars: ✭ 93 (-92.02%)
Mutual labels:  stripe, stripe-checkout
Checkout One Time Payments
Use Checkout to quickly collect one-time payments.
Stars: ✭ 417 (-64.24%)
Mutual labels:  stripe, stripe-checkout
Vue Stripe
Stripe Checkout & Elements for Vue.js
Stars: ✭ 669 (-42.62%)
Mutual labels:  stripe, stripe-checkout
Opencart
Free PWA & SPA for OpenCart
Stars: ✭ 50 (-95.71%)
Mutual labels:  nuxt
Nuxt Compress
A simple static asset compression module for Nuxt that runs Gzip and Brotli compression during the build process
Stars: ✭ 61 (-94.77%)
Mutual labels:  nuxt
Stripe Kit
Stars: ✭ 50 (-95.71%)
Mutual labels:  stripe
Stripy
Micro wrapper for Stripe's REST API.
Stars: ✭ 49 (-95.8%)
Mutual labels:  stripe
Parabol
Free online agile retrospective meeting tool
Stars: ✭ 1,145 (-1.8%)
Mutual labels:  stripe

Note: This repo is no longer being maintained in favor of a newer, improved version: https://github.com/sdras/ecommerce-netlify

Vue Sample Shop

This small demo shows how to accept payments with stripe with Vue.js using a serverless function. It's actually not that bad to set up! The shop also shows how a number of concepts work in Vue. Server side rendering and routing is done with Nuxt.js. Centralized state management with Vuex for product details. Of note, using computed properties, .sync, CSS Grid, and transition-group.

Live demo at https://shoppity.azurewebsites.net/

Articles explaining the demo will be available soon at https://css-tricks.com/

The serverless function is open source as well, available at this repo https://github.com/sdras/sample-stripe-handler

Vue stripe sample shop

Build Setup

# install dependencies
$ npm install # Or yarn

# serve with hot reload at localhost:3000
$ npm run dev

# generate static project, get ready for launch on app services
$ npm run generate
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].