Implementing Stripe in a React app with a Rails API Backend

Image Sourcehttps://wptravel.io/downloads/wp-travel-stripe-checkout/

I know why you’re here. You’re working on a React app for your portfolio or bootcamp project, and want to add some form of payment processing to impress people. But the PayPal API looks daunting. Luckily, Stripe is very intuitive and implementing a basic credit card payment framework is beyond achievable. I recommend you read their docs here. They have very clear guidelines for using Stripe with Rails and also React. There’s no literal guidelines for a React fronted and a Ruby backend, so that’s where we come in. Worry not; it’s not too difficult beyond what’s in the docs.

SETTING UP THE BACKEND

Image Source

Let’s start with our Rails API backend. As a first step you’ll want to install the Ruby Stripe gem either in terminal, or as part of your gemfile.

  1. gem install stripe

The nice thing about Stripe is it handles the whole payment for us. We don’t need to create any sort of models in the backend insofar as the actual processing of a payment is concerned. If you want to store any sort of payment info locally in your backend, you are of course free to. One thing we do need to set up is a charges_controller.rb file in your controllers. The controller is going to handle the action of actually communicating the charge or info request to Stripe.

2. rails generate controller Charges

Your controller for a simple transaction could look something like this. I’ll make some comments below based on lines of code:

Line 7: Your Stripe key visible in your developer panel once you sign up. You’ll have different sets of keys for test environments and real transactions environments. To use a test environment all you need to do is use your test environment key. In an actual project or app I also suggest you safely store your API keys and not leave them out there for the world to see.

Line 11: The Customer class is sort of self-explanatory. It’s the individual making the payment. In this example, I’m only using an email address as a distinguishing factor, and I’m pulling it from the authenticated user. the :source attribute is also required, and it comes form our front end. It is the charge token created when the user submits a charge. All that is handled by Stripe, and we’ll get to that soon.

Line 16: This is the actual charge. The Stripe docs go into detail on all the different attributes it can have. Again, our example is going to be very basic. All the params info is coming from our front end, and we’ll tackle that in just a tick.

Line 25: Very bare bones error handling. There are ways to get much more specific.

And that’s it for the Backend. We don’t need serializers or anything else to have Stripe function. Let’s move on!

SETTING UP THE REACT FRONT END

Image Source

You’ll first want to install the stripe elements library using yarn. Using npm or bundling doesn’t work for PCI compliance purposes. The library is what is responsible for the Stripe tokenization.

  1. yarn add react-stripe-element

Next, we need to add a script tag into our public/index.html file inside the header tag.

2. <script src="https://js.stripe.com/v3/"></script>

OK, now we’re ready to cook with Stripe inside our app. In your src/App.js file you’ll want to import Elements and StripeProvider and then wrap your components in them like this. StripeProvider is what actually creates the Stripe instance and passes in your API key.

And lastly, we’ll want to create the actual payment handling component. The StripeProvider will handle all the actual Stripe heavy lifting creating the secure token for the charge. All we need to do is take in info from the user and pass it into our backend charge controller. For this example I’m using fetch, and we’ll need to use an async function because the charge token creation is not immediate. injectStripe must wrap the component for the charge to go through. A very simple barebones React component might look like this:

And that’s it. The PaymentForm component will fetch to your backend and the Charges controller will handle the rest. If you are using Redux, thunk, reducers, etc. you’ll need to tailor everything a bit deeper, but this is the most basic way to have Stripe work with your React and Rails App. The docs provide a lot more info on Charge objects and all the different ways to add customized Stripe elements to your app. Once you get the easy charges working, dig into the deeper stuff! Happy coding!

Add a Comment

Your email address will not be published. Required fields are marked *