Incorporating Stripe Payment in React with Rails backend

With any e-commerce site, it’s not complete until you add a payment method. When I was building my Full-stack E-commerce Project, I decided to use Stripe API for incorporating this feature into my Web app. And this is how I implemented it,

1st and the most important step is to read Stripe docs, they are super helpful and easy to understand

Now let's create a Stripe developers account, it gives you a test mode as a developer to test transactions

and then go to Stripe docs and click on Accept Online Payments there you can find different frameworks, frontend and backend languages, and code to implement this feature in your project using them

The next step is to select if you want prebuilt checkout or a custom one, I picked custom in my project and customized it to features I wanted to include

For my backend, I used rails and created a Charges Controller that would handle the payment and return data as JSON, on Stripe Docs they are using plain ruby and if you are using rails as API there are a few tweaks I had to do and

below is their version in plain ruby and right below that is my version of it in Rails and the changes I made

require 'sinatra'
require 'stripe'
# This is your test secret API key.
Stripe.api_key = 'stripe_key'
set :static, true
set :port, 4242
post '/create-payment-intent' do
content_type 'application/json'
data = JSON.parse(request.body.read)
# Create a PaymentIntent with amount and currency
payment_intent = Stripe::PaymentIntent.create(
amount: calculate_order_amount(data['items']),
currency: 'eur',
automatic_payment_methods: {
enabled: true,
},
)
{
clientSecret: payment_intent['client_secret']
}.to_json
end

My version below

first change I made since I am using rails I didn’t have to specify the route in my controller, I did that in my routes.rb and then I hid my api key and I wanted to add shipping address and receipt email which I will receive from my frontend when I create this payment intent, Since this is custom you can add changes as you like, I could add billing address too and then in the end what actually made it work was doing render json: clientSecret

and of course, we need stripe gem added to your gem file.

gem 'stripe', :git => 'https://github.com/stripe/stripe-ruby'

We are done with the rails part, now let's move on to React, again let’s go to Stripe docs and follow the guide do npm i stripe

This is paymentForm component

Main change in this page would be to change the return_url where you want your page to land after it completes the payment

For my custom stripe payment intent, I passed the name, shipping address, and email from my front end with the payment amount and currency as shown in my fetch Post request which is being sent to my create method in Charges Controller and completing the payment.

below is my stripe payment form that shows up and the demo card number which is given by stripe for testing

After the payment is complete then we will go to stripe’s account to check if it was succeeded

You can click on the payment to see the details, This is all test data

I can even send the receipt to users and see the shipping address that I sent from the frontend like below

This is not a real address

This address was sent from my front end to rails and now we see it here in Stripe, isn’t that cool?

you can send payment receipts too, to your customers

in test mode, you can only send it to your account

phew! we are done !! and it works, The possibilities are endless with stripe, you can import your products and create subscriptions and much more.

Let me know if you have any questions below.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Npm React-native-slot-machine

How to protect /uploads route with a custom policy in Strapi V4

The JavaScript Tackle-box

JavaScript Arrow Functions (Beginner Friendly)

Creating Your First VueJS Custom Directive

How To Make Any NodeJS App Serverless

Adopting Newman to scale and run Postman Collections in TypeScript

Using Rails and Javascript to Catalogue Butterflies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saloni Mehta

Saloni Mehta

More from Medium

Utilizing both frontend and backend validations in your React/Ruby on Rails Web Application

Post to Sinatra with React JS/Ruby

Building React.js App With Ruby on Rails API

Difference between JS Functions and Ruby Methods