Braintree Drop-in UI Integration in Rails: Complete Payment Gateway Setup
Integrate Braintree’s Drop-in UI with your Rails app in minutes. From API setup to secure transaction handling, this guide walks you through building a complete and user-friendly payment gateway using Braintree.
In today’s digital world, enabling secure and seamless online payments is essential for any modern web application. Whether you're running an e-commerce store, a subscription-based service, or a marketplace, integrating a reliable payment gateway ensures trust, improves user experience, and drives conversions. In this guide, we’ll walk through how to integrate Braintree’s Drop-in UI into a Ruby on Rails application—giving you a complete, production-ready payment flow with support for credit cards, PayPal, and more.
Braintree is a powerful payment gateway that enables businesses to accept online payments in multiple currencies. It also supports features like recurring billing, making it an ideal solution for subscription-based services and global transactions.
Braintree provides sandbox support to help you test your integration thoroughly before going live. Visit the Test Everything Braintree page to sign up for a sandbox account and start testing securely.
Under the API section in the Settings dropdown, you’ll find your Braintree application keys and configuration details required for integration.
Set up Braintree configurations
Now, add the necessary gemsets to your Gemfile. The gon gem is particularly helpful because it enables you to access your Rails variables directly in JavaScript.
gem 'braintree' gem 'gon'
Create a new file named braintree.rb inside the /config/initializers directory. In this file, add the necessary configuration for Braintree. It's recommended to store your API keys and credentials in environment variables for security and flexibility.
Braintree::Configuration.environment = :sandbox Braintree::Configuration.merchant_id = ENV['BRAINTREE_MERCHANT_ID'] Braintree::Configuration.public_key = ENV['BRAINTREE_PUBLIC_KEY'] Braintree::Configuration.private_key = ENV['BRAINTREE_PRIVATE_KEY']
Generate Client Token
In your controller’s new action, generate a client token and assign it to a variable. There are several ways to pass Rails variables to JavaScript, and for this integration, we’ll use the Gon gem. Gon makes it easy to access controller variables directly in JavaScript.
Now, update your application.html.erb layout file to include Gon in the <head> section. This ensures that your Rails variables are available in JavaScript on every page that needs them.
<%= include_gon %>
Go back to your controller action and create a variable by assigning it to the gon object. This makes the variable accessible in your JavaScript files.
Set up Braintree JavaScript SDK
To set up the Braintree JavaScript SDK, add the following line to your application.html.erb layout file, ideally just before the closing </body> tag:
This includes the Braintree Drop-in UI SDK, which is necessary to render and handle the payment form on the front-end.
Integrate Drop-In UI
Braintree offers an easy-to-integrate payment UI that supports both credit card and PayPal payments out of the box.
To integrate the Drop-in UI, configure your form as shown below:
Create Braintree User
To store the customer_id returned by Braintree when a customer is created, you need to add a new column to your users table.
Generate a migration to add the braintree_customer_id column:
rails g migration add_braintree_customer_id_to_users braintree_customer_id:string
Next, add a method in the User model to check whether the user has any saved payment methods in Braintree. This is useful to determine if the user has previously completed a transaction or saved their payment details.
Create Braintree Subscription
In the create action of your controller, add code to create a Braintree customer and store the payment method using the payment method nonce received from the Drop-in UI.
You can also create subscription plans using the Braintree Plans API. After creating a subscription using one of these plans, the plan ID returned in the response can be stored in your database for future reference or billing logic.
Your Braintree integration is now complete. You can begin testing the payment flow in your application and move to production when you're ready.
At Humive, we help businesses build powerful, modern web applications using Ruby on Rails—with a strong focus on seamless and secure payment gateway integrations. Whether you're managing subscriptions, one-time transactions, or multi-currency support, we specialize in delivering fast, reliable, and scalable payment solutions tailored to your business needs.
👉 Need help integrating payments into your product? Let’s make it happen. Get in touch to start building with us.
