diff --git a/static/js/lib/ecommerce.js b/static/js/lib/ecommerce.js
index 3e330f91ef..55eab6fc7a 100644
--- a/static/js/lib/ecommerce.js
+++ b/static/js/lib/ecommerce.js
@@ -58,24 +58,6 @@ const formatDateForRun = (dateString: ?string) =>
 export const formatRunTitle = (run: CourseRun) =>
   `${formatDateForRun(run.start_date)} - ${formatDateForRun(run.end_date)}`
 
-export const formatErrors = (errors: string | Object) => {
-  if (!errors) {
-    return null
-  }
-
-  let errorString
-  if (typeof errors === "object") {
-    if (errors.items) {
-      errorString = errors.items[0]
-    } else {
-      errorString = errors[0]
-    }
-  } else {
-    errorString = errors
-  }
-  return <div className="error">{errorString}</div>
-}
-
 export const isPromo = equals(COUPON_TYPE_PROMO)
 
 export const createProductMap = (
diff --git a/static/js/lib/form.js b/static/js/lib/form.js
index e37617bada..df82714228 100644
--- a/static/js/lib/form.js
+++ b/static/js/lib/form.js
@@ -1,5 +1,6 @@
 // @flow
 import type { CheckoutPayload } from "../flow/ecommerceTypes"
+import React from "react"
 
 /**
  * Creates a POST form with hidden input fields
@@ -25,3 +26,23 @@ export function createCyberSourceForm(
   }
   return form
 }
+
+export const formatErrors = (
+  errors: string | Object | null
+): React$Element<*> | null => {
+  if (!errors) {
+    return null
+  }
+
+  let errorString
+  if (typeof errors === "object") {
+    if (errors.items) {
+      errorString = errors.items[0]
+    } else {
+      errorString = errors[0]
+    }
+  } else {
+    errorString = errors
+  }
+  return <div className="error">{errorString}</div>
+}
diff --git a/static/js/lib/form_test.js b/static/js/lib/form_test.js
index 0b2551113d..a68ff7ff28 100644
--- a/static/js/lib/form_test.js
+++ b/static/js/lib/form_test.js
@@ -1,8 +1,9 @@
 // @flow
 import { assert } from "chai"
+import { shallow } from "enzyme"
 
 import { CYBERSOURCE_CHECKOUT_RESPONSE } from "./test_constants"
-import { createCyberSourceForm } from "./form"
+import { createCyberSourceForm, formatErrors } from "./form"
 
 describe("form functions", () => {
   it("creates a form with hidden values corresponding to the payload", () => {
@@ -23,4 +24,27 @@ describe("form functions", () => {
     assert.equal(form.getAttribute("action"), url)
     assert.equal(form.getAttribute("method"), "post")
   })
+
+  describe("formatErrors", () => {
+    it("should return null if there is no error", () => {
+      assert.isNull(formatErrors(null))
+    })
+
+    it("should return a div with the error string if the error is a string", () => {
+      const wrapper = shallow(formatErrors("error"))
+      assert.equal(wrapper.find(".error").text(), "error")
+    })
+
+    it("should return the first item in the items in the error object if it has items", () => {
+      const error = { items: ["error"] }
+      const wrapper = shallow(formatErrors(error))
+      assert.equal(wrapper.find(".error").text(), "error")
+    })
+
+    it("should return the first item in the error if there is no 'items'", () => {
+      const error = ["error"]
+      const wrapper = shallow(formatErrors(error))
+      assert.equal(wrapper.find(".error").text(), "error")
+    })
+  })
 })