Adding the Stripe API to your React-Rails application

Welcome to Part 2 of my Stripe API series for React and Rails! If you haven’t yet read part one, you can find it here. In part two we will be walking through building the server-side integration of the Stripe API. In part 1, we used a Stripe Checkout to securely collect the user’s payment information. This process was handled by Stripe, and returned us a Token which represents that sensitive information. Then we sent that Token to our back-end where we will actually charge the User based on their item/s. In this post we will build out that back-end functionality, and the end result will be a functional Stripe payment processing system.

Table of Contents

• Table of Contents
• Set Up
• Charge Controller
  • Require dependancies
  • Create controller class
  • Make a Stripe Charge

Set Up

Just like in our front-end, we are going to want to have a way to safely handle our environmental variables. There are many ways to do this, including a built in rails function, but for consistency we are going to use Dotenv again. We are also going to be receiving requests from our front-end, so we will need to make sure our CORS is properly set up. First, we want to head to our gem file, and uncomment the gem 'rack/cors'. Then we want to add the gems 'dotenv' and 'stripe'. Next, we want to head to ‘config/initializers/cors.rb’. For development, we want to allow requests from all origins. Your final cors.rb file should look something like this:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Charge Controller

Now it is time to make that magic happen. First we need to create a new file under ‘app/controllers’ called charge_controller. This is where we are going to handle the Stripe token from our front-end. We can do this in a few steps:

Require dependancies

At the tope of this file, we want to require the gems we will be utilizing like so:

require 'stripe'
require 'dotenv'
Dotenv.load

The Dotenv.load allows us to access our environmental variables in this file.

Create controller class

Next we want to set up this file according to rails conventions for a controller. We only need a create method, so it should look like this:

class ChargesController < ApplicationController
    def create
    end
end

Make a Stripe Charge

Now we want to make a Stripe charge from our controller. To do that, we are going to utilize the stripe gem. The first step is to provide our API key so stripe knows we are authorized, and which user is accepting payment. In our Stripe account there is a second API key, called the secret key. This is the one we want to provide. To do this, we want to set up another .env file in the root of our rails folder. Be sure to add this file to your .gitignore, so that it isn’t committed to your Github(link). Now you can add your Stripe secret key to this env file. To provide this ket to stripe, we just need to add the following line to our create method:

Stripe.api_key = ENV['STRIPE_SECRET_KEY']

Note that the name of the variable inside the brackets needs to match the name you put in your .env file.

Next we need to disassemble our params coming from the front end. The object we went looked like this: { charge: charge, price: price * 100 }. We will only need the ID from the token, as well as the price value.

class ChargesController < ApplicationController

    def create
        Stripe.api_key = ENV['STRIPE_SECRET_KEY']
        token = params[:charge][:token]
        price = params[:price]

        charge = Stripe::Charge.create({
            amount: price,
            currency: 'usd',
            source: token,
            description: 'Test Charge!',
        })

        render json: charge
    end

end