The global payment gateway market size was valued at USD 26.79 billion in 2022. Experts expect it to expand at a compound annual growth rate of 22.1 percent from 2022 to 2030.
This implies many more people are adopting or switching to online payment method such as Stripe. The effects of the Covid-19 pandemic have accelerated this change. That is why integrating a payment gateway system like Stripe is vital for your digital business. Stripe is one of the best online payment gateway solutions: an international payment method allowing individuals and businesses to use online payment method. Let’s learn how to integrate Stripe into a Rails product.
How To Integrate Stripe Gem into a Ruby on Rails Application
Due to its convenient interface and extensive documentation, Stripe is an easy-to-use application for any business. Adding Stripe API to your Rails product or application does not involve writing lots of code. This is because the Stripe product has comprehensive documentation on how to do so.
1. Creating the Developer’s Profile
In order to receive access to a Stripe API product key, you will need to create a new developer profile to input the code. On the Dashboard, go to Account Settings => API keys. You will find two secret keys: the Stripe API test and publish keys. These keys are used for the deployment of pre-made integration code.
There are two types of keys, including test and live versions.
During Stripe API product code integration, you should only use the Stripe account test keys to avoid charging real customers credit card accidentally. The live keys are only used when you are ready to deploy your application. This helps users to be able to use credit cards on your site.
2. Create New a Stripe Payment Form
To be able to charge from customers’ card on your product or application, you need a payment form. So, it is necessary to create something new or code one.
Using Stripe API product Checkout is the simplest way to create new a payment form to accept payments from credit card. With it, Stripe automatically create the new payment form. All you need to do is add the code on your payment page:
<%= form_tag charges_path do %>
<article>
<% if flash[:error].present? %>
<div id=”error_explanation”>
<p><%= flash[:error] %></p>
</div>
<% end %>
<label class=”amount”>
<span>Amount: $<%= @order.price %></span>
</label>
</article>
<script src=”https://checkout.stripe.com/checkout.js” class=”stripe-button”
data-key=”<%= Rails.configuration.stripe[:publishable_key] %>”
data-description=”A month’s subscription”
data-amount=”<%= @order.price %>”
data-locale=”auto”></script>
<% end %>
The standard Stripe API Checkout button will be generated once you add this form to your payment page. Stipe Checkout validates the debit card or credit card details and create a new token which is added to a hidden element in the form. This information is then submitted to your server.
Devs can use code attributes such as data-image, data-name, or data description to customize the stripe API Checkout Payment form.
However, to get a full custom payment form, you need a create a new token and handle for submitting the token to the server. A couple of scripts or lines of code also need to be added:
<script src=”https://js.stripe.com/v2/”></script>
And
<script>
Stripe.setPublishableKey(‘pk_test_SAfpkFB2WVKLbQVukGCTVq5Z’);
</script>
The main Stripe API script will accept data from the form and initiate the handler, which is a callback function. This will add an input field to the payment form:
<input type=”hidden” name=”stripeToken” />
The handler also submits the form to the server. If this input field is not added with the Stripe API token or code, the product will be unable to accept credit card charges on the backend.
3. Installing Stripe to the Project
To use Stripe API in your application, you need to add the Stripe Ruby gem:
gem ‘stripe’
Then, add it to the project by launching the $ bundle command and creating the controller via the command line $ rails g controller charges.
Upon adding the controller, create the new Customer object. Although you can perform the charges directly, creating the customer will allow you to use repetitive billing on their credit card. Do that using the following code:
def new
end
def create
# Amount in cents
@amount = 500
customer = Stripe::Customer.create(
:email => params[:stripeEmail],
:source => params[:stripeToken]
)
charge = Stripe::Charge.create(
:customer => customer.id,
:amount => @amount,
:description => ‘Rails Stripe customer’,
:currency => ‘usd’
)
rescue Stripe::CardError => e
flash[:error] = e.message
redirect_to new_charge_path
end
4. Configuring Stripe Keys
Return to your Stripe account profile and open the API keys tab. Save your test and live keys in the file secrets.yml and store them in the config folder. The contents of the file should look like this code (we used the keys from our test account):
Development:
stripe_secret_key: ‘sk_test_nWjL9fQH8v23uSiEPJT5d1Xs’
stripe_publishable_key: ‘pk_test_NxfJqAJ1j1w8p0K3959byw1P’
production:
stripe_secret_key: ‘sk_live_wHzOtGqRSHVCCh1eaJiVd3M1’
stripe_publishable_key: ‘pk_live_iGxbYHVwYXZlQBZAKeuhzYEW’
Then go to the stripe.rb file located in the directory config/initializers/stripe.rb and add the following code there:
Rails.configuration.stripe = {
:publishable_key => ENV[‘PUBLISHABLE_KEY’],
:secret_key => ENV[‘SECRET_KEY’]
}
Stripe.api_key = Rails.configuration.stripe[:secret_key]
Remember that to avoid compromising the application or product and affecting real customers, you should only add the Stripe test keys.
5. Creating Page Views
The next step is to set up how the Stripe payment form will be viewed on the page: to create a new credit card payment form and the page that is viewed after the charge is processed.
The payment form is necessary for you to charge your customer. The easiest way to integrate it is to use Stripe Checkout – a tool that allows you to accept payments easily from a credit card.
How to use Stripe Checkout? It automatically create a simple, but functional payment form. To get it, include this code on your payment page.
Now create a charges.html.erb layout under the application / views / layouts directory:
<!DOCTYPE html>
<html>
<head></head>
<body>
<%= yield %>
</body>
</html>
The next step is to create a new checkout page new.html.erb in the application / views / charges folder to display the payment form, validate the credit card details and report errors. Create the new checkout page using the following code:
<%= form_tag charges_path do %>
<article>
<% if flash[:error].present? %>
<div id=”error_explanation”>
<p><%= flash[:error] %></p>
</div>
<% end %>
<label class=”amount”>
<span>Amount: $5.00</span>
</label>
</article>
<script src=”https://checkout.stripe.com/checkout.js” class=”stripe-button”
data-key=”<%= Rails.configuration.stripe[:publishable_key] %>”
data-description=”Monthly subscription”
data-amount=”500″
data-locale=”auto”></script>
<% end %>
Then add a create.html.erb view in the same directory to show the user a message about a successful transaction:
<h2>Great! Your payment of $100 was successful!</h2>
Now you know how to implement a payment gateway. We have added the payment form validating the details provided by the customer. In the next step, we create a one-time token that will be submitted directly to your server. By default, the snippet will look like the one given below, but it can be customized to match your brand’s colors. Learn how to do this here.
We have successfully implemented Stripe API into a Ruby on Rails application. Now it’s time to test what we’ve done and deploy it.
6. Testing the Performance
You successfully implemented a payment gateway method. To test the functionality of the integrated payment method, launch the Rails server and set the variables for your test publishable and private keys:
PUBLISHABLE_KEY=pk_test_NxfJqAJ1j1w8p0K3959byw1P
SECRET_KEY=sk_test_nWjL9fQH8v23uSiEPJT5d1Xs rails s
Now, go to http://localhost:3000/charges/new to see the usable payment form. Enter the Stripe test card number, a random three-digit CVC and any future expiration date. If the charge is successful, it will display on your product dashboard.
7. Deploy to Heroku
Having successfully performed the transaction, it’s time to make it publicly available for your users. To deploy the application, you need a Heroku account and an installed Heroku Toolbelt.
Launch the following code :
git init
git add
git commit -m ‘ My simple Stripe application ‘
heroku create
heroku config:set PUBLISHABLE_KEY=pk_test_NxfJqAJ1j1w8p0K3959byw1P SECRET_KEY=sk_test_nWjL9fQH8v23uSiEPJT5d1Xs
git push heroku master
heroku open
Since Stripe account is now ready to be used, replace your test keys with the live ones. That’s it, you have successfully set up Stripe account for your Ruby on Rails site. Now, users can use their credit cards on your site.
How We Integrated Stripe in Our Projects
Veeqo
Veeqo Homepage
This is an omnichannel retail platform for various merchants. It allows you to manage your orders from multiple channels and keep track of inventory from multiple warehouses.
Our main goal was to develop user profiles in the retailers’ system, create new orders, and create invoices.
Challenges
One of the main challenges of this project was to reduce the time taken to process payments. Veeqo used to process payments manually. All the invoices used to be arranged via bank transfers or phone. This manual payment system required a lot of time and resources.
Our Solution
To solve this issue, we decided to integrate the Stripe payment method. It allows the use of different types of payment method and is convenient for both the Veeqo team and Veeqo customers.
Our team has enabled Stripe Account Link Integration, which automatically allows users to fill in the Stripe form if the user entered incorrect or incomplete information. This action helps to reduce the number of rejected Stripe accounts that did not pass Stripe validation.
Results
Started integration of React (as a front-end solution) and Stripe (as a payment method). We connected AWS Lambda to unload Veeqo’s servers. We also used Agile Scrum, one-call engineers, and our own expertise and initiative for effective communication.
This platform was acquired by Amazon and raised over $4 million in March 2019.
Uniting Health
Uniting Health is a digital platform for people to organize, share and participate in various activities dedicated to healthcare and well-being. The project is dedicated to supporting wellness and inspiring people to participate in real–world wellness social activities.
Our client aimed to develop a product prototype into the MMP (minimum marketable product).
One of the major challenges during this project was Automated Clearing House (ACH) payment implementation. It is a specific bank-to-bank type of payment used in the US. Because we had decided not to outsource ACH implementation, our team had to perform manual implementations.
To solve this problem, we created our own payment verification system and implemented both credit card and ACH payment method through Stripe account.
We turned the prototype into the MMP of the social network for organizing health events, enabling companies to register, add employees, and organize events through the platform.
Sloboda studio’s contribution to the project:
- Stripe, ACH Payments integration
- Creation of in – application messaging and notification systems
- Google maps integration
- Creation of the Membership registration page
Conclusion
Stripe is one of the best payment processing services, with a great API and comprehensible documentation. Using such a user-friendly and flexible solution, we can easily improve and implement any type of payment integration — from ecommerce platforms to recurring billing from credit cards and even more. All you need to do is:
- Create the developer’s profile
- Create a new Stripe payment form
- Install stripe to the project
- Configure the Stripe keys
- Create page views
- Test performance
- Deploy to Heroku
With tons of experience integrating payment gateway product, Sloboda Studio is here, ready to help.
