Giter VIP home page Giter VIP logo

printful-nextjs-starter's Introduction

Printufl + Next.js Template

This is a template for creating an online ecommerce store from 0 to production for $0! It's optimized to use the printful API to import product data from your online store with stripe as the checkout provider.

Demo

Technologies Used

Features

  • Secure Payments
  • Automatic Order Creation
  • Built with Next.js
  • Custom Cart(Redux) & Custom Checkout (Stripe)
  • Styled With tailwind CSS
  • Fully Typed
  • One Click Deployable
  • .... and more coming soon

Setup

You'll first need to setup Stripe, Printful, and Clerk before you can run the storefront locally, or deploy.

Please also not that you will not be able to use the webhook functionality if you do not have your project deployed.

1. Setup Printful

Login or create an account

You can login, or sign up with Facebook, Google, Apple, and your email.

Create a new store

You'll want to select Manual order platform / API from the available methods when creating a new store.

Add products to your inventory

Let's add a product to your store.

  1. Select from over 200 hundred products which you would like to sell.
  2. Configure the product design by adding your logo, selecting available colors, and sizes.
  3. Next, proceed to mockups to select the image that will be shown in the storefront. You can select from people wearing your product, to flat wrinkled mockups. Make sure to select PNG as your "mockup format" when creating your product.
  4. Next, proceed to details where you can name your product. This name will be shown in the storefront.
  5. Next, proceed to pricing, and set some prices. Here you'll see the price it costs you, and the retail prices you'll charge your customers. You can quickly increase/decrease the profit margin here too.
  6. Save product

That's it! ๐ŸŽ‰ Repeat this step for all products you want to sell.

โ„น๏ธ Don't forget, shipping and taxes are extra!

โ„น๏ธ You can optionally create a Product Template for items you may want to add to additional stores later.

Configure selling preferences

Inside Settings > Stores, you'll want to configure your default selling preferences. You can specify your selling region. You can opt to sell worldwide, and choose products from a wide variety of products, or you can set a specific region, such as the UK.

Depending on where you sell, you'll be liable to pay (or collect + pay) VAT. If you are VAT registered, provide Printful your VAT ID so orders can reflect a zero VAT amount where applicable.

๐Ÿ“บ Learn more about VAT and Printful

โ„น๏ธ If you need to collect VAT from customers, make sure to enable the Tax API with Snipcart.

Configure shipping preferences

Inside Settings > Stores > Shipping, you'll want to configure the USA & Europe settings.

The defaults should work for most, but you might want to make some adjustments for domestic and international shipping.

Create a Printful Private token

Inside Settings > Stores > API, click visit Printful Developers.

From here you will want to create a new Private token, select the store you want to give this token access to, select the permissions (all), set an expiry and copy the value for use later as PRINTFUL_API_KEY.

Add a billing method

You'll want to add a billing method to Printful so you can fulfill orders.

When a customer makes an order, Printful will charge YOU to process the order. ๐Ÿ“บ Learn more how Printful processes payments for order fulfillment.

2. Setup Stripe

Login or create an account

You'll need to register, or login to Snipcart.

API key

When your account is setup you will be able to see a button in the top navigation bar that will say 'Developers'.

In this Developers dashboard you will be able to access the API keys for your Stripe account to be used in payment collection.

Configure your website domain

It's important you configure your Default Website Domain so Stripe can successfully validate when checkouts are completed and initaite the webhook code that will create the printful order.

You may also want to add other domains, and subdomains if you're working locally with this but stripe also provides testing capability.

The domain you provide here will be your live URL, such as staterecomm.com.

Configure webhooks

You'll want to configure the endpoint for webhooks. This webhook will be triggered at the post purchase stage.

This projects webhook is designed to listen for when checkout.session.completed but this can be customized to your desire.

Be sure to configure your webhook properly to access the automated order creation process.

For example, when a customer places a successful order, this webhook will be triggered, and it will call a function to add the order to Printful.

3. Setup Clerk

Login or create an account

You need to login, or sign up for Clerk.

Create a new store and Access API Keys

You'll want to create an application register on clerk. After you create and application register and you reach the dashboard of that application. on the left side navigation at the bottom you will see 'API Keys'. These keys are all you need to get started. No mandatory customization is needed for Clerk.

4. Deploy

Fill in the '.env' file in the project with your API keys

Running locally

Next Install the project dependencies, and start the local server:

pnpm install
pnpm run dev

Open http://localhost:3000 to see the storefront locally! ๐Ÿš€

Server Actions & API Routes

Fetching Products This template includes 4 server action functions for fetching products by category or only singular products. There is also general server action functions, that fetch all products or fetch all product IDs. The props for theses functions can be found by using the 'data' page. The 'data' page under the 'app' directory returns the json data of your stores products. This data can be used to fill in the props of the getCategory function.

License

Licensed under the MIT license.

printful-nextjs-starter's People

Contributors

lbsudo avatar

Stargazers

Kristof Grenson avatar Zak Hargreaves avatar  avatar  avatar John Snyder avatar George avatar  avatar Benny avatar Raphael Machado avatar

Watchers

 avatar

printful-nextjs-starter's Issues

Clarification on Configuring Stripe in Next.js Integration

Hello,

I was looking for information on integrating Printful with Next.js and came across your project.

I followed the documentation; however, it's not entirely clear to me how to configure the 'Default Website Domain' in Stripe.

I filled in the .env file with the API keys, then ran it locally. When I click on 'checkout' in the cart, I receive an error message: "Failed to create Stripe Payment."

Screenshot

Could you please provide some guidance on the correct configuration for the 'Default Website Domain' in Stripe? Any assistance would be greatly appreciated.

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.