Building an E-Commerce Store with Rails and Stripe Checkout: Full Tutorial

Coding

Building an E-Commerce Store with Rails and Stripe Checkout: Full Tutorial

Kenroy
Sep 11, 2024
5 min Read

In this step-by-step guide, we’ll build an e-commerce store using Ruby on Rails with a session-based shopping cart, and integrate Stripe Checkout for payment processing. We’ll cover every necessary step, from setting up the application to processing payments through Stripe. I would assume that you have basic knowledge of ruby on rails. This is just the basic to give you an idea of how to implement this strategy. Please consider adding admin for access only to upload and make changes to products and all the backends. I could do a part 2 to this if requested.

Table of Contents

1. Setting Up the Rails Application
2. Creating the Product Model
3. Implementing a Shopping Cart using Sessions
4. Checkout Process with Stripe Integration
5. Allowing Product Image Uploads
6. Final Thoughts and Next Steps

1. Setting Up the Rails Application

Let’s start by setting up a new Rails project.

Create a new Rails application:

rails new ecommerce_store
cd ecommerce_store

You can build an authentication system from scratch but that is very time-consuming, plus devise already has all the functionality we need.
Install Devise (optional but recommended for user authentication):
Add the gem to your Gemfile:
```
gem 'devise'
```
Then run the following commands:

bundle install
rails generate devise:install
rails generate devise User
rails db:migrate

Set up the home page:
Open config/routes.rb and set the root path to the products index page:
```
root 'products#index'
```

Install Stripe gem:
Add the following gem to your Gemfile for Stripe:
```
gem 'stripe'
```
Run bundle install to install it.

2. Creating the Product Model

Let’s create a Product model with attributes like title, description, price, and stock.

Generate the Product model:

rails generate model Product title:string description:text price:decimal stock:integer
rails db:migrate

Add validations to the Product model (app/models/product.rb):

class Product < ApplicationRecord
  validates :title, :price, :stock, presence: true
end

Create the ProductsController:

Generate the controller:
```
rails generate controller Products
```

Define CRUD actions for products (app/controllers/products_controller.rb):

class ProductsController < ApplicationController
  def index
    @products = Product.all
  end

  def show
    @product = Product.find(params[:id])
  end

  def new
    @product = Product.new
  end

  def create
    @product = Product.new(product_params)
    if @product.save
      redirect_to @product, notice: 'Product created successfully.'
    else
      render :new
    end
  end

  private

  def product_params
    params.require(:product).permit(:title, :description, :price, :stock)
  end
end

Set up routes for products in config/routes.rb:
```
resources :products
```

Create the views:

app/views/products/index.html.erb:

<h1>Products</h1>
<ul>
  <% @products.each do |product| %>
    <li><%= link_to product.title, product %> - <%= number_to_currency(product.price) %></li>
  <% end %>
</ul>
<%= link_to 'New Product', new_product_path %>

app/views/products/show.html.erb:

<h1><%= @product.title %></h1>
<p><%= @product.description %></p>
<p>Price: <%= number_to_currency(@product.price) %></p>

3. Implementing a Shopping Cart Using Sessions

Now we’ll create a session-based shopping cart to store items as users browse the store.

Generate a controller for the cart:
```
rails generate controller Carts
```

Define actions for the cart in app/controllers/carts_controller.rb:

class CartsController < ApplicationController
  def show
    @cart_items = current_cart
  end

  def add_item
    product = Product.find(params[:product_id])
    cart = current_cart
    cart[product.id.to_s] ||= { 'quantity' => 0 }
    cart[product.id.to_s]['quantity'] += 1
    session[:cart] = cart

    redirect_to cart_path
  end

  def remove_item
    cart = current_cart
    cart.delete(params[:product_id])
    session[:cart] = cart

    redirect_to cart_path
  end

  private

  def current_cart
    session[:cart] ||= {}
  end
end

Set up routes for the cart in config/routes.rb:

resource :cart, only: [:show] do
  post 'add_item/:product_id', to: 'carts#add_item', as: :add_item
  delete 'remove_item/:product_id', to: 'carts#remove_item', as: :remove_item
end

Create views for the cart (app/views/carts/show.html.erb):

<h1>Your Cart</h1>

<% if @cart_items.any? %>
  <% @cart_items.each do |product_id, details| %>
    <% product = Product.find(product_id) %>
    <div>
      <h3><%= product.title %></h3>
      <p>Quantity: <%= details['quantity'] %></p>
      <p>Price: <%= number_to_currency(product.price * details['quantity']) %></p>
      <%= button_to 'Remove', remove_item_cart_path(product_id: product.id), method: :delete %>
    </div>
  <% end %>
<% else %>
  <p>Your cart is empty.</p>
<% end %>

Add "Add to Cart" buttons to product views:
In app/views/products/show.html.erb:

<%= button_to 'Add to Cart', add_item_cart_path(product_id: @product.id), method: :post %>

4. Checkout Process with Stripe Integration

Now we’ll integrate Stripe to handle payments.

Set up Stripe:
- Sign up for a Stripe account and get your API keys from the Stripe Dashboard.
- Create environment variables for STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY in config/credentials.yml.enc:
- ```
stripe:
  publishable_key: pk_test_xxxxx
  secret_key: sk_test_xxxxx
```
Add Stripe to the application by creating a Checkout controller:
```
rails generate controller Checkouts
```

Set up Stripe Checkout in the CheckoutsController:

class CheckoutsController < ApplicationController
  def create
    product = Product.find(params[:product_id])
    @session = Stripe::Checkout::Session.create(
      payment_method_types: ['card'],
      line_items: [{
        name: product.title,
        amount: (product.price * 100).to_i,
        currency: 'usd',
        quantity: 1
      }],
      mode: 'payment',
      success_url: checkout_success_url + "?session_id={CHECKOUT_SESSION_ID}",
      cancel_url: checkout_cancel_url
    )

    respond_to do |format|
      format.js # renders create.js.erb for Stripe redirection
    end
  end

  def success
    # Handle successful payment logic here
  end

  def cancel
    # Handle canceled payment logic here
  end
end

Set up routes for the checkout process in config/routes.rb:

post 'checkout/create', to: 'checkouts#create'
get 'checkout/success', to: 'checkouts#success'
get 'checkout/cancel', to: 'checkouts#cancel'

Create the Stripe Checkout view in JavaScript (app/views/checkouts/create.js.erb):

var stripe = Stripe('<%= Rails.application.credentials[:stripe][:publishable_key] %>');
stripe.redirectToCheckout({ sessionId: '<%= @session.id %>' });

Add a checkout button in the cart:
Modify the app/views/carts/show.html.erb:

<%= button_to 'Checkout with Stripe', checkout_create_path(product_id: product.id), remote: true %>

Ensure you handle payment success and failure properly:
In the CheckoutsController, after payment success, clear the cart and display a confirmation message.

5. Allowing Product Image Uploads

To add image upload functionality, we’ll use Active Storage.

Install Active Storage:

rails active_storage:install
rails db:migrate

Attach images to the Product model:
Update the Product model to support images:

class Product < ApplicationRecord
  has_one_attached :main_image
  has_many_attached :gallery_images
  validates :title, :price, :stock, presence: true
end

Update the product form to accept image uploads:
In app/views/products/_form.html.erb:

<%= form_with(model: @product, local: true) do |form| %>
  <div class="field">
    <%= form.label :main_image %>
    <%= form.file_field :main_image %>
  </div>

  <div class="field">
    <%= form.label :gallery_images %>
    <%= form.file_field :gallery_images, multiple: true %>
  </div>
<% end %>

6. Final Thoughts and Next Steps

You now have a basic e-commerce store that allows users to:

View and add products to their cart.
Use Stripe Checkout to process payments.
Upload product images.

From here, you can improve the application by adding features like:

User authentication with Devise.
Order history and confirmation emails.
Enhanced image handling with MiniMagick for resizing.
Only allow admin to upload products and product images.

This tutorial serves as a foundation; you can extend it based on your specific requirements.

919 words
250
1

Your email adress will not be published ,Requied fileds are marked*.

save my name and email in this browser for the next time I comment.

Please ignore this field!

Hi, I'm Kenroy Reid

Hello there

Building an E-Commerce Store with Rails and Stripe Checkout: Full Tutorial

No comment

Leave a Reply

Hi, I'm Kenroy Reid

More Form Aurthor

Categories

Tags

Get The Best Blog Stories into Your inbox!