Web Services: Integrating a Third-Party API

Topics Covered in This Ruby on Rails Tutorial:

Installing the HTTParty Gem and Integrating Real-Time Bitcoin Pricing into Order Summaries

Exercise Overview

Modern web applications rarely exist in isolation—they thrive through strategic integration with third-party services and APIs. In this exercise, we'll explore web services from both perspectives: first, we'll integrate a live Bitcoin pricing API into our e-commerce platform, and in the next exercise, we'll learn to expose our own data for partner consumption. This dual approach will give you the complete toolkit for building interconnected, data-rich applications that leverage the broader web ecosystem.

1. If you completed the previous exercises, you can skip the following sidebar. We strongly recommend finishing exercises 8A–11A before starting this one, as they establish the foundational cart and order functionality we'll be extending. If you haven't completed them, follow the setup instructions below.

   Web Services Integration Approach

   Current Exercise

   Consume Third-Party API

   Integrate external web service (Bitcoin rates) into your Rails application

   Next Exercise

   Syndicate Your Data

   Learn to expose your application data to external partners

Getting Bitcoin Quotes with HTTParty

Cryptocurrency payment integration has become increasingly important for e-commerce platforms, especially as digital currencies gain mainstream adoption. We're going to enhance our site to support both traditional dollar payments and Bitcoin transactions. Since Bitcoin's exchange rate is notoriously volatile—often fluctuating significantly within hours—we need real-time pricing data to ensure accurate conversions.

For this integration, we'll use BitPay's robust API at bitpay.com/api/rates, which provides reliable, up-to-date exchange rates across multiple currencies. To interact with this external service efficiently within our Rails application, we'll leverage the HTTParty gem—a powerful, lightweight HTTP client that simplifies API consumption with an intuitive Ruby interface.

1. For this exercise we'll continue working with the nutty folder located in Desktop > Class Files > yourname-Rails Class > nutty

   If you haven't already done so, we suggest opening the nutty folder in your code editor if it allows you to (like Sublime Text does). Having the entire project structure visible will help you navigate between files more efficiently.

2. You should still have a window with two tabs open in Terminal from the last exercise, the first of which is running the server. If you don't, complete the following sidebar to get your development environment properly configured.

   Why Bitcoin Integration?

   Bitcoin's volatile exchange rate requires real-time API integration. The BitPay API at bitpay.com/api/rates provides reliable, free access to current exchange rates across 165 currencies.

   API Response Data

   0

   currencies supported by BitPay API

Adding the Total in Bitcoin

Now that we understand how to fetch Bitcoin exchange rates, let's integrate this functionality into our application architecture. We'll add the Bitcoin conversion logic to our shared methods module, ensuring it can be reused across both cart and order objects—a key principle of maintainable Rails development.

1. In your code editor, open nutty > lib > checkout_shared_methods.rb

   NOTE: Remember that earlier we extracted common functionality between cart and order objects into this shared module. This architectural decision now pays dividends as we can add Bitcoin support to both objects with a single implementation.

2. Add the following method after the existing total method:

   def total
         subtotal
      end
   
      def bitcoin_total
         bitcoin_rate = HTTParty.get('https://bitpay.com/api/rates').find { |r| r['code'] == 'USD'}['rate']
      end
   end

   One of Ruby's greatest strengths is its expressiveness—allowing complex operations to be written concisely. The bitcoin_rate line could have been expanded into five separate lines, but method chaining lets us accomplish the entire API call, search, and data extraction in a single, readable statement.

3. Now we need to calculate and return the Bitcoin equivalent price. Add the conversion logic:

   def bitcoin_total
      bitcoin_rate = HTTParty.get('https://bitpay.com/api/rates').detect { |r| r['code'] == 'USD'}['rate']
      (total * (1.0 / bitcoin_rate)).round(8)
   end

   NOTE: We use 1.0 rather than 1 to ensure floating-point arithmetic and preserve decimal precision. Bitcoin amounts are conventionally expressed to eight decimal places (the smallest unit being a "satoshi"), so we round accordingly for proper display and calculation accuracy.

4. With our Bitcoin calculation logic complete, let's integrate it into the user interface. Save the file and move on to updating the cart display.

5. In your code editor, open nutty > app > views > cart > index.html.erb

6. Locate the total display section around lines 69–72 and copy this code:

   <tr class="total-price">
      <td>Total</td>
      <td id="total"><%= number_to_currency @cart.total %></td>
   </tr>

7. Paste directly below the copied lines, then modify the new code to display the Bitcoin total:

   <tr class="total-price">
      <td>Total</td>
      <td id="total"><%= number_to_currency @cart.total %></td>
   </tr>
   <tr class="total-price">
      <td>Total in Bitcoin</td>
      <td id="bitcoin- total"><%= @cart.bitcoin_total %> BTC</td>
   </tr>

   NOTE: Don't forget to remove the number_to_currency helper from the Bitcoin row, as we're displaying the raw Bitcoin amount with the "BTC" suffix.

8. Save the file and prepare to test the initial implementation.

9. Open a browser and navigate to: localhost:,000

10. Click on a product then click the Add To Cart button.

11. Sign in if prompted. If you did not create an account in a previous exercise, click the Sign up link, enter an email and password, then click Sign Up.

12. Excellent! You should now see in the Order Summary that alongside the regular Total, there's a new Total in Bitcoin row showing the real-time cryptocurrency equivalent. However, we need to ensure this functionality works seamlessly with our AJAX-powered cart updates.

13. In your code editor, open nutty > app > views > line_items > update.js.erb

14. Copy the last line and paste it directly below the original to handle Bitcoin total updates.

15. Edit the duplicated code to update the Bitcoin display:

    $('td#total').html('<%= number_to_currency @cart.total %>');
    $('td#bitcoin- total').html('<%= @cart.bitcoin_ total %> BTC');

    NOTE: Remember to remove number_to_currency from the Bitcoin line. Notice the naming convention: we use hyphens for HTML IDs and CSS classes, but underscores for Ruby method names—following Rails conventions ensures consistency across your application.

    This architecture demonstrates the power of Rails' MVC pattern: our business logic resides in the model (the shared module), keeping our views clean and our calculations centralized. No code duplication, no scattered API calls—just clean, maintainable architecture.

16. Save the file and test the complete AJAX integration.

17. Go to the browser and reload the cart page: localhost:,000/cart

18. Change the quantity of an item in your cart to test the dynamic updates.

19. Click the update link. Both the dollar total and the Total in Bitcoin should update seamlessly in real-time, demonstrating a fully integrated cryptocurrency payment display system!

20. Clean up your Rails console session by switching back to Terminal and typing:

    exit

21. Leave Terminal, your code editor, and browser open as we will continue building upon this foundation in the following exercise, where we'll explore the flip side of API integration: exposing your own data for external consumption.