Giters

epan / diy-checkout

Example of customizable checkout powered by Celery

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Celery Custom Checkout Example

  1. What is this? This is an example of how to create a custom, self-hosted checkout that is powered by the Celery backend. You can add this checkout to any website and start selling with it right away.

  2. Why would I want this? You can easily make a beautifully branded and high-converting checkout. And because it's powered by Celery backend, you'll automatically get robust e-commerce features and order management. Most likely, you'll fit one of these two use cases: 1. I'm a person or company with a product and a website, and I want a quick way to set up pre-orders or crowdfunding campaigns with a custom checkout UI without having to deal with building an e-commerce backend. 1. I'm an existing Celery merchant and I've outgrown the existing out-of-the-box checkout UI customizations.

  3. What can I do with this? You can tailor and extend the checkout interface and user experience into whatever you want or just use it as inspiration for your own checkout.

Prerequisites

  • A Celery account
  • Your own website
  • Your website must use SSL
  • jQuery

Functional Specification

Checkout Features

  • One-page checkout
  • Collect shipping addresses later
  • Quantity selection
  • Shipping country and ZIP/postal code
  • Shipping rates based on country
  • Tax rates based on country or United States ZIP code
  • Promo/coupon codes
  • Social share buttons to Facebook, Twitter, and Pinterest
  • Credit card validation via Stripe

Checkout Limitations

  • Stripe only (no PayPal or Affirm support)
  • No state-level shipping rate overrides
  • No product options or variants support

Getting Started

  1. Create a product on Celery
  2. Note your product slug or ID
  • If you are in the dashboard, go to the product you want to sell. The ID is after products in the URL, ex. /products/[id]

  1. Add data-celery="[id or slug]" to your button element

    <!-- Example button element -->
<a href="#" data-celery="53ebdd5e1fd9c90400553dab">Pre-Order</a>

  2. Add dist/celery-cart.min.js and dist/celery.css to your site, where you put it is up to you:

    <!-- Include jQuery before celery-cart.min.js -->
<script src="jquery.js"></script>

<script src="celery-cart.min.js"></script>
<link rel="stylesheet" href="celery.css" />

  3. Click on your "Pre-Order" link

Customizing the Checkout

Currently, you must manually customize the templates to set the countries, quantity options, and copy (header, footer, etc). In the future, this will be more easily configured.

The templates are written in using Mustache (Hogan).

Get up and running

  1. Fork this repo
  2. Install dependencies
  3. Install node/npm
  4. Run npm install in this repo folder
  5. Run npm run serve to automatically start processing file changes and start a server
  6. Replace data-celery value in src/index.html with your product id/slug
  7. Open http://localhost:8000/src in a browser

Edit features

Edit src/js/config.js and flip any feature flags before building. For example:

{
  features: {
    taxes: true,
    coupons: true
  }
}

Customize text and styling

  1. To edit text and content, edit the files located in src/templates
  2. To customize styling, edit the files located in src/less
  • Note: After editing and saving the .less files, the CSS will automatically update in the browser without refreshing. You will be able to see the styling changes almost instantly.

Put it on your website

  1. When you are done customizing, run npm run build to generate the minimized files in dist

  2. Include the newly generated dist/celery-cart.min.js and dist/celery.css on your site, where you put it is up to you:

    <!-- Include jQuery before celery-cart.min.js -->
<script src="jquery.js"></script>

<script src="celery-cart.min.js"></script>
<link rel="stylesheet" href="celery.css" />

  3. Click on your "Pre-Order" link. The checkout UI should pop up.

  4. Congrats! You are ready to sell via your very own custom checkout.

If you have any questions or feedback on the process, please email us at diy-checkout@trycelery.com

IE9 Support
If you want to support IE9, you must include some some plugins for placeholders and CORS support.

Future

This is just an example, you can shape it into whatever you want or just use it as inspiration for your own checkout. Here are some things we will be adding to the example.

CSS/LESS

  • A customization config file will be available for easy basic customizations
  • More explicit styles to reduce weird interactions with existing CSS

Celery Feature Incompatibilities

Note: If you have any of these features configured in your Celery dashboard, they are not yet compatible with this DIY Checkout.

Products

  • Product Options and Variants
  • Product Collections

Payments Settings

  • PayPal
  • Affirm

Checkout Settings

  • Require shipping address
  • Require company name
  • Require phone number
  • Optional "Add notes for seller"
  • "Message to your buyers"
  • Custom tracking scripts
  • Custom confirmation page

Apps

  • Google Analytics

About

Example of customizable checkout powered by Celery