├── .babelrc
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── app.json
├── components
├── AddToCart.js
├── CartItemList.js
├── CartSummary.js
├── Header.js
├── Layout.js
├── OrderItemList.js
├── ProductAttributes.js
├── ProductList.js
└── ProductSummary.js
├── lib
└── moltin.js
├── next.config.js
├── now.json
├── package-lock.json
├── package.json
├── pages
├── cart.js
├── index.js
├── login.js
├── myaccount.js
├── product.js
└── register.js
└── static
├── moltin-light-hex.svg
└── nprogress.css
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["next/babel"],
3 | "env": {
4 | "development": {
5 | "plugins": ["inline-dotenv"]
6 | },
7 | "production": {
8 | "plugins": ["transform-inline-environment-variables"]
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | node_modules
3 | localStorage
4 |
5 | # production
6 | .next
7 |
8 | # misc
9 | .env
10 | .DS_Store
11 | *.log
12 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "singleQuote": true,
4 | "trailingComma": "none"
5 | }
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 - Present moltin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Next.js demo store
2 |
3 | > 🛍 Next.js demo store built with moltin
4 |
5 | Next.js webshop built using [Stripe checkout](https://stripe.com/checkout) and [moltin](https://moltin.com).
6 |
7 | Check out the [demo](https://moltin-nextjs-demo-store.now.sh) here.
8 |
9 | ## 🛠 Setup
10 |
11 | Both a moltin and Stripe account are needed for this store to run successfully.
12 |
13 | Create a `.env` file at the project root with your moltin `client_id` and Stripe test `publishable key`.
14 |
15 | ```dosini
16 | MOLTIN_CLIENT_ID=
17 | STRIPE_PUBLISHABLE_KEY=
18 | ```
19 |
20 | `npm install`
21 |
22 | `npm run dev`
23 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Next.js Demo Store",
3 | "description": "A barebones Next.js store powered by moltin",
4 | "repository": "https://github.com/moltin/nextjs-demo-store",
5 | "logo": "https://www.moltin.com/img/icons/favicons/apple-touch-icon.png",
6 | "keywords": ["moltin", "react", "ecommerce", "next.js", "ssr"],
7 | "success_url": "/",
8 | "env": {
9 | "MOLTIN_CLIENT_ID": {
10 | "description":
11 | "The client_is is the unique ID associated with your store. You can find this inside your moltin Dashboard.",
12 | "value": "EdP3Gi1agyUF3yFS7Ngm8iyodLgbSR3wY4ceoJl0d2"
13 | },
14 | "STRIPE_KEY": {
15 | "description":
16 | "Your Stripe publishable key. You will need the secret key added to the Moltin Dashboard for Stripe checkout to work correctly."
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/components/AddToCart.js:
--------------------------------------------------------------------------------
1 | import { Input, Button, Label } from 'semantic-ui-react'
2 |
3 | import { addToCart } from '../lib/moltin'
4 |
5 | export default class AddToCart extends React.Component {
6 | state = {
7 | loading: false,
8 | quantity: 1
9 | }
10 |
11 | _handleSubmit = async () => {
12 | const { productId } = this.props
13 | const { quantity } = this.state
14 | const cartId = await localStorage.getItem('mcart')
15 |
16 | this.setState({
17 | loading: true
18 | })
19 |
20 | const cart = await addToCart(cartId, productId, quantity)
21 |
22 | this.setState({
23 | loading: false,
24 | quantity: 1
25 | })
26 | }
27 |
28 | _handleChange = ({ target: { value } }) =>
29 | this.setState({
30 | quantity: value
31 | })
32 |
33 | render() {
34 | const { loading, quantity } = this.state
35 |
36 | return (
37 | this._handleChange(e)}
42 | action={{
43 | color: 'orange',
44 | content: 'Add to Cart',
45 | icon: 'plus cart',
46 | onClick: this._handleSubmit,
47 | loading,
48 | disabled: loading
49 | }}
50 | />
51 | )
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/components/CartItemList.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import { Item, Button, Loader, Message } from 'semantic-ui-react'
3 |
4 | export default ({ items, removeFromCart, loading, completed }) => {
5 | if (loading) return
6 |
7 | if (completed)
8 | return (
9 |
10 | Your placed!
11 | Congratulations. Your order and payment has been accepted.
12 |
13 | )
14 |
15 | if (items.length === 0)
16 | return (
17 |
18 | Your cart is empty
19 |
20 | You'll need to add some items to the cart before you can checkout.
21 |
22 |
23 | )
24 |
25 | const mapCartItemsToItems = items =>
26 | items.map(({ id, product_id, name, quantity, meta, image }) => {
27 | const price = meta.display_price.with_tax.unit.formatted || ''
28 | const imageUrl = image.href || '/static/moltin-light-hex.svg'
29 |
30 | return {
31 | childKey: id,
32 | header: (
33 |
34 | {name}
35 |
36 | ),
37 | image: imageUrl,
38 | meta: `${quantity}x ${price}`,
39 | extra: (
40 |